@react-spectrum/s2 3.0.0-nightly-bebc9764a-241010 → 3.0.0-nightly-db60babaf-241012

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqDD,MAAM,iDAA6C,CAAA,GAAA,qCAAK;IAItD,OAAO,mBAA2D,EAAQ;QACxE,IAAI,eACF,cAAc,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK,mBAC5B,cAAc,IAAI,CAAA,GAAA,mCAAG,EAAE,UAAU,qBACjC,WAAW,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI,iBACxB,aAAa,UACd,GAAG,oBAAoB,aAAa,IAAI,CAAC;QAC1C,IAAI,eAAe,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK;QAErD,oDAAoD;QACpD,4EAA4E;QAC5E,IAAI,eAAe,KAAK,GAAG,CAAC,YAAY,KAAK,EAAE;QAC/C,IAAI,gBAAgB,OAAO,QAAQ,CAAC,YAAY,MAAM,IAClD,YAAY,MAAM,GAClB,KAAK,KAAK,CAAC,AAAC,YAAY,MAAM,GAAG,YAAY,KAAK,GAAI;QAE1D,uEAAuE;QACvE,IAAI,UAAU,KAAK,KAAK,CAAC,eAAgB,CAAA,YAAY,KAAK,GAAG,SAAS,KAAK,AAAD;QAC1E,IAAI,aAAa,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY;QAElD,8DAA8D;QAC9D,IAAI,QAAQ,eAAgB,SAAS,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG;QAEzD,sDAAsD;QACtD,IAAI,YAAY,KAAK,KAAK,CAAC,QAAQ;QACnC,YAAY,KAAK,GAAG,CAAC,YAAY,KAAK,EAAE,KAAK,GAAG,CAAC,cAAc;QAE/D,mEAAmE;QACnE,IAAI,IAAK,AAAC,CAAA,YAAY,YAAY,KAAK,AAAD,IAAK,KAAK,GAAG,CAAC,GAAG,eAAe,YAAY,KAAK;QACvF,IAAI,aAAa,YAAY,MAAM,GAAI,KAAK,KAAK,CAAC,AAAC,CAAA,gBAAgB,YAAY,MAAM,AAAD,IAAK;QACzF,aAAa,KAAK,GAAG,CAAC,YAAY,MAAM,EAAE,KAAK,GAAG,CAAC,eAAe;QAElE,oDAAoD;QACpD,IAAI,oBAAoB,KAAK,KAAK,CAAC,AAAC,CAAA,eAAe,aAAa,SAAQ,IAAM,CAAA,aAAa,CAAA;QAE3F,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,GAAG;QACxD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC;QAC3D,IAAI,IAAI,OAAO,IAAI,SAAS,MAAM,GAAG;QACrC,IAAI,iBAAiB,IAAI;QACzB,IAAI,WAA2B;QAC/B,IAAI,gBAAgB;QACpB,IAAK,IAAI,MAAM,GAAG,MAAM,MAAM,MAAO;YACnC,IAAI,YAAY;YAChB,IAAI,iBAA+B,EAAE;YACrC,IAAK,IAAI,MAAM,GAAG,MAAM,YAAY,MAAO;gBACzC,oDAAoD;gBACpD,IAAI,OAAO,YAAY,SAAS,IAAI,GAAG,KAAK;gBAC5C,IAAI,CAAC,MACH;gBAGF,IAAI,KAAK,IAAI,KAAK,YAChB,WAAW;gBAGb,IAAI,MAAM,WAAW,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,KAAK,GAAG;gBACpE,IAAI,UAAU,WAAW;oBAAC,GAAG,QAAQ;gBAAA,IAAI;gBACzC,IAAI,IAAI,oBAAoB,MAAO,CAAA,YAAY,iBAAgB;gBAC/D,IAAI,gBAAgB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;gBACzC,IAAI,SAAS;gBACb,IAAI,gBAAgB;gBACpB,IAAI,eAAe;oBACjB,SAAS,cAAc,IAAI,CAAC,MAAM;oBAClC,gBAAgB,oBAAoB,WAAW,IAAI,cAAc,aAAa,IAAK,cAAc,OAAO,KAAK;gBAC/G;gBAEA,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,WAAW;gBACrC,IAAI,aAAa,IAAI,CAAA,GAAA,yCAAS,EAAE,KAAK,IAAI,EAAE,KAAK;gBAChD,WAAW,aAAa,GAAG;gBAC3B,WAAW,aAAa,GAAG;gBAC3B,WAAW,OAAO,GAAG;gBACrB,eAAe,GAAG,CAAC,KAAK;gBACxB,eAAe,IAAI,CAAC;gBAEpB,YAAY,KAAK,GAAG,CAAC,WAAW,KAAK,MAAM;YAC7C;YAEA,KAAK,IAAI,cAAc,eACrB,WAAW,IAAI,CAAC,MAAM,GAAG;YAG3B,KAAK,YAAY,SAAS,MAAM;YAEhC,uDAAuD;YACvD,IAAI,YAAY,QAAQ,OAAO,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,EACzE;QAEJ;QAEA,IAAI,CAAC,WAAW,GAAG;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE;IAClE;IAEA,cAAc,GAAQ,EAAc;QAClC,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;IAC9B;IAEA,iBAAuB;QACrB,OAAO,IAAI,CAAC,WAAW;IACzB;IAEA,sBAAsB,IAAU,EAAgB;QAC9C,IAAI,cAA4B,EAAE;QAClC,KAAK,IAAI,cAAc,IAAI,CAAC,WAAW,CAAC,MAAM,GAC5C,IAAI,WAAW,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,GAAG,GACpF,YAAY,IAAI,CAAC;QAGrB,OAAO;IACT;IAEA,eAAe,GAAQ,EAAE,IAAU,EAAE;QACnC,IAAI,aAAa,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;QACtC,IAAI,CAAC,QAAQ,CAAC,YACZ,OAAO;QAGT,IAAI,KAAK,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,EAAE;YAC1C,IAAI,gBAAgB,WAAW,IAAI;YACnC,cAAc,IAAI,CAAC,MAAM,GAAG,KAAK,MAAM;YACvC,cAAc,aAAa,GAAG;YAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK;YAC1B,OAAO;QACT;QAEA,OAAO;IACT;;;aAjIU,cAAoB,IAAI,CAAA,GAAA,mCAAG;aAC3B,cAAoC,IAAI;;AAiIpD;AAEA,MAAM,kDAA4B,CAAA,GAAA,yCAAS;IAGzC,OAA4B;QAC1B,IAAI,MAAM,KAAK,CAAC;QAChB,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM;QACxB,OAAO;IACT;;;aANA,SAAS;;AAOX;AAEA,MAAM,8CAA0C,CAAA,GAAA,qCAAK;IAKnD,OAAO,mBAA2D,EAAQ;QACxE,IAAI,eACF,cAAc,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK,mBAC5B,cAAc,IAAI,CAAA,GAAA,mCAAG,EAAE,UAAU,qBACjC,WAAW,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI,iBACxB,aAAa,UACd,GAAG,oBAAoB,aAAa,IAAI,CAAC;QAC1C,IAAI,eAAe,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK;QAErD,oDAAoD;QACpD,4EAA4E;QAC5E,IAAI,eAAe,KAAK,GAAG,CAAC,YAAY,KAAK,EAAE;QAC/C,IAAI,gBAAgB,OAAO,QAAQ,CAAC,YAAY,MAAM,IAClD,YAAY,MAAM,GAClB,KAAK,KAAK,CAAC,AAAC,YAAY,MAAM,GAAG,YAAY,KAAK,GAAI;QAE1D,uEAAuE;QACvE,IAAI,UAAU,KAAK,KAAK,CAAC,eAAgB,CAAA,YAAY,KAAK,GAAG,SAAS,KAAK,AAAD;QAC1E,IAAI,aAAa,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY;QAElD,8DAA8D;QAC9D,IAAI,QAAQ,eAAgB,SAAS,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG;QAEzD,sDAAsD;QACtD,IAAI,YAAY,KAAK,KAAK,CAAC,QAAQ;QACnC,YAAY,KAAK,GAAG,CAAC,YAAY,KAAK,EAAE,KAAK,GAAG,CAAC,cAAc;QAE/D,mEAAmE;QACnE,IAAI,IAAK,AAAC,CAAA,YAAY,YAAY,KAAK,AAAD,IAAK,KAAK,GAAG,CAAC,GAAG,eAAe,YAAY,KAAK;QACvF,IAAI,aAAa,YAAY,MAAM,GAAI,KAAK,KAAK,CAAC,AAAC,CAAA,gBAAgB,YAAY,MAAM,AAAD,IAAK;QACzF,aAAa,KAAK,GAAG,CAAC,YAAY,MAAM,EAAE,KAAK,GAAG,CAAC,eAAe;QAElE,oDAAoD;QACpD,IAAI,oBAAoB,KAAK,KAAK,CAAC,AAAC,CAAA,eAAe,aAAa,SAAQ,IAAM,CAAA,aAAa,CAAA;QAE3F,mCAAmC;QACnC,IAAI,gBAAgB,MAAM,YAAY,IAAI,CAAC,SAAS,MAAM;QAC1D,IAAI,iBAAiB,IAAI;QACzB,IAAI,UAAU,CAAC,KAAU;YACvB,IAAI,gBAAgB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;YACzC,IAAI,SAAS;YACb,IAAI,gBAAgB;YACpB,IAAI,eAAe;gBACjB,SAAS,cAAc,IAAI,CAAC,MAAM;gBAClC,gBAAgB,oBAAoB,WAAW,IAAI,cAAc,aAAa,IAAI,cAAc,OAAO,KAAK;YAC9G;YAEA,0EAA0E;YAC1E,sHAAsH;YACtH,IAAI,aAAa,eAAe,IAAI,CAAC,UAAU,GAAG,eAAe,SAAS;YAC1E,IAAI,SAAS,cAAc,cAAc,MAAM,CAAC,CAAC,UAAU,GAAG,IAAM,IAAI,aAAa,CAAC,SAAS,GAAG,IAAI,UAAU;YAChH,IAAI,IAAI,oBAAoB,SAAU,CAAA,YAAY,iBAAgB;YAClE,IAAI,IAAI,aAAa,CAAC,OAAO;YAE7B,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,WAAW;YACrC,IAAI,aAAa,IAAI,0CAAoB,KAAK,IAAI,EAAE,KAAK;YACzD,WAAW,aAAa,GAAG;YAC3B,WAAW,aAAa,GAAG;YAC3B,WAAW,OAAO,GAAG;YACrB,WAAW,MAAM,GAAG;YACpB,eAAe,GAAG,CAAC,KAAK;YAExB,aAAa,CAAC,OAAO,IAAI,WAAW,IAAI,CAAC,MAAM,GAAG,SAAS,MAAM;QACnE;QAEA,IAAI,gBAAgB;QACpB,KAAK,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,UAAU,CAC1C,IAAI,KAAK,IAAI,KAAK,YAAY;YAC5B,oFAAoF;YACpF,IAAI,kBAAkB;mBAAI;aAAc;YACxC,MACE,CAAC,cAAc,KAAK,CAAC,CAAC,GAAG,IAAM,MAAM,eAAe,CAAC,EAAE,KACvD,KAAK,GAAG,IAAI,iBAAiB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,CAChE;gBACA,IAAI,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,gBAAgB,CAAC;gBAC1C,IAAI,UAAU,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,WAAW;oBAAC,GAAG,IAAI;gBAAA;gBAC5D,QAAQ,KAAK;YACf;YACA;QACF,OACE,QAAQ,KAAK,GAAG,EAAE;QAItB,wDAAwD;QACxD,IAAI,YAAY,KAAK,GAAG,IAAI;QAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE;QAChE,IAAI,CAAC,WAAW,GAAG;QACnB,IAAI,CAAC,UAAU,GAAG;IACpB;IAEA,cAAc,GAAQ,EAAc;QAClC,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;IAC9B;IAEA,iBAAuB;QACrB,OAAO,IAAI,CAAC,WAAW;IACzB;IAEA,sBAAsB,IAAU,EAAgB;QAC9C,IAAI,cAA4B,EAAE;QAClC,KAAK,IAAI,cAAc,IAAI,CAAC,WAAW,CAAC,MAAM,GAC5C,IAAI,WAAW,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,WAAW,GAAG,GACpF,YAAY,IAAI,CAAC;QAGrB,OAAO;IACT;IAEA,eAAe,GAAQ,EAAE,IAAU,EAAE;QACnC,IAAI,aAAa,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;QACtC,IAAI,CAAC,QAAQ,CAAC,YACZ,OAAO;QAGT,IAAI,KAAK,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,EAAE;YAC1C,IAAI,gBAAgB,WAAW,IAAI;YACnC,cAAc,IAAI,CAAC,MAAM,GAAG,KAAK,MAAM;YACvC,cAAc,aAAa,GAAG;YAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK;YAC1B,OAAO;QACT;QAEA,OAAO;IACT;IAEA,kDAAkD;IAClD,cAAc,GAAQ,EAAc;QAClC,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC;QACpC,IAAI,CAAC,YACH,OAAO;QAGT,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE,WAAW,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC,IAAI,EAAE,WAAW,IAAI,CAAC,MAAM;QAC7I,IAAI,cAAc,IAAI,CAAC,qBAAqB,CAAC;QAC7C,IAAI,UAAsB;QAC1B,IAAI,eAAe;QACnB,KAAK,IAAI,aAAa,YAAa;YACjC,IAAI,UAAU,GAAG,KAAK,KACpB;YAGF,qFAAqF;YACrF,IAAI,SAAS,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC;YACtC,IAAI,WAAW,KAAK,GAAG,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC;YAC3F,IAAI,WAAW,SAAS;YACxB,IAAI,WAAW,cAAc;gBAC3B,eAAe;gBACf,UAAU,UAAU,GAAG;YACzB;QACF;QAEA,OAAO;IACT;IAEA,aAAa,GAAQ,EAAc;QACjC,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC;QACpC,IAAI,CAAC,YACH,OAAO;QAGT,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC,EAAE,WAAW,IAAI,CAAC,CAAC,EAAE,WAAW,IAAI,CAAC,MAAM;QACnF,IAAI,cAAc,IAAI,CAAC,qBAAqB,CAAC;QAC7C,IAAI,UAAsB;QAC1B,IAAI,eAAe;QACnB,KAAK,IAAI,aAAa,YAAa;YACjC,IAAI,UAAU,GAAG,KAAK,KACpB;YAGF,qFAAqF;YACrF,IAAI,SAAS,KAAK,IAAI,GAAG,UAAU,IAAI,CAAC,IAAI;YAC5C,IAAI,WAAW,KAAK,GAAG,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC;YAC3F,IAAI,WAAW,SAAS;YACxB,IAAI,WAAW,cAAc;gBAC3B,eAAe;gBACf,UAAU,UAAU,GAAG;YACzB;QACF;QAEA,OAAO;IACT;IAEA,2EAA2E;IAC3E,mGAAmG;IACnG,YAAY,IAAS,EAAE,EAAO,EAAS;QACrC,IAAI,iBAAiB,IAAI,CAAC,aAAa,CAAC;QACxC,IAAI,eAAe,IAAI,CAAC,aAAa,CAAC;QACtC,IAAI,CAAC,kBAAkB,CAAC,cACtB,OAAO,EAAE;QAGX,8DAA8D;QAC9D,4DAA4D;QAC5D,IAAI,OAAO,eAAe,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI;QACtD,IAAI,OAAc,EAAE;QACpB,KAAK,IAAI,cAAc,IAAI,CAAC,WAAW,CAAC,MAAM,GAC5C,IAAI,KAAK,YAAY,CAAC,WAAW,IAAI,EAAE,IAAI,GAAG,WAAW,IAAI,CAAC,IAAI,GAAG,GACnE,KAAK,IAAI,CAAC,WAAW,GAAG;QAG5B,OAAO;IACT;;;aA9MU,cAAoB,IAAI,CAAA,GAAA,mCAAG;aAC3B,cAA6C,IAAI;aACjD,aAAa;;AA6MzB;AAEA,MAAM,sCAAgB;IACpB,IAAI;QACF,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;IACF;IACA,IAAI;QACF,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK;QAC7B;IACF;AACF;AAEA,MAAM,8BAAQ;IAAC;IAAM;IAAK;IAAK;IAAK;CAAK;AAEzC,MAAM;;;;;;;;;;;;;;;;;;;AAqBN,SAAS,+BAA2B,KAAuB,EAAE,GAA2B;IACtF,IAAI,YAAC,QAAQ,EAAE,QAAQ,aAAa,MAAM,EAAE,MAAM,WAAW,GAAG,WAAE,UAAU,oBAAW,UAAU,2BAAW,iBAAiB,8BAAY,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACvM,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,oBAAM,EAAE;QACnB,OAAO,eAAe,cAAc,IAAI,0CAAoB,IAAI;IAClE,GAAG;QAAC;KAAW;IAEf,kGAAkG;IAClG,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE,4BAAM,MAAM,GAAG;IAC9D,IAAI,aAAa,CAAA,GAAA,oCAAa,EAAE;QAC9B,IAAI,IAAI,OAAO,OAAO,EAAE,eAAe;QACvC,IAAI,IAAI,4BAAM,MAAM,GAAG;QACvB,MAAO,IAAI,EAAG;YACZ,IAAI,OAAO,mCAAa,CAAC,2BAAK,CAAC,EAAE,CAAC,CAAC,QAAQ;YAC3C,IAAI,KAAK,KAAK,WAAW,CAAC,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,KAAK,GAAG,GAC1D;YAEF;QACF;QACA,gBAAgB;IAClB;IAEA,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,KAAK;QACL,UAAU;IACZ;IAEA,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAW;IAEf,uGAAuG;IACvG,IAAI,OAAO,2BAAK,CAAC,KAAK,GAAG,CAAC,cAAc,4BAAM,OAAO,CAAC,WAAW;IACjE,IAAI,UAAU,mCAAa,CAAC,KAAK,CAAC,QAAQ;IAE1C,CAAA,GAAA,iCAAU,EAAE;QACV,WAAW,MAAM,YAAY,KAAK,UAAU,MAAM,YAAY,KAAK;QACnE,OAAO,MAAM,KAAK;QAClB,YAAY,MAAM,UAAU;IAC9B,GAAG;IAEH,IAAI,MAAM,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;kBAAC;qBAAM;QAAO,CAAA,GAAI;QAAC;QAAM;KAAQ;IAE1D,qBACE,gCAAC,CAAA,GAAA,+CAAmB;QAAE,QAAQ;QAAQ,eAAe;kBACnD,cAAA,gCAAC,CAAA,GAAA,yCAAc,EAAE,QAAQ;YAAC,OAAO,CAAA,GAAA,uCAAW;sBAC1C,cAAA,gCAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;gBAAC,OAAO;0BAC3B,cAAA,gCAAC,CAAA,GAAA,0CAAe;8BACd,cAAA,gCAAC,CAAA,GAAA,mCAAW;wBACV,KAAK;wBACJ,GAAG,UAAU;wBACd,QAAO;wBACP,mBAAmB,mBAAmB,cAAc,YAAY;wBAChE,OAAO;4BACL,GAAG,YAAY;4BACf,eAAe,QAAQ,QAAQ,CAAC,MAAM;wBACxC;wBACA,WAAW,CAAA,cAAe,mBAAmB,qCAAe;gCAAC,GAAG,WAAW;gCAAE,WAAW,MAAM,YAAY,KAAK;4BAAS,GAAG;kCAC1H;;;;;;AAOf;AAEA,MAAM,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {forwardRef, useMemo, useState} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle \n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n \n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n \n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <CardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </CardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n ContextValue,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, useMemo, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle\n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AA0fuB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {forwardRef, useMemo, useState} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle \n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n \n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n \n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <CardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </CardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.css.map"}
1
+ {"mappings":"AA4fuB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n ContextValue,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, useMemo, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle\n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.css.map"}
package/dist/CardView.mjs CHANGED
@@ -1,9 +1,10 @@
1
1
  import "./CardView.css";
2
- import {CardContext as $68e4e6fe083e22fd$export$d0b2ee33ebf7d64, CardViewContext as $68e4e6fe083e22fd$export$64992ac69f286e5c} from "./Card.mjs";
2
+ import {CardContext as $68e4e6fe083e22fd$export$d0b2ee33ebf7d64, InternalCardViewContext as $68e4e6fe083e22fd$export$cb658fed5fefe1d} from "./Card.mjs";
3
3
  import {ImageCoordinator as $4b5e069e9e001e8b$export$1b926c015f09611d} from "./ImageCoordinator.mjs";
4
+ import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
4
5
  import {jsx as $aG2ym$jsx} from "react/jsx-runtime";
5
6
  import {UNSTABLE_Virtualizer as $aG2ym$UNSTABLE_Virtualizer, GridListItem as $aG2ym$GridListItem, GridList as $aG2ym$GridList} from "react-aria-components";
6
- import {useMemo as $aG2ym$useMemo, useState as $aG2ym$useState, forwardRef as $aG2ym$forwardRef} from "react";
7
+ import {createContext as $aG2ym$createContext, useMemo as $aG2ym$useMemo, useState as $aG2ym$useState, forwardRef as $aG2ym$forwardRef} from "react";
7
8
  import {Size as $aG2ym$Size, Rect as $aG2ym$Rect, LayoutInfo as $aG2ym$LayoutInfo, Layout as $aG2ym$Layout} from "@react-stately/virtualizer";
8
9
  import {useDOMRef as $aG2ym$useDOMRef} from "@react-spectrum/utils";
9
10
  import {useEffectEvent as $aG2ym$useEffectEvent, useResizeObserver as $aG2ym$useResizeObserver, useLayoutEffect as $aG2ym$useLayoutEffect, useLoadMore as $aG2ym$useLoadMore} from "@react-aria/utils";
@@ -26,6 +27,7 @@ import {useEffectEvent as $aG2ym$useEffectEvent, useResizeObserver as $aG2ym$use
26
27
 
27
28
 
28
29
 
30
+
29
31
  class $bbcff092fe610ff3$var$FlexibleGridLayout extends (0, $aG2ym$Layout) {
30
32
  update(invalidationContext) {
31
33
  let { minItemSize: minItemSize = new (0, $aG2ym$Size)(200, 200), maxItemSize: maxItemSize = new (0, $aG2ym$Size)(Infinity, Infinity), minSpace: minSpace = new (0, $aG2ym$Size)(18, 18), maxColumns: maxColumns = Infinity } = invalidationContext.layoutOptions || {};
@@ -270,7 +272,7 @@ class $bbcff092fe610ff3$var$WaterfallLayout extends (0, $aG2ym$Layout) {
270
272
  let fromLayoutInfo = this.getLayoutInfo(from);
271
273
  let toLayoutInfo = this.getLayoutInfo(to);
272
274
  if (!fromLayoutInfo || !toLayoutInfo) return [];
273
- // Find items where half of the area intersects the rectangle
275
+ // Find items where half of the area intersects the rectangle
274
276
  // formed from the first item to the last item in the range.
275
277
  let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
276
278
  let keys = [];
@@ -397,7 +399,9 @@ const $bbcff092fe610ff3$var$cardViewStyles = function anonymous(props, overrides
397
399
  rules += ' _M-3hmpw';
398
400
  return rules;
399
401
  };
402
+ const $bbcff092fe610ff3$export$64992ac69f286e5c = /*#__PURE__*/ (0, $aG2ym$createContext)(null);
400
403
  function $bbcff092fe610ff3$var$CardView(props, ref) {
404
+ [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bbcff092fe610ff3$export$64992ac69f286e5c);
401
405
  let { children: children, layout: layoutName = 'grid', size: sizeProp = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
402
406
  let domRef = (0, $aG2ym$useDOMRef)(ref);
403
407
  let layout = (0, $aG2ym$useMemo)(()=>{
@@ -445,7 +449,7 @@ function $bbcff092fe610ff3$var$CardView(props, ref) {
445
449
  return /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$UNSTABLE_Virtualizer), {
446
450
  layout: layout,
447
451
  layoutOptions: options,
448
- children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$64992ac69f286e5c).Provider, {
452
+ children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$cb658fed5fefe1d).Provider, {
449
453
  value: (0, $aG2ym$GridListItem),
450
454
  children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$d0b2ee33ebf7d64).Provider, {
451
455
  value: ctx,
@@ -473,5 +477,5 @@ function $bbcff092fe610ff3$var$CardView(props, ref) {
473
477
  const $bbcff092fe610ff3$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $aG2ym$forwardRef)($bbcff092fe610ff3$var$CardView);
474
478
 
475
479
 
476
- export {$bbcff092fe610ff3$export$7e52c821f7b6f422 as CardView};
480
+ export {$bbcff092fe610ff3$export$64992ac69f286e5c as CardViewContext, $bbcff092fe610ff3$export$7e52c821f7b6f422 as CardView};
477
481
  //# sourceMappingURL=CardView.mjs.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {forwardRef, useMemo, useState} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height) \n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight)); \n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle \n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n \n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n \n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <CardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </CardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.mjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n GridList as AriaGridList,\n ContextValue,\n GridLayoutOptions,\n GridListItem,\n GridListProps,\n UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, useMemo, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n let iterator = this.virtualizer.collection[Symbol.iterator]();\n let y = rows > 0 ? minSpace.height : 0;\n let newLayoutInfos = new Map();\n let skeleton: Node<T> | null = null;\n let skeletonCount = 0;\n for (let row = 0; row < rows; row++) {\n let maxHeight = 0;\n let rowLayoutInfos: LayoutInfo[] = [];\n for (let col = 0; col < numColumns; col++) {\n // Repeat skeleton until the end of the current row.\n let node = skeleton || iterator.next().value;\n if (!node) {\n break;\n }\n\n if (node.type === 'skeleton') {\n skeleton = node;\n }\n\n let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n let content = skeleton ? {...skeleton} : node;\n let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n }\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = content;\n newLayoutInfos.set(key, layoutInfo);\n rowLayoutInfos.push(layoutInfo);\n\n maxHeight = Math.max(maxHeight, rect.height);\n }\n\n for (let layoutInfo of rowLayoutInfos) {\n layoutInfo.rect.height = maxHeight;\n }\n\n y += maxHeight + minSpace.height;\n\n // Keep adding skeleton rows until we fill the viewport\n if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n rows++;\n }\n }\n\n this.layoutInfos = newLayoutInfos;\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n return res;\n }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n protected contentSize: Size = new Size();\n protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n\n update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n let {\n minItemSize = new Size(200, 200),\n maxItemSize = new Size(Infinity, Infinity),\n minSpace = new Size(18, 18),\n maxColumns = Infinity\n } = invalidationContext.layoutOptions || {};\n let visibleWidth = this.virtualizer.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing and content height\n let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let skeletonCount = 0;\n for (let node of this.virtualizer.collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max(...columnHeights);\n this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spacially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spacially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle\n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let layout = useMemo(() => {\n return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n }, [layoutName]);\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = domRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: domRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, domRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n return (\n <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={domRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n style={{\n ...UNSAFE_style,\n scrollPadding: options.minSpace.height\n }}\n className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </UNSTABLE_Virtualizer>\n );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.mjs.map"}
package/dist/Meter.cjs CHANGED
@@ -233,7 +233,7 @@ const $f53cdf036c04454a$var$fillStyles = function anonymous(props) {
233
233
  function $f53cdf036c04454a$var$Meter(props, ref) {
234
234
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $f53cdf036c04454a$export$8b645da15a96b44f);
235
235
  let domRef = (0, $aQdtU$reactspectrumutils.useDOMRef)(ref);
236
- let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', ...groupProps } = props;
236
+ let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', labelPosition: labelPosition = 'top', ...groupProps } = props;
237
237
  return /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)((0, $aQdtU$reactariacomponents.Meter), {
238
238
  ...groupProps,
239
239
  ref: domRef,
@@ -242,14 +242,14 @@ function $f53cdf036c04454a$var$Meter(props, ref) {
242
242
  size: size,
243
243
  variant: variant,
244
244
  staticColor: staticColor,
245
- labelPosition: 'top'
245
+ labelPosition: labelPosition
246
246
  }, styles),
247
247
  children: ({ percentage: percentage, valueText: valueText })=>/*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsxs)((0, $aQdtU$reactjsxruntime.Fragment), {
248
248
  children: [
249
249
  label && /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
250
250
  size: size,
251
251
  labelAlign: "start",
252
- labelPosition: "top",
252
+ labelPosition: labelPosition,
253
253
  staticColor: staticColor,
254
254
  children: label
255
255
  }),
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAsCM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,eACV,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;YACA,eAAe;QACjB,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAc;wBAAM,aAAa;kCAAc;;oBACnG,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'white' | 'black'\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition: 'top'\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** \n * The static color style to apply. Useful when the button appears over a color background. \n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: size(6),\n size: {\n S: 4, // progress-bar-thickness-small\n M: size(6), // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: size(10) // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'informative',\n variant: {\n positive: 'positive',\n notice: 'notice',\n negative: 'negative'\n },\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({staticColor, size})}>\n <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}