@ynput/ayon-react-components 1.7.1 → 1.7.3

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

@@ -22370,13 +22370,14 @@ const J_ = (n, a) => {
     .playable {
       display: none;
     }
-    /* hide title text but show icon */
-    .title {
-      .icon {
-        display: block;
-      }
-      .inner-text {
-        display: none;
+  }
+
+  /* hide everything on bottom but the status icon */
+  @container card (inline-size < 85px) {
+    .row-bottom {
+      .tag.users,
+      .tag.priority {
+        visibility: hidden;
       }
     }
   }
@@ -22896,7 +22897,7 @@ const J_ = (n, a) => {
       nh(ae) || Oe && Oe(), G.onClick && G.onClick(ae);
     },
     onKeyDown: (ae) => {
-      G.onKeyDown && G.onKeyDown(ae), !W && (ae.code === "Enter" || ae.code === "Space") && (nh(ae) || Oe && Oe());
+      G.onKeyDown && G.onKeyDown(ae), (ae.code === "Enter" || ae.code === " ") && (nh(ae) || Oe && Oe());
     },
     children: [Ie(n, "header") && /* @__PURE__ */ ie(Zxe, {
       className: "header loading-visible",
@@ -22939,7 +22940,6 @@ const J_ = (n, a) => {
       className: tt("thumbnail", {
         loading: A
       }, (Ae = Me == null ? void 0 : Me.thumbnail) == null ? void 0 : Ae.className),
-      tabIndex: W ? 0 : void 0,
       onKeyDown: (ae) => {
         var ze, Qe;
         !W || (ae.stopPropagation(), (ze = Me.thumbnail) != null && ze.onKeyDown && ((Qe = Me.thumbnail) == null || Qe.onKeyDown(ae)), (ae.code === "Enter" || ae.code === "Space") && Oe && Oe());

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

@@ -2501,13 +2501,14 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     .playable {
       display: none;
     }
-    /* hide title text but show icon */
-    .title {
-      .icon {
-        display: block;
-      }
-      .inner-text {
-        display: none;
+  }
+
+  /* hide everything on bottom but the status icon */
+  @container card (inline-size < 85px) {
+    .row-bottom {
+      .tag.users,
+      .tag.priority {
+        visibility: hidden;
       }
     }
   }
@@ -2892,7 +2893,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   left: -6px;
   right: -6px;
   top: -6px;
-`,Kl=n=>{const[a,o]=W.useState(!1),[t,e]=W.useState(!!n),i=(c,u)=>{e(c),o(u)};return W.useEffect(()=>{if(i(!0,!1),!n)return i(!1,!1);n&&(async()=>{try{if((await fetch(n,{cache:"force-cache"})).status===200)i(!1,!1);else throw new Error("Image not OK")}catch{i(!1,!0)}})()},[n]),[t,a]},I0=n=>{const a=n&&n[0],o=n&&n[1],t=(a==null?void 0:a.avatarUrl)||(a!=null&&a.name?`/api/users/${a==null?void 0:a.name}/avatar`:void 0),e=(o==null?void 0:o.avatarUrl)||(o!=null&&o.name?`/api/users/${o==null?void 0:o.name}/avatar`:void 0),[i,c]=Kl(a&&t),[u,d]=Kl(o&&e);return n!=null&&n.length?{users:n==null?void 0:n.map((f,h)=>{let v;return h===0?v=i||c?void 0:t:h===1&&(v=u||d?void 0:e),{...f,avatarUrl:v}}),isLoading:i||u}:{users:[],isLoading:!1}},R0=W.forwardRef(({header:n,path:a,project:o,showPath:t,title:e="",titleIcon:i,isPlayable:c,users:u,status:d,statusMiddle:_,statusNameOnly:f,priority:h,hidePriority:v,imageUrl:k,imageAlt:b,imageIcon:T,notification:O,isActive:R=!1,isLoading:N=!1,loadingSections:A=["title"],isError:P=!1,isHover:F=!1,disabled:z=!1,variant:U="default",isCollapsed:re=!1,isDragging:Z=!1,isDraggable:$=!1,assigneeOptions:L,statusOptions:te,priorityOptions:j,editOnHover:de,editAutoClose:le,onAssigneeChange:ge,onStatusChange:ke,onPriorityChange:Ee,onActivate:Te,pt:Pe={},...X},J)=>{var Ae,Ve;const ie=u&&L&&!!ge,_e=d&&te&&!!ke,B=h&&j&&!!Ee,pe=ie||_e||B,fe=W.useRef(null),ne=W.useRef(null),ae=W.useRef(null),Ce=W.useRef({priority:fe,assignees:ne,status:ae}),Qe=()=>{le&&Object.values(Ce.current).forEach(se=>{var He;(He=se.current)!=null&&He.isOpen&&se.current.close(!0)})},Ue=(se,He)=>{const Xe=Ce.current[He].current;Object.entries(Ce.current).filter(([be])=>be!==He).map(([be,dt])=>({key:be,ref:dt.current})).forEach(({key:be,ref:dt})=>{if(dt!=null&&dt.isOpen){const Be=be==="assignees";dt.close(Be)}}),Xe&&Xe.open()},oe=W.useRef(null),[H,Ie]=W.useState({});W.useEffect(()=>{var It,At,xn,En;if(!oe.current||!d)return;const se=oe.current,He=2,Xe=((It=se.querySelector(".tag.users"))==null?void 0:It.offsetWidth)+12||0,Kt=((At=se.querySelector(".tag.priority"))==null?void 0:At.offsetWidth)||(U==="status"?28:0),be=Xe+Kt+He*2,dt=((xn=se.querySelector(".tag.status .status-label span"))==null?void 0:xn.offsetWidth)||0,Be=((En=se.querySelector(".tag.status .status-short"))==null?void 0:En.offsetWidth)||0;Ie({short:be+dt,icon:be+Be})},[oe.current,d]);const[Je,Oe]=Kl(k),{users:et,isLoading:Fe}=I0(u),Re=(se,He)=>!!se&&!N||N&&A.includes(He);return ce(x0,{ref:J,$statusColor:d==null?void 0:d.color,tabIndex:0,onMouseLeave:Qe,...X,className:nt({isLoading:N,active:R,error:P,hover:F,dragging:Z,draggable:$,disabled:z,collapsed:re},"entity-card",U,X.className),onClick:se=>{zf(se)||Te&&Te(),X.onClick&&X.onClick(se)},onKeyDown:se=>{X.onKeyDown&&X.onKeyDown(se),!$&&(se.code==="Enter"||se.code==="Space")&&(zf(se)||Te&&Te())},children:[Re(n,"header")&&ce(D0,{className:"header loading-visible",children:[a&&w("div",{className:nt("expander",{show:t}),children:ce("div",{className:"path",children:[o&&ce(kr,{children:[w("span",{children:o}),w("span",{className:"slash",style:{marginRight:-2},children:"/"})]}),a&&ce(kr,{children:[w("span",{children:"... "}),w("span",{className:"slash",children:"/"}),w("span",{children:a}),w("span",{className:"slash",children:"/"})]})]})}),w("span",{className:"shot",children:N?"":n})]}),ce(S0,{...Pe.thumbnail,className:nt("thumbnail",{loading:N},(Ae=Pe==null?void 0:Pe.thumbnail)==null?void 0:Ae.className),tabIndex:$?0:void 0,onKeyDown:se=>{var He,Xe;!$||(se.stopPropagation(),(He=Pe.thumbnail)!=null&&He.onKeyDown&&((Xe=Pe.thumbnail)==null||Xe.onKeyDown(se)),(se.code==="Enter"||se.code==="Space")&&Te&&Te())},children:[w(M0,{icon:T||"image",className:nt("no-image",{loading:Je}),onMouseEnter:Qe}),k&&w(C0,{src:k,onMouseEnter:Qe,...Pe.image,className:nt({loading:Je||Oe},(Ve=Pe==null?void 0:Pe.image)==null?void 0:Ve.className)}),ce(Wf,{className:"row row-top loading-visible full",children:[(!N||A.includes("title"))&&w(hs,{className:nt("tag title",{isLoading:N}),children:N?"loading card...":ce(kr,{children:[i&&w(pt,{icon:i}),e&&w("span",{className:"inner-text",children:e})]})}),c&&w(hs,{className:nt("tag playable"),children:w(pt,{icon:"play_circle"})})]}),ce(Wf,{className:nt("row row-bottom loading-visible",{full:_,["hide-priority"]:v}),ref:oe,children:[pe&&ce(kr,{children:[w(P0,{className:"block-leave"}),ce(E0,{className:"editor",children:[ie&&w(al,{value:u.map(se=>se.name),options:L,ref:ne,onChange:(se,He)=>ge(se,He),tabIndex:0,...Pe.assigneeSelect}),_e&&w(I_,{value:[d.name],options:te,ref:ae,onChange:se=>ke([se]),tabIndex:0,...Pe.statusSelect}),B&&w(go,{dataKey:"name",ref:fe,onChange:se=>Ee(se),value:[h.name],options:j,tabIndex:0,...Pe.prioritySelect})]})]}),Re(u,"users")&&w(hs,{className:nt("tag users",{isLoading:Fe||N,editable:ie,empty:!(u!=null&&u.length)}),onMouseEnter:se=>de&&Ue(se,"assignees"),onClick:se=>Ue(se,"assignees"),children:u!=null&&u.length?w(T0,{className:nt({more:u.length>2}),children:[...et].slice(0,2).map((se,He)=>w(Ns,{src:se.avatarUrl,name:se.name,style:{zIndex:-He},fullName:se.fullName||"",size:22},He))}):w(pt,{icon:"person_add"})}),Re(d,"status")&&w(O0,{className:nt("status-container",{middle:_,"name-only":f},`variant-${U}`),$breakpoints:H,children:w("div",{className:"status-wrapper",children:ce(hs,{className:nt("tag status",{editable:_e,isLoading:N}),onMouseEnter:se=>de&&Ue(se,"status"),onClick:se=>Ue(se,"status"),children:[(d==null?void 0:d.icon)&&w(pt,{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})]})})}),Re(h&&!v,"priority")&&w(hs,{className:nt("tag priority",{editable:B,isLoading:N}),onMouseEnter:se=>de&&Ue(se,"priority"),onClick:se=>Ue(se,"priority"),children:(h==null?void 0:h.icon)&&w(pt,{icon:h.icon})})]})]})]})}),zf=n=>n.target.closest(".editable"),N0=me.keyframes`
+`,Kl=n=>{const[a,o]=W.useState(!1),[t,e]=W.useState(!!n),i=(c,u)=>{e(c),o(u)};return W.useEffect(()=>{if(i(!0,!1),!n)return i(!1,!1);n&&(async()=>{try{if((await fetch(n,{cache:"force-cache"})).status===200)i(!1,!1);else throw new Error("Image not OK")}catch{i(!1,!0)}})()},[n]),[t,a]},I0=n=>{const a=n&&n[0],o=n&&n[1],t=(a==null?void 0:a.avatarUrl)||(a!=null&&a.name?`/api/users/${a==null?void 0:a.name}/avatar`:void 0),e=(o==null?void 0:o.avatarUrl)||(o!=null&&o.name?`/api/users/${o==null?void 0:o.name}/avatar`:void 0),[i,c]=Kl(a&&t),[u,d]=Kl(o&&e);return n!=null&&n.length?{users:n==null?void 0:n.map((f,h)=>{let v;return h===0?v=i||c?void 0:t:h===1&&(v=u||d?void 0:e),{...f,avatarUrl:v}}),isLoading:i||u}:{users:[],isLoading:!1}},R0=W.forwardRef(({header:n,path:a,project:o,showPath:t,title:e="",titleIcon:i,isPlayable:c,users:u,status:d,statusMiddle:_,statusNameOnly:f,priority:h,hidePriority:v,imageUrl:k,imageAlt:b,imageIcon:T,notification:O,isActive:R=!1,isLoading:N=!1,loadingSections:A=["title"],isError:P=!1,isHover:F=!1,disabled:z=!1,variant:U="default",isCollapsed:re=!1,isDragging:Z=!1,isDraggable:$=!1,assigneeOptions:L,statusOptions:te,priorityOptions:j,editOnHover:de,editAutoClose:le,onAssigneeChange:ge,onStatusChange:ke,onPriorityChange:Ee,onActivate:Te,pt:Pe={},...X},J)=>{var Ae,Ve;const ie=u&&L&&!!ge,_e=d&&te&&!!ke,B=h&&j&&!!Ee,pe=ie||_e||B,fe=W.useRef(null),ne=W.useRef(null),ae=W.useRef(null),Ce=W.useRef({priority:fe,assignees:ne,status:ae}),Qe=()=>{le&&Object.values(Ce.current).forEach(se=>{var He;(He=se.current)!=null&&He.isOpen&&se.current.close(!0)})},Ue=(se,He)=>{const Xe=Ce.current[He].current;Object.entries(Ce.current).filter(([be])=>be!==He).map(([be,dt])=>({key:be,ref:dt.current})).forEach(({key:be,ref:dt})=>{if(dt!=null&&dt.isOpen){const Be=be==="assignees";dt.close(Be)}}),Xe&&Xe.open()},oe=W.useRef(null),[H,Ie]=W.useState({});W.useEffect(()=>{var It,At,xn,En;if(!oe.current||!d)return;const se=oe.current,He=2,Xe=((It=se.querySelector(".tag.users"))==null?void 0:It.offsetWidth)+12||0,Kt=((At=se.querySelector(".tag.priority"))==null?void 0:At.offsetWidth)||(U==="status"?28:0),be=Xe+Kt+He*2,dt=((xn=se.querySelector(".tag.status .status-label span"))==null?void 0:xn.offsetWidth)||0,Be=((En=se.querySelector(".tag.status .status-short"))==null?void 0:En.offsetWidth)||0;Ie({short:be+dt,icon:be+Be})},[oe.current,d]);const[Je,Oe]=Kl(k),{users:et,isLoading:Fe}=I0(u),Re=(se,He)=>!!se&&!N||N&&A.includes(He);return ce(x0,{ref:J,$statusColor:d==null?void 0:d.color,tabIndex:0,onMouseLeave:Qe,...X,className:nt({isLoading:N,active:R,error:P,hover:F,dragging:Z,draggable:$,disabled:z,collapsed:re},"entity-card",U,X.className),onClick:se=>{zf(se)||Te&&Te(),X.onClick&&X.onClick(se)},onKeyDown:se=>{X.onKeyDown&&X.onKeyDown(se),(se.code==="Enter"||se.code===" ")&&(zf(se)||Te&&Te())},children:[Re(n,"header")&&ce(D0,{className:"header loading-visible",children:[a&&w("div",{className:nt("expander",{show:t}),children:ce("div",{className:"path",children:[o&&ce(kr,{children:[w("span",{children:o}),w("span",{className:"slash",style:{marginRight:-2},children:"/"})]}),a&&ce(kr,{children:[w("span",{children:"... "}),w("span",{className:"slash",children:"/"}),w("span",{children:a}),w("span",{className:"slash",children:"/"})]})]})}),w("span",{className:"shot",children:N?"":n})]}),ce(S0,{...Pe.thumbnail,className:nt("thumbnail",{loading:N},(Ae=Pe==null?void 0:Pe.thumbnail)==null?void 0:Ae.className),onKeyDown:se=>{var He,Xe;!$||(se.stopPropagation(),(He=Pe.thumbnail)!=null&&He.onKeyDown&&((Xe=Pe.thumbnail)==null||Xe.onKeyDown(se)),(se.code==="Enter"||se.code==="Space")&&Te&&Te())},children:[w(M0,{icon:T||"image",className:nt("no-image",{loading:Je}),onMouseEnter:Qe}),k&&w(C0,{src:k,onMouseEnter:Qe,...Pe.image,className:nt({loading:Je||Oe},(Ve=Pe==null?void 0:Pe.image)==null?void 0:Ve.className)}),ce(Wf,{className:"row row-top loading-visible full",children:[(!N||A.includes("title"))&&w(hs,{className:nt("tag title",{isLoading:N}),children:N?"loading card...":ce(kr,{children:[i&&w(pt,{icon:i}),e&&w("span",{className:"inner-text",children:e})]})}),c&&w(hs,{className:nt("tag playable"),children:w(pt,{icon:"play_circle"})})]}),ce(Wf,{className:nt("row row-bottom loading-visible",{full:_,["hide-priority"]:v}),ref:oe,children:[pe&&ce(kr,{children:[w(P0,{className:"block-leave"}),ce(E0,{className:"editor",children:[ie&&w(al,{value:u.map(se=>se.name),options:L,ref:ne,onChange:(se,He)=>ge(se,He),tabIndex:0,...Pe.assigneeSelect}),_e&&w(I_,{value:[d.name],options:te,ref:ae,onChange:se=>ke([se]),tabIndex:0,...Pe.statusSelect}),B&&w(go,{dataKey:"name",ref:fe,onChange:se=>Ee(se),value:[h.name],options:j,tabIndex:0,...Pe.prioritySelect})]})]}),Re(u,"users")&&w(hs,{className:nt("tag users",{isLoading:Fe||N,editable:ie,empty:!(u!=null&&u.length)}),onMouseEnter:se=>de&&Ue(se,"assignees"),onClick:se=>Ue(se,"assignees"),children:u!=null&&u.length?w(T0,{className:nt({more:u.length>2}),children:[...et].slice(0,2).map((se,He)=>w(Ns,{src:se.avatarUrl,name:se.name,style:{zIndex:-He},fullName:se.fullName||"",size:22},He))}):w(pt,{icon:"person_add"})}),Re(d,"status")&&w(O0,{className:nt("status-container",{middle:_,"name-only":f},`variant-${U}`),$breakpoints:H,children:w("div",{className:"status-wrapper",children:ce(hs,{className:nt("tag status",{editable:_e,isLoading:N}),onMouseEnter:se=>de&&Ue(se,"status"),onClick:se=>Ue(se,"status"),children:[(d==null?void 0:d.icon)&&w(pt,{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})]})})}),Re(h&&!v,"priority")&&w(hs,{className:nt("tag priority",{editable:B,isLoading:N}),onMouseEnter:se=>de&&Ue(se,"priority"),onClick:se=>Ue(se,"priority"),children:(h==null?void 0:h.icon)&&w(pt,{icon:h.icon})})]})]})]})}),zf=n=>n.target.closest(".editable"),N0=me.keyframes`
   0% {
     background-position: -1000px 0;
   }

package/package.json

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