@baseline-ui/mcp 0.56.0 → 0.57.1
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.
- package/CHANGELOG.md +4 -0
- package/dist/index.cjs +2122 -41
- package/dist/index.js +2122 -41
- package/package.json +3 -1
- package/sbom.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8,26 +8,7 @@
|
|
|
8
8
|
* This notice may not be removed from this file.
|
|
9
9
|
*
|
|
10
10
|
*/
|
|
11
|
-
var fb=Object.create;var ds=Object.defineProperty;var yb=Object.getOwnPropertyDescriptor;var vb=Object.getOwnPropertyNames;var xb=Object.getPrototypeOf,Tb=Object.prototype.hasOwnProperty;var Ib=(s,F)=>()=>(F||s((F={exports:{}}).exports,F),F.exports);var wb=(s,F,A,at)=>{if(F&&typeof F=="object"||typeof F=="function")for(let K of vb(F))!Tb.call(s,K)&&K!==A&&ds(s,K,{get:()=>F[K],enumerable:!(at=yb(F,K))||at.enumerable});return s};var Pb=(s,F,A)=>(A=s!=null?fb(xb(s)):{},wb(ds(A,"default",{value:s,enumerable:true}),s));var ps=Ib((En,it)=>{(function(){var s,F="4.17.23",A=200,at="Unsupported core-js use. Try https://npms.io/search?q=ponyfill.",K="Expected a function",xs="Invalid `variable` option passed into `_.template`",no="__lodash_hash_undefined__",Ts=500,rt="__lodash_placeholder__",Ue=1,Di=2,mn=4,hn=1,st=2,pe=1,nn=2,Ri=4,Se=8,bn=16,ke=32,gn=64,Ee=128,On=256,to=512,Is=30,ws="...",Ps=800,Cs=16,Ei=1,Ss=2,ks=3,tn=1/0,Ge=9007199254740991,Bs=17976931348623157e292,lt=NaN,Be=4294967295,As=Be-1,Ds=Be>>>1,Rs=[["ary",Ee],["bind",pe],["bindKey",nn],["curry",Se],["curryRight",bn],["flip",to],["partial",ke],["partialRight",gn],["rearg",On]],fn="[object Arguments]",ct="[object Array]",Es="[object AsyncFunction]",zn="[object Boolean]",Wn="[object Date]",Ls="[object DOMException]",dt="[object Error]",pt="[object Function]",Li="[object GeneratorFunction]",xe="[object Map]",Vn="[object Number]",Ms="[object Null]",Le="[object Object]",Mi="[object Promise]",Os="[object Proxy]",Fn="[object RegExp]",Te="[object Set]",Nn="[object String]",ut="[object Symbol]",zs="[object Undefined]",_n="[object WeakMap]",Ws="[object WeakSet]",Hn="[object ArrayBuffer]",yn="[object DataView]",oo="[object Float32Array]",io="[object Float64Array]",ao="[object Int8Array]",ro="[object Int16Array]",so="[object Int32Array]",lo="[object Uint8Array]",co="[object Uint8ClampedArray]",po="[object Uint16Array]",uo="[object Uint32Array]",Vs=/\b__p \+= '';/g,Fs=/\b(__p \+=) '' \+/g,Ns=/(__e\(.*?\)|\b__t\)) \+\n'';/g,Oi=/&(?:amp|lt|gt|quot|#39);/g,zi=/[&<>"']/g,_s=RegExp(Oi.source),Hs=RegExp(zi.source),Us=/<%-([\s\S]+?)%>/g,Gs=/<%([\s\S]+?)%>/g,Wi=/<%=([\s\S]+?)%>/g,js=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Ks=/^\w*$/,Ys=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,mo=/[\\^$.*+?()[\]{}|]/g,qs=RegExp(mo.source),ho=/^\s+/,$s=/\s/,Zs=/\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,Xs=/\{\n\/\* \[wrapped with (.+)\] \*/,Js=/,? & /,Qs=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g,el=/[()=,{}\[\]\/\s]/,nl=/\\(\\)?/g,tl=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,Vi=/\w*$/,ol=/^[-+]0x[0-9a-f]+$/i,il=/^0b[01]+$/i,al=/^\[object .+?Constructor\]$/,rl=/^0o[0-7]+$/i,sl=/^(?:0|[1-9]\d*)$/,ll=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,mt=/($^)/,cl=/['\n\r\u2028\u2029\\]/g,ht="\\ud800-\\udfff",dl="\\u0300-\\u036f",pl="\\ufe20-\\ufe2f",ul="\\u20d0-\\u20ff",Fi=dl+pl+ul,Ni="\\u2700-\\u27bf",_i="a-z\\xdf-\\xf6\\xf8-\\xff",ml="\\xac\\xb1\\xd7\\xf7",hl="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",bl="\\u2000-\\u206f",gl=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",Hi="A-Z\\xc0-\\xd6\\xd8-\\xde",Ui="\\ufe0e\\ufe0f",Gi=ml+hl+bl+gl,bo="['\u2019]",fl="["+ht+"]",ji="["+Gi+"]",bt="["+Fi+"]",Ki="\\d+",yl="["+Ni+"]",Yi="["+_i+"]",qi="[^"+ht+Gi+Ki+Ni+_i+Hi+"]",go="\\ud83c[\\udffb-\\udfff]",vl="(?:"+bt+"|"+go+")",$i="[^"+ht+"]",fo="(?:\\ud83c[\\udde6-\\uddff]){2}",yo="[\\ud800-\\udbff][\\udc00-\\udfff]",vn="["+Hi+"]",Zi="\\u200d",Xi="(?:"+Yi+"|"+qi+")",xl="(?:"+vn+"|"+qi+")",Ji="(?:"+bo+"(?:d|ll|m|re|s|t|ve))?",Qi="(?:"+bo+"(?:D|LL|M|RE|S|T|VE))?",ea=vl+"?",na="["+Ui+"]?",Tl="(?:"+Zi+"(?:"+[$i,fo,yo].join("|")+")"+na+ea+")*",Il="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",wl="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",ta=na+ea+Tl,Pl="(?:"+[yl,fo,yo].join("|")+")"+ta,Cl="(?:"+[$i+bt+"?",bt,fo,yo,fl].join("|")+")",Sl=RegExp(bo,"g"),kl=RegExp(bt,"g"),vo=RegExp(go+"(?="+go+")|"+Cl+ta,"g"),Bl=RegExp([vn+"?"+Yi+"+"+Ji+"(?="+[ji,vn,"$"].join("|")+")",xl+"+"+Qi+"(?="+[ji,vn+Xi,"$"].join("|")+")",vn+"?"+Xi+"+"+Ji,vn+"+"+Qi,wl,Il,Ki,Pl].join("|"),"g"),Al=RegExp("["+Zi+ht+Fi+Ui+"]"),Dl=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,Rl=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],El=-1,W={};W[oo]=W[io]=W[ao]=W[ro]=W[so]=W[lo]=W[co]=W[po]=W[uo]=true,W[fn]=W[ct]=W[Hn]=W[zn]=W[yn]=W[Wn]=W[dt]=W[pt]=W[xe]=W[Vn]=W[Le]=W[Fn]=W[Te]=W[Nn]=W[_n]=false;var z={};z[fn]=z[ct]=z[Hn]=z[yn]=z[zn]=z[Wn]=z[oo]=z[io]=z[ao]=z[ro]=z[so]=z[xe]=z[Vn]=z[Le]=z[Fn]=z[Te]=z[Nn]=z[ut]=z[lo]=z[co]=z[po]=z[uo]=true,z[dt]=z[pt]=z[_n]=false;var Ll={\u00C0:"A",\u00C1:"A",\u00C2:"A",\u00C3:"A",\u00C4:"A",\u00C5:"A",\u00E0:"a",\u00E1:"a",\u00E2:"a",\u00E3:"a",\u00E4:"a",\u00E5:"a",\u00C7:"C",\u00E7:"c",\u00D0:"D",\u00F0:"d",\u00C8:"E",\u00C9:"E",\u00CA:"E",\u00CB:"E",\u00E8:"e",\u00E9:"e",\u00EA:"e",\u00EB:"e",\u00CC:"I",\u00CD:"I",\u00CE:"I",\u00CF:"I",\u00EC:"i",\u00ED:"i",\u00EE:"i",\u00EF:"i",\u00D1:"N",\u00F1:"n",\u00D2:"O",\u00D3:"O",\u00D4:"O",\u00D5:"O",\u00D6:"O",\u00D8:"O",\u00F2:"o",\u00F3:"o",\u00F4:"o",\u00F5:"o",\u00F6:"o",\u00F8:"o",\u00D9:"U",\u00DA:"U",\u00DB:"U",\u00DC:"U",\u00F9:"u",\u00FA:"u",\u00FB:"u",\u00FC:"u",\u00DD:"Y",\u00FD:"y",\u00FF:"y",\u00C6:"Ae",\u00E6:"ae",\u00DE:"Th",\u00FE:"th",\u00DF:"ss",\u0100:"A",\u0102:"A",\u0104:"A",\u0101:"a",\u0103:"a",\u0105:"a",\u0106:"C",\u0108:"C",\u010A:"C",\u010C:"C",\u0107:"c",\u0109:"c",\u010B:"c",\u010D:"c",\u010E:"D",\u0110:"D",\u010F:"d",\u0111:"d",\u0112:"E",\u0114:"E",\u0116:"E",\u0118:"E",\u011A:"E",\u0113:"e",\u0115:"e",\u0117:"e",\u0119:"e",\u011B:"e",\u011C:"G",\u011E:"G",\u0120:"G",\u0122:"G",\u011D:"g",\u011F:"g",\u0121:"g",\u0123:"g",\u0124:"H",\u0126:"H",\u0125:"h",\u0127:"h",\u0128:"I",\u012A:"I",\u012C:"I",\u012E:"I",\u0130:"I",\u0129:"i",\u012B:"i",\u012D:"i",\u012F:"i",\u0131:"i",\u0134:"J",\u0135:"j",\u0136:"K",\u0137:"k",\u0138:"k",\u0139:"L",\u013B:"L",\u013D:"L",\u013F:"L",\u0141:"L",\u013A:"l",\u013C:"l",\u013E:"l",\u0140:"l",\u0142:"l",\u0143:"N",\u0145:"N",\u0147:"N",\u014A:"N",\u0144:"n",\u0146:"n",\u0148:"n",\u014B:"n",\u014C:"O",\u014E:"O",\u0150:"O",\u014D:"o",\u014F:"o",\u0151:"o",\u0154:"R",\u0156:"R",\u0158:"R",\u0155:"r",\u0157:"r",\u0159:"r",\u015A:"S",\u015C:"S",\u015E:"S",\u0160:"S",\u015B:"s",\u015D:"s",\u015F:"s",\u0161:"s",\u0162:"T",\u0164:"T",\u0166:"T",\u0163:"t",\u0165:"t",\u0167:"t",\u0168:"U",\u016A:"U",\u016C:"U",\u016E:"U",\u0170:"U",\u0172:"U",\u0169:"u",\u016B:"u",\u016D:"u",\u016F:"u",\u0171:"u",\u0173:"u",\u0174:"W",\u0175:"w",\u0176:"Y",\u0177:"y",\u0178:"Y",\u0179:"Z",\u017B:"Z",\u017D:"Z",\u017A:"z",\u017C:"z",\u017E:"z",\u0132:"IJ",\u0133:"ij",\u0152:"Oe",\u0153:"oe",\u0149:"'n",\u017F:"s"},Ml={"&":"&","<":"<",">":">",'"':""","'":"'"},Ol={"&":"&","<":"<",">":">",""":'"',"'":"'"},zl={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Wl=parseFloat,Vl=parseInt,oa=typeof global=="object"&&global&&global.Object===Object&&global,Fl=typeof self=="object"&&self&&self.Object===Object&&self,Y=oa||Fl||Function("return this")(),xo=typeof En=="object"&&En&&!En.nodeType&&En,on=xo&&typeof it=="object"&&it&&!it.nodeType&&it,ia=on&&on.exports===xo,To=ia&&oa.process,ue=(function(){try{var d=on&&on.require&&on.require("util").types;return d||To&&To.binding&&To.binding("util")}catch{}})(),aa=ue&&ue.isArrayBuffer,ra=ue&&ue.isDate,sa=ue&&ue.isMap,la=ue&&ue.isRegExp,ca=ue&&ue.isSet,da=ue&&ue.isTypedArray;function ae(d,m,u){switch(u.length){case 0:return d.call(m);case 1:return d.call(m,u[0]);case 2:return d.call(m,u[0],u[1]);case 3:return d.call(m,u[0],u[1],u[2])}return d.apply(m,u)}function Nl(d,m,u,y){for(var w=-1,E=d==null?0:d.length;++w<E;){var G=d[w];m(y,G,u(G),d);}return y}function me(d,m){for(var u=-1,y=d==null?0:d.length;++u<y&&m(d[u],u,d)!==false;);return d}function _l(d,m){for(var u=d==null?0:d.length;u--&&m(d[u],u,d)!==false;);return d}function pa(d,m){for(var u=-1,y=d==null?0:d.length;++u<y;)if(!m(d[u],u,d))return false;return true}function je(d,m){for(var u=-1,y=d==null?0:d.length,w=0,E=[];++u<y;){var G=d[u];m(G,u,d)&&(E[w++]=G);}return E}function gt(d,m){var u=d==null?0:d.length;return !!u&&xn(d,m,0)>-1}function Io(d,m,u){for(var y=-1,w=d==null?0:d.length;++y<w;)if(u(m,d[y]))return true;return false}function V(d,m){for(var u=-1,y=d==null?0:d.length,w=Array(y);++u<y;)w[u]=m(d[u],u,d);return w}function Ke(d,m){for(var u=-1,y=m.length,w=d.length;++u<y;)d[w+u]=m[u];return d}function wo(d,m,u,y){var w=-1,E=d==null?0:d.length;for(y&&E&&(u=d[++w]);++w<E;)u=m(u,d[w],w,d);return u}function Hl(d,m,u,y){var w=d==null?0:d.length;for(y&&w&&(u=d[--w]);w--;)u=m(u,d[w],w,d);return u}function Po(d,m){for(var u=-1,y=d==null?0:d.length;++u<y;)if(m(d[u],u,d))return true;return false}var Ul=Co("length");function Gl(d){return d.split("")}function jl(d){return d.match(Qs)||[]}function ua(d,m,u){var y;return u(d,function(w,E,G){if(m(w,E,G))return y=E,false}),y}function ft(d,m,u,y){for(var w=d.length,E=u+(y?1:-1);y?E--:++E<w;)if(m(d[E],E,d))return E;return -1}function xn(d,m,u){return m===m?oc(d,m,u):ft(d,ma,u)}function Kl(d,m,u,y){for(var w=u-1,E=d.length;++w<E;)if(y(d[w],m))return w;return -1}function ma(d){return d!==d}function ha(d,m){var u=d==null?0:d.length;return u?ko(d,m)/u:lt}function Co(d){return function(m){return m==null?s:m[d]}}function So(d){return function(m){return d==null?s:d[m]}}function ba(d,m,u,y,w){return w(d,function(E,G,O){u=y?(y=false,E):m(u,E,G,O);}),u}function Yl(d,m){var u=d.length;for(d.sort(m);u--;)d[u]=d[u].value;return d}function ko(d,m){for(var u,y=-1,w=d.length;++y<w;){var E=m(d[y]);E!==s&&(u=u===s?E:u+E);}return u}function Bo(d,m){for(var u=-1,y=Array(d);++u<d;)y[u]=m(u);return y}function ql(d,m){return V(m,function(u){return [u,d[u]]})}function ga(d){return d&&d.slice(0,xa(d)+1).replace(ho,"")}function re(d){return function(m){return d(m)}}function Ao(d,m){return V(m,function(u){return d[u]})}function Un(d,m){return d.has(m)}function fa(d,m){for(var u=-1,y=d.length;++u<y&&xn(m,d[u],0)>-1;);return u}function ya(d,m){for(var u=d.length;u--&&xn(m,d[u],0)>-1;);return u}function $l(d,m){for(var u=d.length,y=0;u--;)d[u]===m&&++y;return y}var Zl=So(Ll),Xl=So(Ml);function Jl(d){return "\\"+zl[d]}function Ql(d,m){return d==null?s:d[m]}function Tn(d){return Al.test(d)}function ec(d){return Dl.test(d)}function nc(d){for(var m,u=[];!(m=d.next()).done;)u.push(m.value);return u}function Do(d){var m=-1,u=Array(d.size);return d.forEach(function(y,w){u[++m]=[w,y];}),u}function va(d,m){return function(u){return d(m(u))}}function Ye(d,m){for(var u=-1,y=d.length,w=0,E=[];++u<y;){var G=d[u];(G===m||G===rt)&&(d[u]=rt,E[w++]=u);}return E}function yt(d){var m=-1,u=Array(d.size);return d.forEach(function(y){u[++m]=y;}),u}function tc(d){var m=-1,u=Array(d.size);return d.forEach(function(y){u[++m]=[y,y];}),u}function oc(d,m,u){for(var y=u-1,w=d.length;++y<w;)if(d[y]===m)return y;return -1}function ic(d,m,u){for(var y=u+1;y--;)if(d[y]===m)return y;return y}function In(d){return Tn(d)?rc(d):Ul(d)}function Ie(d){return Tn(d)?sc(d):Gl(d)}function xa(d){for(var m=d.length;m--&&$s.test(d.charAt(m)););return m}var ac=So(Ol);function rc(d){for(var m=vo.lastIndex=0;vo.test(d);)++m;return m}function sc(d){return d.match(vo)||[]}function lc(d){return d.match(Bl)||[]}var cc=(function d(m){m=m==null?Y:qe.defaults(Y.Object(),m,qe.pick(Y,Rl));var u=m.Array,y=m.Date,w=m.Error,E=m.Function,G=m.Math,O=m.Object,Ro=m.RegExp,dc=m.String,he=m.TypeError,vt=u.prototype,pc=E.prototype,wn=O.prototype,xt=m["__core-js_shared__"],Tt=pc.toString,L=wn.hasOwnProperty,uc=0,Ta=(function(){var e=/[^.]+$/.exec(xt&&xt.keys&&xt.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""})(),It=wn.toString,mc=Tt.call(O),hc=Y._,bc=Ro("^"+Tt.call(L).replace(mo,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),wt=ia?m.Buffer:s,$e=m.Symbol,Pt=m.Uint8Array,Ia=wt?wt.allocUnsafe:s,Ct=va(O.getPrototypeOf,O),wa=O.create,Pa=wn.propertyIsEnumerable,St=vt.splice,Ca=$e?$e.isConcatSpreadable:s,Gn=$e?$e.iterator:s,an=$e?$e.toStringTag:s,kt=(function(){try{var e=dn(O,"defineProperty");return e({},"",{}),e}catch{}})(),gc=m.clearTimeout!==Y.clearTimeout&&m.clearTimeout,fc=y&&y.now!==Y.Date.now&&y.now,yc=m.setTimeout!==Y.setTimeout&&m.setTimeout,Bt=G.ceil,At=G.floor,Eo=O.getOwnPropertySymbols,vc=wt?wt.isBuffer:s,Sa=m.isFinite,xc=vt.join,Tc=va(O.keys,O),j=G.max,Z=G.min,Ic=y.now,wc=m.parseInt,ka=G.random,Pc=vt.reverse,Lo=dn(m,"DataView"),jn=dn(m,"Map"),Mo=dn(m,"Promise"),Pn=dn(m,"Set"),Kn=dn(m,"WeakMap"),Yn=dn(O,"create"),Dt=Kn&&new Kn,Cn={},Cc=pn(Lo),Sc=pn(jn),kc=pn(Mo),Bc=pn(Pn),Ac=pn(Kn),Rt=$e?$e.prototype:s,qn=Rt?Rt.valueOf:s,Ba=Rt?Rt.toString:s;function a(e){if(_(e)&&!P(e)&&!(e instanceof D)){if(e instanceof be)return e;if(L.call(e,"__wrapped__"))return Ar(e)}return new be(e)}var Sn=(function(){function e(){}return function(n){if(!N(n))return {};if(wa)return wa(n);e.prototype=n;var t=new e;return e.prototype=s,t}})();function Et(){}function be(e,n){this.__wrapped__=e,this.__actions__=[],this.__chain__=!!n,this.__index__=0,this.__values__=s;}a.templateSettings={escape:Us,evaluate:Gs,interpolate:Wi,variable:"",imports:{_:a}},a.prototype=Et.prototype,a.prototype.constructor=a,be.prototype=Sn(Et.prototype),be.prototype.constructor=be;function D(e){this.__wrapped__=e,this.__actions__=[],this.__dir__=1,this.__filtered__=false,this.__iteratees__=[],this.__takeCount__=Be,this.__views__=[];}function Dc(){var e=new D(this.__wrapped__);return e.__actions__=ne(this.__actions__),e.__dir__=this.__dir__,e.__filtered__=this.__filtered__,e.__iteratees__=ne(this.__iteratees__),e.__takeCount__=this.__takeCount__,e.__views__=ne(this.__views__),e}function Rc(){if(this.__filtered__){var e=new D(this);e.__dir__=-1,e.__filtered__=true;}else e=this.clone(),e.__dir__*=-1;return e}function Ec(){var e=this.__wrapped__.value(),n=this.__dir__,t=P(e),o=n<0,i=t?e.length:0,r=Gd(0,i,this.__views__),l=r.start,c=r.end,p=c-l,h=o?c:l-1,b=this.__iteratees__,g=b.length,f=0,v=Z(p,this.__takeCount__);if(!t||!o&&i==p&&v==p)return Ja(e,this.__actions__);var T=[];e:for(;p--&&f<v;){h+=n;for(var S=-1,I=e[h];++S<g;){var B=b[S],R=B.iteratee,ce=B.type,ee=R(I);if(ce==Ss)I=ee;else if(!ee){if(ce==Ei)continue e;break e}}T[f++]=I;}return T}D.prototype=Sn(Et.prototype),D.prototype.constructor=D;function rn(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1]);}}function Lc(){this.__data__=Yn?Yn(null):{},this.size=0;}function Mc(e){var n=this.has(e)&&delete this.__data__[e];return this.size-=n?1:0,n}function Oc(e){var n=this.__data__;if(Yn){var t=n[e];return t===no?s:t}return L.call(n,e)?n[e]:s}function zc(e){var n=this.__data__;return Yn?n[e]!==s:L.call(n,e)}function Wc(e,n){var t=this.__data__;return this.size+=this.has(e)?0:1,t[e]=Yn&&n===s?no:n,this}rn.prototype.clear=Lc,rn.prototype.delete=Mc,rn.prototype.get=Oc,rn.prototype.has=zc,rn.prototype.set=Wc;function Me(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1]);}}function Vc(){this.__data__=[],this.size=0;}function Fc(e){var n=this.__data__,t=Lt(n,e);if(t<0)return false;var o=n.length-1;return t==o?n.pop():St.call(n,t,1),--this.size,true}function Nc(e){var n=this.__data__,t=Lt(n,e);return t<0?s:n[t][1]}function _c(e){return Lt(this.__data__,e)>-1}function Hc(e,n){var t=this.__data__,o=Lt(t,e);return o<0?(++this.size,t.push([e,n])):t[o][1]=n,this}Me.prototype.clear=Vc,Me.prototype.delete=Fc,Me.prototype.get=Nc,Me.prototype.has=_c,Me.prototype.set=Hc;function Oe(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1]);}}function Uc(){this.size=0,this.__data__={hash:new rn,map:new(jn||Me),string:new rn};}function Gc(e){var n=jt(this,e).delete(e);return this.size-=n?1:0,n}function jc(e){return jt(this,e).get(e)}function Kc(e){return jt(this,e).has(e)}function Yc(e,n){var t=jt(this,e),o=t.size;return t.set(e,n),this.size+=t.size==o?0:1,this}Oe.prototype.clear=Uc,Oe.prototype.delete=Gc,Oe.prototype.get=jc,Oe.prototype.has=Kc,Oe.prototype.set=Yc;function sn(e){var n=-1,t=e==null?0:e.length;for(this.__data__=new Oe;++n<t;)this.add(e[n]);}function qc(e){return this.__data__.set(e,no),this}function $c(e){return this.__data__.has(e)}sn.prototype.add=sn.prototype.push=qc,sn.prototype.has=$c;function we(e){var n=this.__data__=new Me(e);this.size=n.size;}function Zc(){this.__data__=new Me,this.size=0;}function Xc(e){var n=this.__data__,t=n.delete(e);return this.size=n.size,t}function Jc(e){return this.__data__.get(e)}function Qc(e){return this.__data__.has(e)}function ed(e,n){var t=this.__data__;if(t instanceof Me){var o=t.__data__;if(!jn||o.length<A-1)return o.push([e,n]),this.size=++t.size,this;t=this.__data__=new Oe(o);}return t.set(e,n),this.size=t.size,this}we.prototype.clear=Zc,we.prototype.delete=Xc,we.prototype.get=Jc,we.prototype.has=Qc,we.prototype.set=ed;function Aa(e,n){var t=P(e),o=!t&&un(e),i=!t&&!o&&en(e),r=!t&&!o&&!i&&Dn(e),l=t||o||i||r,c=l?Bo(e.length,dc):[],p=c.length;for(var h in e)(n||L.call(e,h))&&!(l&&(h=="length"||i&&(h=="offset"||h=="parent")||r&&(h=="buffer"||h=="byteLength"||h=="byteOffset")||Fe(h,p)))&&c.push(h);return c}function Da(e){var n=e.length;return n?e[jo(0,n-1)]:s}function nd(e,n){return Kt(ne(e),ln(n,0,e.length))}function td(e){return Kt(ne(e))}function Oo(e,n,t){(t!==s&&!Pe(e[n],t)||t===s&&!(n in e))&&ze(e,n,t);}function $n(e,n,t){var o=e[n];(!(L.call(e,n)&&Pe(o,t))||t===s&&!(n in e))&&ze(e,n,t);}function Lt(e,n){for(var t=e.length;t--;)if(Pe(e[t][0],n))return t;return -1}function od(e,n,t,o){return Ze(e,function(i,r,l){n(o,i,t(i),l);}),o}function Ra(e,n){return e&&De(n,q(n),e)}function id(e,n){return e&&De(n,oe(n),e)}function ze(e,n,t){n=="__proto__"&&kt?kt(e,n,{configurable:true,enumerable:true,value:t,writable:true}):e[n]=t;}function zo(e,n){for(var t=-1,o=n.length,i=u(o),r=e==null;++t<o;)i[t]=r?s:gi(e,n[t]);return i}function ln(e,n,t){return e===e&&(t!==s&&(e=e<=t?e:t),n!==s&&(e=e>=n?e:n)),e}function ge(e,n,t,o,i,r){var l,c=n&Ue,p=n&Di,h=n&mn;if(t&&(l=i?t(e,o,i,r):t(e)),l!==s)return l;if(!N(e))return e;var b=P(e);if(b){if(l=Kd(e),!c)return ne(e,l)}else {var g=X(e),f=g==pt||g==Li;if(en(e))return nr(e,c);if(g==Le||g==fn||f&&!i){if(l=p||f?{}:xr(e),!c)return p?Od(e,id(l,e)):Md(e,Ra(l,e))}else {if(!z[g])return i?e:{};l=Yd(e,g,c);}}r||(r=new we);var v=r.get(e);if(v)return v;r.set(e,l),$r(e)?e.forEach(function(I){l.add(ge(I,n,t,I,e,r));}):Yr(e)&&e.forEach(function(I,B){l.set(B,ge(I,n,t,B,e,r));});var T=h?p?ti:ni:p?oe:q,S=b?s:T(e);return me(S||e,function(I,B){S&&(B=I,I=e[B]),$n(l,B,ge(I,n,t,B,e,r));}),l}function ad(e){var n=q(e);return function(t){return Ea(t,e,n)}}function Ea(e,n,t){var o=t.length;if(e==null)return !o;for(e=O(e);o--;){var i=t[o],r=n[i],l=e[i];if(l===s&&!(i in e)||!r(l))return false}return true}function La(e,n,t){if(typeof e!="function")throw new he(K);return tt(function(){e.apply(s,t);},n)}function Zn(e,n,t,o){var i=-1,r=gt,l=true,c=e.length,p=[],h=n.length;if(!c)return p;t&&(n=V(n,re(t))),o?(r=Io,l=false):n.length>=A&&(r=Un,l=false,n=new sn(n));e:for(;++i<c;){var b=e[i],g=t==null?b:t(b);if(b=o||b!==0?b:0,l&&g===g){for(var f=h;f--;)if(n[f]===g)continue e;p.push(b);}else r(n,g,o)||p.push(b);}return p}var Ze=rr(Ae),Ma=rr(Vo,true);function rd(e,n){var t=true;return Ze(e,function(o,i,r){return t=!!n(o,i,r),t}),t}function Mt(e,n,t){for(var o=-1,i=e.length;++o<i;){var r=e[o],l=n(r);if(l!=null&&(c===s?l===l&&!le(l):t(l,c)))var c=l,p=r;}return p}function sd(e,n,t,o){var i=e.length;for(t=C(t),t<0&&(t=-t>i?0:i+t),o=o===s||o>i?i:C(o),o<0&&(o+=i),o=t>o?0:Xr(o);t<o;)e[t++]=n;return e}function Oa(e,n){var t=[];return Ze(e,function(o,i,r){n(o,i,r)&&t.push(o);}),t}function $(e,n,t,o,i){var r=-1,l=e.length;for(t||(t=$d),i||(i=[]);++r<l;){var c=e[r];n>0&&t(c)?n>1?$(c,n-1,t,o,i):Ke(i,c):o||(i[i.length]=c);}return i}var Wo=sr(),za=sr(true);function Ae(e,n){return e&&Wo(e,n,q)}function Vo(e,n){return e&&za(e,n,q)}function Ot(e,n){return je(n,function(t){return Ne(e[t])})}function cn(e,n){n=Je(n,e);for(var t=0,o=n.length;e!=null&&t<o;)e=e[Re(n[t++])];return t&&t==o?e:s}function Wa(e,n,t){var o=n(e);return P(e)?o:Ke(o,t(e))}function J(e){return e==null?e===s?zs:Ms:an&&an in O(e)?Ud(e):tp(e)}function Fo(e,n){return e>n}function ld(e,n){return e!=null&&L.call(e,n)}function cd(e,n){return e!=null&&n in O(e)}function dd(e,n,t){return e>=Z(n,t)&&e<j(n,t)}function No(e,n,t){for(var o=t?Io:gt,i=e[0].length,r=e.length,l=r,c=u(r),p=1/0,h=[];l--;){var b=e[l];l&&n&&(b=V(b,re(n))),p=Z(b.length,p),c[l]=!t&&(n||i>=120&&b.length>=120)?new sn(l&&b):s;}b=e[0];var g=-1,f=c[0];e:for(;++g<i&&h.length<p;){var v=b[g],T=n?n(v):v;if(v=t||v!==0?v:0,!(f?Un(f,T):o(h,T,t))){for(l=r;--l;){var S=c[l];if(!(S?Un(S,T):o(e[l],T,t)))continue e}f&&f.push(T),h.push(v);}}return h}function pd(e,n,t,o){return Ae(e,function(i,r,l){n(o,t(i),r,l);}),o}function Xn(e,n,t){n=Je(n,e),e=Pr(e,n);var o=e==null?e:e[Re(ye(n))];return o==null?s:ae(o,e,t)}function Va(e){return _(e)&&J(e)==fn}function ud(e){return _(e)&&J(e)==Hn}function md(e){return _(e)&&J(e)==Wn}function Jn(e,n,t,o,i){return e===n?true:e==null||n==null||!_(e)&&!_(n)?e!==e&&n!==n:hd(e,n,t,o,Jn,i)}function hd(e,n,t,o,i,r){var l=P(e),c=P(n),p=l?ct:X(e),h=c?ct:X(n);p=p==fn?Le:p,h=h==fn?Le:h;var b=p==Le,g=h==Le,f=p==h;if(f&&en(e)){if(!en(n))return false;l=true,b=false;}if(f&&!b)return r||(r=new we),l||Dn(e)?fr(e,n,t,o,i,r):_d(e,n,p,t,o,i,r);if(!(t&hn)){var v=b&&L.call(e,"__wrapped__"),T=g&&L.call(n,"__wrapped__");if(v||T){var S=v?e.value():e,I=T?n.value():n;return r||(r=new we),i(S,I,t,o,r)}}return f?(r||(r=new we),Hd(e,n,t,o,i,r)):false}function bd(e){return _(e)&&X(e)==xe}function _o(e,n,t,o){var i=t.length,r=i,l=!o;if(e==null)return !r;for(e=O(e);i--;){var c=t[i];if(l&&c[2]?c[1]!==e[c[0]]:!(c[0]in e))return false}for(;++i<r;){c=t[i];var p=c[0],h=e[p],b=c[1];if(l&&c[2]){if(h===s&&!(p in e))return false}else {var g=new we;if(o)var f=o(h,b,p,e,n,g);if(!(f===s?Jn(b,h,hn|st,o,g):f))return false}}return true}function Fa(e){if(!N(e)||Xd(e))return false;var n=Ne(e)?bc:al;return n.test(pn(e))}function gd(e){return _(e)&&J(e)==Fn}function fd(e){return _(e)&&X(e)==Te}function yd(e){return _(e)&&Jt(e.length)&&!!W[J(e)]}function Na(e){return typeof e=="function"?e:e==null?ie:typeof e=="object"?P(e)?Ua(e[0],e[1]):Ha(e):ls(e)}function Ho(e){if(!nt(e))return Tc(e);var n=[];for(var t in O(e))L.call(e,t)&&t!="constructor"&&n.push(t);return n}function vd(e){if(!N(e))return np(e);var n=nt(e),t=[];for(var o in e)o=="constructor"&&(n||!L.call(e,o))||t.push(o);return t}function Uo(e,n){return e<n}function _a(e,n){var t=-1,o=te(e)?u(e.length):[];return Ze(e,function(i,r,l){o[++t]=n(i,r,l);}),o}function Ha(e){var n=ii(e);return n.length==1&&n[0][2]?Ir(n[0][0],n[0][1]):function(t){return t===e||_o(t,e,n)}}function Ua(e,n){return ri(e)&&Tr(n)?Ir(Re(e),n):function(t){var o=gi(t,e);return o===s&&o===n?fi(t,e):Jn(n,o,hn|st)}}function zt(e,n,t,o,i){e!==n&&Wo(n,function(r,l){if(i||(i=new we),N(r))xd(e,n,l,t,zt,o,i);else {var c=o?o(li(e,l),r,l+"",e,n,i):s;c===s&&(c=r),Oo(e,l,c);}},oe);}function xd(e,n,t,o,i,r,l){var c=li(e,t),p=li(n,t),h=l.get(p);if(h){Oo(e,t,h);return}var b=r?r(c,p,t+"",e,n,l):s,g=b===s;if(g){var f=P(p),v=!f&&en(p),T=!f&&!v&&Dn(p);b=p,f||v||T?P(c)?b=c:H(c)?b=ne(c):v?(g=false,b=nr(p,true)):T?(g=false,b=tr(p,true)):b=[]:ot(p)||un(p)?(b=c,un(c)?b=Jr(c):(!N(c)||Ne(c))&&(b=xr(p))):g=false;}g&&(l.set(p,b),i(b,p,o,r,l),l.delete(p)),Oo(e,t,b);}function Ga(e,n){var t=e.length;if(t)return n+=n<0?t:0,Fe(n,t)?e[n]:s}function ja(e,n,t){n.length?n=V(n,function(r){return P(r)?function(l){return cn(l,r.length===1?r[0]:r)}:r}):n=[ie];var o=-1;n=V(n,re(x()));var i=_a(e,function(r,l,c){var p=V(n,function(h){return h(r)});return {criteria:p,index:++o,value:r}});return Yl(i,function(r,l){return Ld(r,l,t)})}function Td(e,n){return Ka(e,n,function(t,o){return fi(e,o)})}function Ka(e,n,t){for(var o=-1,i=n.length,r={};++o<i;){var l=n[o],c=cn(e,l);t(c,l)&&Qn(r,Je(l,e),c);}return r}function Id(e){return function(n){return cn(n,e)}}function Go(e,n,t,o){var i=o?Kl:xn,r=-1,l=n.length,c=e;for(e===n&&(n=ne(n)),t&&(c=V(e,re(t)));++r<l;)for(var p=0,h=n[r],b=t?t(h):h;(p=i(c,b,p,o))>-1;)c!==e&&St.call(c,p,1),St.call(e,p,1);return e}function Ya(e,n){for(var t=e?n.length:0,o=t-1;t--;){var i=n[t];if(t==o||i!==r){var r=i;Fe(i)?St.call(e,i,1):qo(e,i);}}return e}function jo(e,n){return e+At(ka()*(n-e+1))}function wd(e,n,t,o){for(var i=-1,r=j(Bt((n-e)/(t||1)),0),l=u(r);r--;)l[o?r:++i]=e,e+=t;return l}function Ko(e,n){var t="";if(!e||n<1||n>Ge)return t;do n%2&&(t+=e),n=At(n/2),n&&(e+=e);while(n);return t}function k(e,n){return ci(wr(e,n,ie),e+"")}function Pd(e){return Da(Rn(e))}function Cd(e,n){var t=Rn(e);return Kt(t,ln(n,0,t.length))}function Qn(e,n,t,o){if(!N(e))return e;n=Je(n,e);for(var i=-1,r=n.length,l=r-1,c=e;c!=null&&++i<r;){var p=Re(n[i]),h=t;if(p==="__proto__"||p==="constructor"||p==="prototype")return e;if(i!=l){var b=c[p];h=o?o(b,p,c):s,h===s&&(h=N(b)?b:Fe(n[i+1])?[]:{});}$n(c,p,h),c=c[p];}return e}var qa=Dt?function(e,n){return Dt.set(e,n),e}:ie,Sd=kt?function(e,n){return kt(e,"toString",{configurable:true,enumerable:false,value:vi(n),writable:true})}:ie;function kd(e){return Kt(Rn(e))}function fe(e,n,t){var o=-1,i=e.length;n<0&&(n=-n>i?0:i+n),t=t>i?i:t,t<0&&(t+=i),i=n>t?0:t-n>>>0,n>>>=0;for(var r=u(i);++o<i;)r[o]=e[o+n];return r}function Bd(e,n){var t;return Ze(e,function(o,i,r){return t=n(o,i,r),!t}),!!t}function Wt(e,n,t){var o=0,i=e==null?o:e.length;if(typeof n=="number"&&n===n&&i<=Ds){for(;o<i;){var r=o+i>>>1,l=e[r];l!==null&&!le(l)&&(t?l<=n:l<n)?o=r+1:i=r;}return i}return Yo(e,n,ie,t)}function Yo(e,n,t,o){var i=0,r=e==null?0:e.length;if(r===0)return 0;n=t(n);for(var l=n!==n,c=n===null,p=le(n),h=n===s;i<r;){var b=At((i+r)/2),g=t(e[b]),f=g!==s,v=g===null,T=g===g,S=le(g);if(l)var I=o||T;else h?I=T&&(o||f):c?I=T&&f&&(o||!v):p?I=T&&f&&!v&&(o||!S):v||S?I=false:I=o?g<=n:g<n;I?i=b+1:r=b;}return Z(r,As)}function $a(e,n){for(var t=-1,o=e.length,i=0,r=[];++t<o;){var l=e[t],c=n?n(l):l;if(!t||!Pe(c,p)){var p=c;r[i++]=l===0?0:l;}}return r}function Za(e){return typeof e=="number"?e:le(e)?lt:+e}function se(e){if(typeof e=="string")return e;if(P(e))return V(e,se)+"";if(le(e))return Ba?Ba.call(e):"";var n=e+"";return n=="0"&&1/e==-tn?"-0":n}function Xe(e,n,t){var o=-1,i=gt,r=e.length,l=true,c=[],p=c;if(t)l=false,i=Io;else if(r>=A){var h=n?null:Fd(e);if(h)return yt(h);l=false,i=Un,p=new sn;}else p=n?[]:c;e:for(;++o<r;){var b=e[o],g=n?n(b):b;if(b=t||b!==0?b:0,l&&g===g){for(var f=p.length;f--;)if(p[f]===g)continue e;n&&p.push(g),c.push(b);}else i(p,g,t)||(p!==c&&p.push(g),c.push(b));}return c}function qo(e,n){n=Je(n,e);var t=-1,o=n.length;if(!o)return true;for(var i=e==null||typeof e!="object"&&typeof e!="function";++t<o;){var r=n[t];if(typeof r=="string"){if(r==="__proto__"&&!L.call(e,"__proto__"))return false;if(r==="constructor"&&t+1<o&&typeof n[t+1]=="string"&&n[t+1]==="prototype"){if(i&&t===0)continue;return false}}}var l=Pr(e,n);return l==null||delete l[Re(ye(n))]}function Xa(e,n,t,o){return Qn(e,n,t(cn(e,n)),o)}function Vt(e,n,t,o){for(var i=e.length,r=o?i:-1;(o?r--:++r<i)&&n(e[r],r,e););return t?fe(e,o?0:r,o?r+1:i):fe(e,o?r+1:0,o?i:r)}function Ja(e,n){var t=e;return t instanceof D&&(t=t.value()),wo(n,function(o,i){return i.func.apply(i.thisArg,Ke([o],i.args))},t)}function $o(e,n,t){var o=e.length;if(o<2)return o?Xe(e[0]):[];for(var i=-1,r=u(o);++i<o;)for(var l=e[i],c=-1;++c<o;)c!=i&&(r[i]=Zn(r[i]||l,e[c],n,t));return Xe($(r,1),n,t)}function Qa(e,n,t){for(var o=-1,i=e.length,r=n.length,l={};++o<i;){var c=o<r?n[o]:s;t(l,e[o],c);}return l}function Zo(e){return H(e)?e:[]}function Xo(e){return typeof e=="function"?e:ie}function Je(e,n){return P(e)?e:ri(e,n)?[e]:Br(M(e))}var Ad=k;function Qe(e,n,t){var o=e.length;return t=t===s?o:t,!n&&t>=o?e:fe(e,n,t)}var er=gc||function(e){return Y.clearTimeout(e)};function nr(e,n){if(n)return e.slice();var t=e.length,o=Ia?Ia(t):new e.constructor(t);return e.copy(o),o}function Jo(e){var n=new e.constructor(e.byteLength);return new Pt(n).set(new Pt(e)),n}function Dd(e,n){var t=n?Jo(e.buffer):e.buffer;return new e.constructor(t,e.byteOffset,e.byteLength)}function Rd(e){var n=new e.constructor(e.source,Vi.exec(e));return n.lastIndex=e.lastIndex,n}function Ed(e){return qn?O(qn.call(e)):{}}function tr(e,n){var t=n?Jo(e.buffer):e.buffer;return new e.constructor(t,e.byteOffset,e.length)}function or(e,n){if(e!==n){var t=e!==s,o=e===null,i=e===e,r=le(e),l=n!==s,c=n===null,p=n===n,h=le(n);if(!c&&!h&&!r&&e>n||r&&l&&p&&!c&&!h||o&&l&&p||!t&&p||!i)return 1;if(!o&&!r&&!h&&e<n||h&&t&&i&&!o&&!r||c&&t&&i||!l&&i||!p)return -1}return 0}function Ld(e,n,t){for(var o=-1,i=e.criteria,r=n.criteria,l=i.length,c=t.length;++o<l;){var p=or(i[o],r[o]);if(p){if(o>=c)return p;var h=t[o];return p*(h=="desc"?-1:1)}}return e.index-n.index}function ir(e,n,t,o){for(var i=-1,r=e.length,l=t.length,c=-1,p=n.length,h=j(r-l,0),b=u(p+h),g=!o;++c<p;)b[c]=n[c];for(;++i<l;)(g||i<r)&&(b[t[i]]=e[i]);for(;h--;)b[c++]=e[i++];return b}function ar(e,n,t,o){for(var i=-1,r=e.length,l=-1,c=t.length,p=-1,h=n.length,b=j(r-c,0),g=u(b+h),f=!o;++i<b;)g[i]=e[i];for(var v=i;++p<h;)g[v+p]=n[p];for(;++l<c;)(f||i<r)&&(g[v+t[l]]=e[i++]);return g}function ne(e,n){var t=-1,o=e.length;for(n||(n=u(o));++t<o;)n[t]=e[t];return n}function De(e,n,t,o){var i=!t;t||(t={});for(var r=-1,l=n.length;++r<l;){var c=n[r],p=o?o(t[c],e[c],c,t,e):s;p===s&&(p=e[c]),i?ze(t,c,p):$n(t,c,p);}return t}function Md(e,n){return De(e,ai(e),n)}function Od(e,n){return De(e,yr(e),n)}function Ft(e,n){return function(t,o){var i=P(t)?Nl:od,r=n?n():{};return i(t,e,x(o,2),r)}}function kn(e){return k(function(n,t){var o=-1,i=t.length,r=i>1?t[i-1]:s,l=i>2?t[2]:s;for(r=e.length>3&&typeof r=="function"?(i--,r):s,l&&Q(t[0],t[1],l)&&(r=i<3?s:r,i=1),n=O(n);++o<i;){var c=t[o];c&&e(n,c,o,r);}return n})}function rr(e,n){return function(t,o){if(t==null)return t;if(!te(t))return e(t,o);for(var i=t.length,r=n?i:-1,l=O(t);(n?r--:++r<i)&&o(l[r],r,l)!==false;);return t}}function sr(e){return function(n,t,o){for(var i=-1,r=O(n),l=o(n),c=l.length;c--;){var p=l[e?c:++i];if(t(r[p],p,r)===false)break}return n}}function zd(e,n,t){var o=n&pe,i=et(e);function r(){var l=this&&this!==Y&&this instanceof r?i:e;return l.apply(o?t:this,arguments)}return r}function lr(e){return function(n){n=M(n);var t=Tn(n)?Ie(n):s,o=t?t[0]:n.charAt(0),i=t?Qe(t,1).join(""):n.slice(1);return o[e]()+i}}function Bn(e){return function(n){return wo(rs(as(n).replace(Sl,"")),e,"")}}function et(e){return function(){var n=arguments;switch(n.length){case 0:return new e;case 1:return new e(n[0]);case 2:return new e(n[0],n[1]);case 3:return new e(n[0],n[1],n[2]);case 4:return new e(n[0],n[1],n[2],n[3]);case 5:return new e(n[0],n[1],n[2],n[3],n[4]);case 6:return new e(n[0],n[1],n[2],n[3],n[4],n[5]);case 7:return new e(n[0],n[1],n[2],n[3],n[4],n[5],n[6])}var t=Sn(e.prototype),o=e.apply(t,n);return N(o)?o:t}}function Wd(e,n,t){var o=et(e);function i(){for(var r=arguments.length,l=u(r),c=r,p=An(i);c--;)l[c]=arguments[c];var h=r<3&&l[0]!==p&&l[r-1]!==p?[]:Ye(l,p);if(r-=h.length,r<t)return mr(e,n,Nt,i.placeholder,s,l,h,s,s,t-r);var b=this&&this!==Y&&this instanceof i?o:e;return ae(b,this,l)}return i}function cr(e){return function(n,t,o){var i=O(n);if(!te(n)){var r=x(t,3);n=q(n),t=function(c){return r(i[c],c,i)};}var l=e(n,t,o);return l>-1?i[r?n[l]:l]:s}}function dr(e){return Ve(function(n){var t=n.length,o=t,i=be.prototype.thru;for(e&&n.reverse();o--;){var r=n[o];if(typeof r!="function")throw new he(K);if(i&&!l&&Gt(r)=="wrapper")var l=new be([],true);}for(o=l?o:t;++o<t;){r=n[o];var c=Gt(r),p=c=="wrapper"?oi(r):s;p&&si(p[0])&&p[1]==(Ee|Se|ke|On)&&!p[4].length&&p[9]==1?l=l[Gt(p[0])].apply(l,p[3]):l=r.length==1&&si(r)?l[c]():l.thru(r);}return function(){var h=arguments,b=h[0];if(l&&h.length==1&&P(b))return l.plant(b).value();for(var g=0,f=t?n[g].apply(this,h):b;++g<t;)f=n[g].call(this,f);return f}})}function Nt(e,n,t,o,i,r,l,c,p,h){var b=n&Ee,g=n&pe,f=n&nn,v=n&(Se|bn),T=n&to,S=f?s:et(e);function I(){for(var B=arguments.length,R=u(B),ce=B;ce--;)R[ce]=arguments[ce];if(v)var ee=An(I),de=$l(R,ee);if(o&&(R=ir(R,o,i,v)),r&&(R=ar(R,r,l,v)),B-=de,v&&B<h){var U=Ye(R,ee);return mr(e,n,Nt,I.placeholder,t,R,U,c,p,h-B)}var Ce=g?t:this,He=f?Ce[e]:e;return B=R.length,c?R=op(R,c):T&&B>1&&R.reverse(),b&&p<B&&(R.length=p),this&&this!==Y&&this instanceof I&&(He=S||et(He)),He.apply(Ce,R)}return I}function pr(e,n){return function(t,o){return pd(t,e,n(o),{})}}function _t(e,n){return function(t,o){var i;if(t===s&&o===s)return n;if(t!==s&&(i=t),o!==s){if(i===s)return o;typeof t=="string"||typeof o=="string"?(t=se(t),o=se(o)):(t=Za(t),o=Za(o)),i=e(t,o);}return i}}function Qo(e){return Ve(function(n){return n=V(n,re(x())),k(function(t){var o=this;return e(n,function(i){return ae(i,o,t)})})})}function Ht(e,n){n=n===s?" ":se(n);var t=n.length;if(t<2)return t?Ko(n,e):n;var o=Ko(n,Bt(e/In(n)));return Tn(n)?Qe(Ie(o),0,e).join(""):o.slice(0,e)}function Vd(e,n,t,o){var i=n&pe,r=et(e);function l(){for(var c=-1,p=arguments.length,h=-1,b=o.length,g=u(b+p),f=this&&this!==Y&&this instanceof l?r:e;++h<b;)g[h]=o[h];for(;p--;)g[h++]=arguments[++c];return ae(f,i?t:this,g)}return l}function ur(e){return function(n,t,o){return o&&typeof o!="number"&&Q(n,t,o)&&(t=o=s),n=_e(n),t===s?(t=n,n=0):t=_e(t),o=o===s?n<t?1:-1:_e(o),wd(n,t,o,e)}}function Ut(e){return function(n,t){return typeof n=="string"&&typeof t=="string"||(n=ve(n),t=ve(t)),e(n,t)}}function mr(e,n,t,o,i,r,l,c,p,h){var b=n&Se,g=b?l:s,f=b?s:l,v=b?r:s,T=b?s:r;n|=b?ke:gn,n&=~(b?gn:ke),n&Ri||(n&=-4);var S=[e,n,i,v,g,T,f,c,p,h],I=t.apply(s,S);return si(e)&&Cr(I,S),I.placeholder=o,Sr(I,e,n)}function ei(e){var n=G[e];return function(t,o){if(t=ve(t),o=o==null?0:Z(C(o),292),o&&Sa(t)){var i=(M(t)+"e").split("e"),r=n(i[0]+"e"+(+i[1]+o));return i=(M(r)+"e").split("e"),+(i[0]+"e"+(+i[1]-o))}return n(t)}}var Fd=Pn&&1/yt(new Pn([,-0]))[1]==tn?function(e){return new Pn(e)}:Ii;function hr(e){return function(n){var t=X(n);return t==xe?Do(n):t==Te?tc(n):ql(n,e(n))}}function We(e,n,t,o,i,r,l,c){var p=n&nn;if(!p&&typeof e!="function")throw new he(K);var h=o?o.length:0;if(h||(n&=-97,o=i=s),l=l===s?l:j(C(l),0),c=c===s?c:C(c),h-=i?i.length:0,n&gn){var b=o,g=i;o=i=s;}var f=p?s:oi(e),v=[e,n,t,o,i,b,g,r,l,c];if(f&&ep(v,f),e=v[0],n=v[1],t=v[2],o=v[3],i=v[4],c=v[9]=v[9]===s?p?0:e.length:j(v[9]-h,0),!c&&n&(Se|bn)&&(n&=-25),!n||n==pe)var T=zd(e,n,t);else n==Se||n==bn?T=Wd(e,n,c):(n==ke||n==(pe|ke))&&!i.length?T=Vd(e,n,t,o):T=Nt.apply(s,v);var S=f?qa:Cr;return Sr(S(T,v),e,n)}function br(e,n,t,o){return e===s||Pe(e,wn[t])&&!L.call(o,t)?n:e}function gr(e,n,t,o,i,r){return N(e)&&N(n)&&(r.set(n,e),zt(e,n,s,gr,r),r.delete(n)),e}function Nd(e){return ot(e)?s:e}function fr(e,n,t,o,i,r){var l=t&hn,c=e.length,p=n.length;if(c!=p&&!(l&&p>c))return false;var h=r.get(e),b=r.get(n);if(h&&b)return h==n&&b==e;var g=-1,f=true,v=t&st?new sn:s;for(r.set(e,n),r.set(n,e);++g<c;){var T=e[g],S=n[g];if(o)var I=l?o(S,T,g,n,e,r):o(T,S,g,e,n,r);if(I!==s){if(I)continue;f=false;break}if(v){if(!Po(n,function(B,R){if(!Un(v,R)&&(T===B||i(T,B,t,o,r)))return v.push(R)})){f=false;break}}else if(!(T===S||i(T,S,t,o,r))){f=false;break}}return r.delete(e),r.delete(n),f}function _d(e,n,t,o,i,r,l){switch(t){case yn:if(e.byteLength!=n.byteLength||e.byteOffset!=n.byteOffset)return false;e=e.buffer,n=n.buffer;case Hn:return !(e.byteLength!=n.byteLength||!r(new Pt(e),new Pt(n)));case zn:case Wn:case Vn:return Pe(+e,+n);case dt:return e.name==n.name&&e.message==n.message;case Fn:case Nn:return e==n+"";case xe:var c=Do;case Te:var p=o&hn;if(c||(c=yt),e.size!=n.size&&!p)return false;var h=l.get(e);if(h)return h==n;o|=st,l.set(e,n);var b=fr(c(e),c(n),o,i,r,l);return l.delete(e),b;case ut:if(qn)return qn.call(e)==qn.call(n)}return false}function Hd(e,n,t,o,i,r){var l=t&hn,c=ni(e),p=c.length,h=ni(n),b=h.length;if(p!=b&&!l)return false;for(var g=p;g--;){var f=c[g];if(!(l?f in n:L.call(n,f)))return false}var v=r.get(e),T=r.get(n);if(v&&T)return v==n&&T==e;var S=true;r.set(e,n),r.set(n,e);for(var I=l;++g<p;){f=c[g];var B=e[f],R=n[f];if(o)var ce=l?o(R,B,f,n,e,r):o(B,R,f,e,n,r);if(!(ce===s?B===R||i(B,R,t,o,r):ce)){S=false;break}I||(I=f=="constructor");}if(S&&!I){var ee=e.constructor,de=n.constructor;ee!=de&&"constructor"in e&&"constructor"in n&&!(typeof ee=="function"&&ee instanceof ee&&typeof de=="function"&&de instanceof de)&&(S=false);}return r.delete(e),r.delete(n),S}function Ve(e){return ci(wr(e,s,Er),e+"")}function ni(e){return Wa(e,q,ai)}function ti(e){return Wa(e,oe,yr)}var oi=Dt?function(e){return Dt.get(e)}:Ii;function Gt(e){for(var n=e.name+"",t=Cn[n],o=L.call(Cn,n)?t.length:0;o--;){var i=t[o],r=i.func;if(r==null||r==e)return i.name}return n}function An(e){var n=L.call(a,"placeholder")?a:e;return n.placeholder}function x(){var e=a.iteratee||xi;return e=e===xi?Na:e,arguments.length?e(arguments[0],arguments[1]):e}function jt(e,n){var t=e.__data__;return Zd(n)?t[typeof n=="string"?"string":"hash"]:t.map}function ii(e){for(var n=q(e),t=n.length;t--;){var o=n[t],i=e[o];n[t]=[o,i,Tr(i)];}return n}function dn(e,n){var t=Ql(e,n);return Fa(t)?t:s}function Ud(e){var n=L.call(e,an),t=e[an];try{e[an]=s;var o=!0;}catch{}var i=It.call(e);return o&&(n?e[an]=t:delete e[an]),i}var ai=Eo?function(e){return e==null?[]:(e=O(e),je(Eo(e),function(n){return Pa.call(e,n)}))}:wi,yr=Eo?function(e){for(var n=[];e;)Ke(n,ai(e)),e=Ct(e);return n}:wi,X=J;(Lo&&X(new Lo(new ArrayBuffer(1)))!=yn||jn&&X(new jn)!=xe||Mo&&X(Mo.resolve())!=Mi||Pn&&X(new Pn)!=Te||Kn&&X(new Kn)!=_n)&&(X=function(e){var n=J(e),t=n==Le?e.constructor:s,o=t?pn(t):"";if(o)switch(o){case Cc:return yn;case Sc:return xe;case kc:return Mi;case Bc:return Te;case Ac:return _n}return n});function Gd(e,n,t){for(var o=-1,i=t.length;++o<i;){var r=t[o],l=r.size;switch(r.type){case "drop":e+=l;break;case "dropRight":n-=l;break;case "take":n=Z(n,e+l);break;case "takeRight":e=j(e,n-l);break}}return {start:e,end:n}}function jd(e){var n=e.match(Xs);return n?n[1].split(Js):[]}function vr(e,n,t){n=Je(n,e);for(var o=-1,i=n.length,r=false;++o<i;){var l=Re(n[o]);if(!(r=e!=null&&t(e,l)))break;e=e[l];}return r||++o!=i?r:(i=e==null?0:e.length,!!i&&Jt(i)&&Fe(l,i)&&(P(e)||un(e)))}function Kd(e){var n=e.length,t=new e.constructor(n);return n&&typeof e[0]=="string"&&L.call(e,"index")&&(t.index=e.index,t.input=e.input),t}function xr(e){return typeof e.constructor=="function"&&!nt(e)?Sn(Ct(e)):{}}function Yd(e,n,t){var o=e.constructor;switch(n){case Hn:return Jo(e);case zn:case Wn:return new o(+e);case yn:return Dd(e,t);case oo:case io:case ao:case ro:case so:case lo:case co:case po:case uo:return tr(e,t);case xe:return new o;case Vn:case Nn:return new o(e);case Fn:return Rd(e);case Te:return new o;case ut:return Ed(e)}}function qd(e,n){var t=n.length;if(!t)return e;var o=t-1;return n[o]=(t>1?"& ":"")+n[o],n=n.join(t>2?", ":" "),e.replace(Zs,`{
|
|
12
|
-
/* [wrapped with `+n+`] */
|
|
13
|
-
`)}function $d(e){return P(e)||un(e)||!!(Ca&&e&&e[Ca])}function Fe(e,n){var t=typeof e;return n=n??Ge,!!n&&(t=="number"||t!="symbol"&&sl.test(e))&&e>-1&&e%1==0&&e<n}function Q(e,n,t){if(!N(t))return false;var o=typeof n;return (o=="number"?te(t)&&Fe(n,t.length):o=="string"&&n in t)?Pe(t[n],e):false}function ri(e,n){if(P(e))return false;var t=typeof e;return t=="number"||t=="symbol"||t=="boolean"||e==null||le(e)?true:Ks.test(e)||!js.test(e)||n!=null&&e in O(n)}function Zd(e){var n=typeof e;return n=="string"||n=="number"||n=="symbol"||n=="boolean"?e!=="__proto__":e===null}function si(e){var n=Gt(e),t=a[n];if(typeof t!="function"||!(n in D.prototype))return false;if(e===t)return true;var o=oi(t);return !!o&&e===o[0]}function Xd(e){return !!Ta&&Ta in e}var Jd=xt?Ne:Pi;function nt(e){var n=e&&e.constructor,t=typeof n=="function"&&n.prototype||wn;return e===t}function Tr(e){return e===e&&!N(e)}function Ir(e,n){return function(t){return t==null?false:t[e]===n&&(n!==s||e in O(t))}}function Qd(e){var n=Zt(e,function(o){return t.size===Ts&&t.clear(),o}),t=n.cache;return n}function ep(e,n){var t=e[1],o=n[1],i=t|o,r=i<(pe|nn|Ee),l=o==Ee&&t==Se||o==Ee&&t==On&&e[7].length<=n[8]||o==(Ee|On)&&n[7].length<=n[8]&&t==Se;if(!(r||l))return e;o&pe&&(e[2]=n[2],i|=t&pe?0:Ri);var c=n[3];if(c){var p=e[3];e[3]=p?ir(p,c,n[4]):c,e[4]=p?Ye(e[3],rt):n[4];}return c=n[5],c&&(p=e[5],e[5]=p?ar(p,c,n[6]):c,e[6]=p?Ye(e[5],rt):n[6]),c=n[7],c&&(e[7]=c),o&Ee&&(e[8]=e[8]==null?n[8]:Z(e[8],n[8])),e[9]==null&&(e[9]=n[9]),e[0]=n[0],e[1]=i,e}function np(e){var n=[];if(e!=null)for(var t in O(e))n.push(t);return n}function tp(e){return It.call(e)}function wr(e,n,t){return n=j(n===s?e.length-1:n,0),function(){for(var o=arguments,i=-1,r=j(o.length-n,0),l=u(r);++i<r;)l[i]=o[n+i];i=-1;for(var c=u(n+1);++i<n;)c[i]=o[i];return c[n]=t(l),ae(e,this,c)}}function Pr(e,n){return n.length<2?e:cn(e,fe(n,0,-1))}function op(e,n){for(var t=e.length,o=Z(n.length,t),i=ne(e);o--;){var r=n[o];e[o]=Fe(r,t)?i[r]:s;}return e}function li(e,n){if(!(n==="constructor"&&typeof e[n]=="function")&&n!="__proto__")return e[n]}var Cr=kr(qa),tt=yc||function(e,n){return Y.setTimeout(e,n)},ci=kr(Sd);function Sr(e,n,t){var o=n+"";return ci(e,qd(o,ip(jd(o),t)))}function kr(e){var n=0,t=0;return function(){var o=Ic(),i=Cs-(o-t);if(t=o,i>0){if(++n>=Ps)return arguments[0]}else n=0;return e.apply(s,arguments)}}function Kt(e,n){var t=-1,o=e.length,i=o-1;for(n=n===s?o:n;++t<n;){var r=jo(t,i),l=e[r];e[r]=e[t],e[t]=l;}return e.length=n,e}var Br=Qd(function(e){var n=[];return e.charCodeAt(0)===46&&n.push(""),e.replace(Ys,function(t,o,i,r){n.push(i?r.replace(nl,"$1"):o||t);}),n});function Re(e){if(typeof e=="string"||le(e))return e;var n=e+"";return n=="0"&&1/e==-tn?"-0":n}function pn(e){if(e!=null){try{return Tt.call(e)}catch{}try{return e+""}catch{}}return ""}function ip(e,n){return me(Rs,function(t){var o="_."+t[0];n&t[1]&&!gt(e,o)&&e.push(o);}),e.sort()}function Ar(e){if(e instanceof D)return e.clone();var n=new be(e.__wrapped__,e.__chain__);return n.__actions__=ne(e.__actions__),n.__index__=e.__index__,n.__values__=e.__values__,n}function ap(e,n,t){(t?Q(e,n,t):n===s)?n=1:n=j(C(n),0);var o=e==null?0:e.length;if(!o||n<1)return [];for(var i=0,r=0,l=u(Bt(o/n));i<o;)l[r++]=fe(e,i,i+=n);return l}function rp(e){for(var n=-1,t=e==null?0:e.length,o=0,i=[];++n<t;){var r=e[n];r&&(i[o++]=r);}return i}function sp(){var e=arguments.length;if(!e)return [];for(var n=u(e-1),t=arguments[0],o=e;o--;)n[o-1]=arguments[o];return Ke(P(t)?ne(t):[t],$(n,1))}var lp=k(function(e,n){return H(e)?Zn(e,$(n,1,H,true)):[]}),cp=k(function(e,n){var t=ye(n);return H(t)&&(t=s),H(e)?Zn(e,$(n,1,H,true),x(t,2)):[]}),dp=k(function(e,n){var t=ye(n);return H(t)&&(t=s),H(e)?Zn(e,$(n,1,H,true),s,t):[]});function pp(e,n,t){var o=e==null?0:e.length;return o?(n=t||n===s?1:C(n),fe(e,n<0?0:n,o)):[]}function up(e,n,t){var o=e==null?0:e.length;return o?(n=t||n===s?1:C(n),n=o-n,fe(e,0,n<0?0:n)):[]}function mp(e,n){return e&&e.length?Vt(e,x(n,3),true,true):[]}function hp(e,n){return e&&e.length?Vt(e,x(n,3),true):[]}function bp(e,n,t,o){var i=e==null?0:e.length;return i?(t&&typeof t!="number"&&Q(e,n,t)&&(t=0,o=i),sd(e,n,t,o)):[]}function Dr(e,n,t){var o=e==null?0:e.length;if(!o)return -1;var i=t==null?0:C(t);return i<0&&(i=j(o+i,0)),ft(e,x(n,3),i)}function Rr(e,n,t){var o=e==null?0:e.length;if(!o)return -1;var i=o-1;return t!==s&&(i=C(t),i=t<0?j(o+i,0):Z(i,o-1)),ft(e,x(n,3),i,true)}function Er(e){var n=e==null?0:e.length;return n?$(e,1):[]}function gp(e){var n=e==null?0:e.length;return n?$(e,tn):[]}function fp(e,n){var t=e==null?0:e.length;return t?(n=n===s?1:C(n),$(e,n)):[]}function yp(e){for(var n=-1,t=e==null?0:e.length,o={};++n<t;){var i=e[n];o[i[0]]=i[1];}return o}function Lr(e){return e&&e.length?e[0]:s}function vp(e,n,t){var o=e==null?0:e.length;if(!o)return -1;var i=t==null?0:C(t);return i<0&&(i=j(o+i,0)),xn(e,n,i)}function xp(e){var n=e==null?0:e.length;return n?fe(e,0,-1):[]}var Tp=k(function(e){var n=V(e,Zo);return n.length&&n[0]===e[0]?No(n):[]}),Ip=k(function(e){var n=ye(e),t=V(e,Zo);return n===ye(t)?n=s:t.pop(),t.length&&t[0]===e[0]?No(t,x(n,2)):[]}),wp=k(function(e){var n=ye(e),t=V(e,Zo);return n=typeof n=="function"?n:s,n&&t.pop(),t.length&&t[0]===e[0]?No(t,s,n):[]});function Pp(e,n){return e==null?"":xc.call(e,n)}function ye(e){var n=e==null?0:e.length;return n?e[n-1]:s}function Cp(e,n,t){var o=e==null?0:e.length;if(!o)return -1;var i=o;return t!==s&&(i=C(t),i=i<0?j(o+i,0):Z(i,o-1)),n===n?ic(e,n,i):ft(e,ma,i,true)}function Sp(e,n){return e&&e.length?Ga(e,C(n)):s}var kp=k(Mr);function Mr(e,n){return e&&e.length&&n&&n.length?Go(e,n):e}function Bp(e,n,t){return e&&e.length&&n&&n.length?Go(e,n,x(t,2)):e}function Ap(e,n,t){return e&&e.length&&n&&n.length?Go(e,n,s,t):e}var Dp=Ve(function(e,n){var t=e==null?0:e.length,o=zo(e,n);return Ya(e,V(n,function(i){return Fe(i,t)?+i:i}).sort(or)),o});function Rp(e,n){var t=[];if(!(e&&e.length))return t;var o=-1,i=[],r=e.length;for(n=x(n,3);++o<r;){var l=e[o];n(l,o,e)&&(t.push(l),i.push(o));}return Ya(e,i),t}function di(e){return e==null?e:Pc.call(e)}function Ep(e,n,t){var o=e==null?0:e.length;return o?(t&&typeof t!="number"&&Q(e,n,t)?(n=0,t=o):(n=n==null?0:C(n),t=t===s?o:C(t)),fe(e,n,t)):[]}function Lp(e,n){return Wt(e,n)}function Mp(e,n,t){return Yo(e,n,x(t,2))}function Op(e,n){var t=e==null?0:e.length;if(t){var o=Wt(e,n);if(o<t&&Pe(e[o],n))return o}return -1}function zp(e,n){return Wt(e,n,true)}function Wp(e,n,t){return Yo(e,n,x(t,2),true)}function Vp(e,n){var t=e==null?0:e.length;if(t){var o=Wt(e,n,true)-1;if(Pe(e[o],n))return o}return -1}function Fp(e){return e&&e.length?$a(e):[]}function Np(e,n){return e&&e.length?$a(e,x(n,2)):[]}function _p(e){var n=e==null?0:e.length;return n?fe(e,1,n):[]}function Hp(e,n,t){return e&&e.length?(n=t||n===s?1:C(n),fe(e,0,n<0?0:n)):[]}function Up(e,n,t){var o=e==null?0:e.length;return o?(n=t||n===s?1:C(n),n=o-n,fe(e,n<0?0:n,o)):[]}function Gp(e,n){return e&&e.length?Vt(e,x(n,3),false,true):[]}function jp(e,n){return e&&e.length?Vt(e,x(n,3)):[]}var Kp=k(function(e){return Xe($(e,1,H,true))}),Yp=k(function(e){var n=ye(e);return H(n)&&(n=s),Xe($(e,1,H,true),x(n,2))}),qp=k(function(e){var n=ye(e);return n=typeof n=="function"?n:s,Xe($(e,1,H,true),s,n)});function $p(e){return e&&e.length?Xe(e):[]}function Zp(e,n){return e&&e.length?Xe(e,x(n,2)):[]}function Xp(e,n){return n=typeof n=="function"?n:s,e&&e.length?Xe(e,s,n):[]}function pi(e){if(!(e&&e.length))return [];var n=0;return e=je(e,function(t){if(H(t))return n=j(t.length,n),true}),Bo(n,function(t){return V(e,Co(t))})}function Or(e,n){if(!(e&&e.length))return [];var t=pi(e);return n==null?t:V(t,function(o){return ae(n,s,o)})}var Jp=k(function(e,n){return H(e)?Zn(e,n):[]}),Qp=k(function(e){return $o(je(e,H))}),eu=k(function(e){var n=ye(e);return H(n)&&(n=s),$o(je(e,H),x(n,2))}),nu=k(function(e){var n=ye(e);return n=typeof n=="function"?n:s,$o(je(e,H),s,n)}),tu=k(pi);function ou(e,n){return Qa(e||[],n||[],$n)}function iu(e,n){return Qa(e||[],n||[],Qn)}var au=k(function(e){var n=e.length,t=n>1?e[n-1]:s;return t=typeof t=="function"?(e.pop(),t):s,Or(e,t)});function zr(e){var n=a(e);return n.__chain__=true,n}function ru(e,n){return n(e),e}function Yt(e,n){return n(e)}var su=Ve(function(e){var n=e.length,t=n?e[0]:0,o=this.__wrapped__,i=function(r){return zo(r,e)};return n>1||this.__actions__.length||!(o instanceof D)||!Fe(t)?this.thru(i):(o=o.slice(t,+t+(n?1:0)),o.__actions__.push({func:Yt,args:[i],thisArg:s}),new be(o,this.__chain__).thru(function(r){return n&&!r.length&&r.push(s),r}))});function lu(){return zr(this)}function cu(){return new be(this.value(),this.__chain__)}function du(){this.__values__===s&&(this.__values__=Zr(this.value()));var e=this.__index__>=this.__values__.length,n=e?s:this.__values__[this.__index__++];return {done:e,value:n}}function pu(){return this}function uu(e){for(var n,t=this;t instanceof Et;){var o=Ar(t);o.__index__=0,o.__values__=s,n?i.__wrapped__=o:n=o;var i=o;t=t.__wrapped__;}return i.__wrapped__=e,n}function mu(){var e=this.__wrapped__;if(e instanceof D){var n=e;return this.__actions__.length&&(n=new D(this)),n=n.reverse(),n.__actions__.push({func:Yt,args:[di],thisArg:s}),new be(n,this.__chain__)}return this.thru(di)}function hu(){return Ja(this.__wrapped__,this.__actions__)}var bu=Ft(function(e,n,t){L.call(e,t)?++e[t]:ze(e,t,1);});function gu(e,n,t){var o=P(e)?pa:rd;return t&&Q(e,n,t)&&(n=s),o(e,x(n,3))}function fu(e,n){var t=P(e)?je:Oa;return t(e,x(n,3))}var yu=cr(Dr),vu=cr(Rr);function xu(e,n){return $(qt(e,n),1)}function Tu(e,n){return $(qt(e,n),tn)}function Iu(e,n,t){return t=t===s?1:C(t),$(qt(e,n),t)}function Wr(e,n){var t=P(e)?me:Ze;return t(e,x(n,3))}function Vr(e,n){var t=P(e)?_l:Ma;return t(e,x(n,3))}var wu=Ft(function(e,n,t){L.call(e,t)?e[t].push(n):ze(e,t,[n]);});function Pu(e,n,t,o){e=te(e)?e:Rn(e),t=t&&!o?C(t):0;var i=e.length;return t<0&&(t=j(i+t,0)),Qt(e)?t<=i&&e.indexOf(n,t)>-1:!!i&&xn(e,n,t)>-1}var Cu=k(function(e,n,t){var o=-1,i=typeof n=="function",r=te(e)?u(e.length):[];return Ze(e,function(l){r[++o]=i?ae(n,l,t):Xn(l,n,t);}),r}),Su=Ft(function(e,n,t){ze(e,t,n);});function qt(e,n){var t=P(e)?V:_a;return t(e,x(n,3))}function ku(e,n,t,o){return e==null?[]:(P(n)||(n=n==null?[]:[n]),t=o?s:t,P(t)||(t=t==null?[]:[t]),ja(e,n,t))}var Bu=Ft(function(e,n,t){e[t?0:1].push(n);},function(){return [[],[]]});function Au(e,n,t){var o=P(e)?wo:ba,i=arguments.length<3;return o(e,x(n,4),t,i,Ze)}function Du(e,n,t){var o=P(e)?Hl:ba,i=arguments.length<3;return o(e,x(n,4),t,i,Ma)}function Ru(e,n){var t=P(e)?je:Oa;return t(e,Xt(x(n,3)))}function Eu(e){var n=P(e)?Da:Pd;return n(e)}function Lu(e,n,t){(t?Q(e,n,t):n===s)?n=1:n=C(n);var o=P(e)?nd:Cd;return o(e,n)}function Mu(e){var n=P(e)?td:kd;return n(e)}function Ou(e){if(e==null)return 0;if(te(e))return Qt(e)?In(e):e.length;var n=X(e);return n==xe||n==Te?e.size:Ho(e).length}function zu(e,n,t){var o=P(e)?Po:Bd;return t&&Q(e,n,t)&&(n=s),o(e,x(n,3))}var Wu=k(function(e,n){if(e==null)return [];var t=n.length;return t>1&&Q(e,n[0],n[1])?n=[]:t>2&&Q(n[0],n[1],n[2])&&(n=[n[0]]),ja(e,$(n,1),[])}),$t=fc||function(){return Y.Date.now()};function Vu(e,n){if(typeof n!="function")throw new he(K);return e=C(e),function(){if(--e<1)return n.apply(this,arguments)}}function Fr(e,n,t){return n=t?s:n,n=e&&n==null?e.length:n,We(e,Ee,s,s,s,s,n)}function Nr(e,n){var t;if(typeof n!="function")throw new he(K);return e=C(e),function(){return --e>0&&(t=n.apply(this,arguments)),e<=1&&(n=s),t}}var ui=k(function(e,n,t){var o=pe;if(t.length){var i=Ye(t,An(ui));o|=ke;}return We(e,o,n,t,i)}),_r=k(function(e,n,t){var o=pe|nn;if(t.length){var i=Ye(t,An(_r));o|=ke;}return We(n,o,e,t,i)});function Hr(e,n,t){n=t?s:n;var o=We(e,Se,s,s,s,s,s,n);return o.placeholder=Hr.placeholder,o}function Ur(e,n,t){n=t?s:n;var o=We(e,bn,s,s,s,s,s,n);return o.placeholder=Ur.placeholder,o}function Gr(e,n,t){var o,i,r,l,c,p,h=0,b=false,g=false,f=true;if(typeof e!="function")throw new he(K);n=ve(n)||0,N(t)&&(b=!!t.leading,g="maxWait"in t,r=g?j(ve(t.maxWait)||0,n):r,f="trailing"in t?!!t.trailing:f);function v(U){var Ce=o,He=i;return o=i=s,h=U,l=e.apply(He,Ce),l}function T(U){return h=U,c=tt(B,n),b?v(U):l}function S(U){var Ce=U-p,He=U-h,cs=n-Ce;return g?Z(cs,r-He):cs}function I(U){var Ce=U-p,He=U-h;return p===s||Ce>=n||Ce<0||g&&He>=r}function B(){var U=$t();if(I(U))return R(U);c=tt(B,S(U));}function R(U){return c=s,f&&o?v(U):(o=i=s,l)}function ce(){c!==s&&er(c),h=0,o=p=i=c=s;}function ee(){return c===s?l:R($t())}function de(){var U=$t(),Ce=I(U);if(o=arguments,i=this,p=U,Ce){if(c===s)return T(p);if(g)return er(c),c=tt(B,n),v(p)}return c===s&&(c=tt(B,n)),l}return de.cancel=ce,de.flush=ee,de}var Fu=k(function(e,n){return La(e,1,n)}),Nu=k(function(e,n,t){return La(e,ve(n)||0,t)});function _u(e){return We(e,to)}function Zt(e,n){if(typeof e!="function"||n!=null&&typeof n!="function")throw new he(K);var t=function(){var o=arguments,i=n?n.apply(this,o):o[0],r=t.cache;if(r.has(i))return r.get(i);var l=e.apply(this,o);return t.cache=r.set(i,l)||r,l};return t.cache=new(Zt.Cache||Oe),t}Zt.Cache=Oe;function Xt(e){if(typeof e!="function")throw new he(K);return function(){var n=arguments;switch(n.length){case 0:return !e.call(this);case 1:return !e.call(this,n[0]);case 2:return !e.call(this,n[0],n[1]);case 3:return !e.call(this,n[0],n[1],n[2])}return !e.apply(this,n)}}function Hu(e){return Nr(2,e)}var Uu=Ad(function(e,n){n=n.length==1&&P(n[0])?V(n[0],re(x())):V($(n,1),re(x()));var t=n.length;return k(function(o){for(var i=-1,r=Z(o.length,t);++i<r;)o[i]=n[i].call(this,o[i]);return ae(e,this,o)})}),mi=k(function(e,n){var t=Ye(n,An(mi));return We(e,ke,s,n,t)}),jr=k(function(e,n){var t=Ye(n,An(jr));return We(e,gn,s,n,t)}),Gu=Ve(function(e,n){return We(e,On,s,s,s,n)});function ju(e,n){if(typeof e!="function")throw new he(K);return n=n===s?n:C(n),k(e,n)}function Ku(e,n){if(typeof e!="function")throw new he(K);return n=n==null?0:j(C(n),0),k(function(t){var o=t[n],i=Qe(t,0,n);return o&&Ke(i,o),ae(e,this,i)})}function Yu(e,n,t){var o=true,i=true;if(typeof e!="function")throw new he(K);return N(t)&&(o="leading"in t?!!t.leading:o,i="trailing"in t?!!t.trailing:i),Gr(e,n,{leading:o,maxWait:n,trailing:i})}function qu(e){return Fr(e,1)}function $u(e,n){return mi(Xo(n),e)}function Zu(){if(!arguments.length)return [];var e=arguments[0];return P(e)?e:[e]}function Xu(e){return ge(e,mn)}function Ju(e,n){return n=typeof n=="function"?n:s,ge(e,mn,n)}function Qu(e){return ge(e,Ue|mn)}function em(e,n){return n=typeof n=="function"?n:s,ge(e,Ue|mn,n)}function nm(e,n){return n==null||Ea(e,n,q(n))}function Pe(e,n){return e===n||e!==e&&n!==n}var tm=Ut(Fo),om=Ut(function(e,n){return e>=n}),un=Va((function(){return arguments})())?Va:function(e){return _(e)&&L.call(e,"callee")&&!Pa.call(e,"callee")},P=u.isArray,im=aa?re(aa):ud;function te(e){return e!=null&&Jt(e.length)&&!Ne(e)}function H(e){return _(e)&&te(e)}function am(e){return e===true||e===false||_(e)&&J(e)==zn}var en=vc||Pi,rm=ra?re(ra):md;function sm(e){return _(e)&&e.nodeType===1&&!ot(e)}function lm(e){if(e==null)return true;if(te(e)&&(P(e)||typeof e=="string"||typeof e.splice=="function"||en(e)||Dn(e)||un(e)))return !e.length;var n=X(e);if(n==xe||n==Te)return !e.size;if(nt(e))return !Ho(e).length;for(var t in e)if(L.call(e,t))return false;return true}function cm(e,n){return Jn(e,n)}function dm(e,n,t){t=typeof t=="function"?t:s;var o=t?t(e,n):s;return o===s?Jn(e,n,s,t):!!o}function hi(e){if(!_(e))return false;var n=J(e);return n==dt||n==Ls||typeof e.message=="string"&&typeof e.name=="string"&&!ot(e)}function pm(e){return typeof e=="number"&&Sa(e)}function Ne(e){if(!N(e))return false;var n=J(e);return n==pt||n==Li||n==Es||n==Os}function Kr(e){return typeof e=="number"&&e==C(e)}function Jt(e){return typeof e=="number"&&e>-1&&e%1==0&&e<=Ge}function N(e){var n=typeof e;return e!=null&&(n=="object"||n=="function")}function _(e){return e!=null&&typeof e=="object"}var Yr=sa?re(sa):bd;function um(e,n){return e===n||_o(e,n,ii(n))}function mm(e,n,t){return t=typeof t=="function"?t:s,_o(e,n,ii(n),t)}function hm(e){return qr(e)&&e!=+e}function bm(e){if(Jd(e))throw new w(at);return Fa(e)}function gm(e){return e===null}function fm(e){return e==null}function qr(e){return typeof e=="number"||_(e)&&J(e)==Vn}function ot(e){if(!_(e)||J(e)!=Le)return false;var n=Ct(e);if(n===null)return true;var t=L.call(n,"constructor")&&n.constructor;return typeof t=="function"&&t instanceof t&&Tt.call(t)==mc}var bi=la?re(la):gd;function ym(e){return Kr(e)&&e>=-Ge&&e<=Ge}var $r=ca?re(ca):fd;function Qt(e){return typeof e=="string"||!P(e)&&_(e)&&J(e)==Nn}function le(e){return typeof e=="symbol"||_(e)&&J(e)==ut}var Dn=da?re(da):yd;function vm(e){return e===s}function xm(e){return _(e)&&X(e)==_n}function Tm(e){return _(e)&&J(e)==Ws}var Im=Ut(Uo),wm=Ut(function(e,n){return e<=n});function Zr(e){if(!e)return [];if(te(e))return Qt(e)?Ie(e):ne(e);if(Gn&&e[Gn])return nc(e[Gn]());var n=X(e),t=n==xe?Do:n==Te?yt:Rn;return t(e)}function _e(e){if(!e)return e===0?e:0;if(e=ve(e),e===tn||e===-tn){var n=e<0?-1:1;return n*Bs}return e===e?e:0}function C(e){var n=_e(e),t=n%1;return n===n?t?n-t:n:0}function Xr(e){return e?ln(C(e),0,Be):0}function ve(e){if(typeof e=="number")return e;if(le(e))return lt;if(N(e)){var n=typeof e.valueOf=="function"?e.valueOf():e;e=N(n)?n+"":n;}if(typeof e!="string")return e===0?e:+e;e=ga(e);var t=il.test(e);return t||rl.test(e)?Vl(e.slice(2),t?2:8):ol.test(e)?lt:+e}function Jr(e){return De(e,oe(e))}function Pm(e){return e?ln(C(e),-Ge,Ge):e===0?e:0}function M(e){return e==null?"":se(e)}var Cm=kn(function(e,n){if(nt(n)||te(n)){De(n,q(n),e);return}for(var t in n)L.call(n,t)&&$n(e,t,n[t]);}),Qr=kn(function(e,n){De(n,oe(n),e);}),eo=kn(function(e,n,t,o){De(n,oe(n),e,o);}),Sm=kn(function(e,n,t,o){De(n,q(n),e,o);}),km=Ve(zo);function Bm(e,n){var t=Sn(e);return n==null?t:Ra(t,n)}var Am=k(function(e,n){e=O(e);var t=-1,o=n.length,i=o>2?n[2]:s;for(i&&Q(n[0],n[1],i)&&(o=1);++t<o;)for(var r=n[t],l=oe(r),c=-1,p=l.length;++c<p;){var h=l[c],b=e[h];(b===s||Pe(b,wn[h])&&!L.call(e,h))&&(e[h]=r[h]);}return e}),Dm=k(function(e){return e.push(s,gr),ae(es,s,e)});function Rm(e,n){return ua(e,x(n,3),Ae)}function Em(e,n){return ua(e,x(n,3),Vo)}function Lm(e,n){return e==null?e:Wo(e,x(n,3),oe)}function Mm(e,n){return e==null?e:za(e,x(n,3),oe)}function Om(e,n){return e&&Ae(e,x(n,3))}function zm(e,n){return e&&Vo(e,x(n,3))}function Wm(e){return e==null?[]:Ot(e,q(e))}function Vm(e){return e==null?[]:Ot(e,oe(e))}function gi(e,n,t){var o=e==null?s:cn(e,n);return o===s?t:o}function Fm(e,n){return e!=null&&vr(e,n,ld)}function fi(e,n){return e!=null&&vr(e,n,cd)}var Nm=pr(function(e,n,t){n!=null&&typeof n.toString!="function"&&(n=It.call(n)),e[n]=t;},vi(ie)),_m=pr(function(e,n,t){n!=null&&typeof n.toString!="function"&&(n=It.call(n)),L.call(e,n)?e[n].push(t):e[n]=[t];},x),Hm=k(Xn);function q(e){return te(e)?Aa(e):Ho(e)}function oe(e){return te(e)?Aa(e,true):vd(e)}function Um(e,n){var t={};return n=x(n,3),Ae(e,function(o,i,r){ze(t,n(o,i,r),o);}),t}function Gm(e,n){var t={};return n=x(n,3),Ae(e,function(o,i,r){ze(t,i,n(o,i,r));}),t}var jm=kn(function(e,n,t){zt(e,n,t);}),es=kn(function(e,n,t,o){zt(e,n,t,o);}),Km=Ve(function(e,n){var t={};if(e==null)return t;var o=false;n=V(n,function(r){return r=Je(r,e),o||(o=r.length>1),r}),De(e,ti(e),t),o&&(t=ge(t,Ue|Di|mn,Nd));for(var i=n.length;i--;)qo(t,n[i]);return t});function Ym(e,n){return ns(e,Xt(x(n)))}var qm=Ve(function(e,n){return e==null?{}:Td(e,n)});function ns(e,n){if(e==null)return {};var t=V(ti(e),function(o){return [o]});return n=x(n),Ka(e,t,function(o,i){return n(o,i[0])})}function $m(e,n,t){n=Je(n,e);var o=-1,i=n.length;for(i||(i=1,e=s);++o<i;){var r=e==null?s:e[Re(n[o])];r===s&&(o=i,r=t),e=Ne(r)?r.call(e):r;}return e}function Zm(e,n,t){return e==null?e:Qn(e,n,t)}function Xm(e,n,t,o){return o=typeof o=="function"?o:s,e==null?e:Qn(e,n,t,o)}var ts=hr(q),os=hr(oe);function Jm(e,n,t){var o=P(e),i=o||en(e)||Dn(e);if(n=x(n,4),t==null){var r=e&&e.constructor;i?t=o?new r:[]:N(e)?t=Ne(r)?Sn(Ct(e)):{}:t={};}return (i?me:Ae)(e,function(l,c,p){return n(t,l,c,p)}),t}function Qm(e,n){return e==null?true:qo(e,n)}function eh(e,n,t){return e==null?e:Xa(e,n,Xo(t))}function nh(e,n,t,o){return o=typeof o=="function"?o:s,e==null?e:Xa(e,n,Xo(t),o)}function Rn(e){return e==null?[]:Ao(e,q(e))}function th(e){return e==null?[]:Ao(e,oe(e))}function oh(e,n,t){return t===s&&(t=n,n=s),t!==s&&(t=ve(t),t=t===t?t:0),n!==s&&(n=ve(n),n=n===n?n:0),ln(ve(e),n,t)}function ih(e,n,t){return n=_e(n),t===s?(t=n,n=0):t=_e(t),e=ve(e),dd(e,n,t)}function ah(e,n,t){if(t&&typeof t!="boolean"&&Q(e,n,t)&&(n=t=s),t===s&&(typeof n=="boolean"?(t=n,n=s):typeof e=="boolean"&&(t=e,e=s)),e===s&&n===s?(e=0,n=1):(e=_e(e),n===s?(n=e,e=0):n=_e(n)),e>n){var o=e;e=n,n=o;}if(t||e%1||n%1){var i=ka();return Z(e+i*(n-e+Wl("1e-"+((i+"").length-1))),n)}return jo(e,n)}var rh=Bn(function(e,n,t){return n=n.toLowerCase(),e+(t?is(n):n)});function is(e){return yi(M(e).toLowerCase())}function as(e){return e=M(e),e&&e.replace(ll,Zl).replace(kl,"")}function sh(e,n,t){e=M(e),n=se(n);var o=e.length;t=t===s?o:ln(C(t),0,o);var i=t;return t-=n.length,t>=0&&e.slice(t,i)==n}function lh(e){return e=M(e),e&&Hs.test(e)?e.replace(zi,Xl):e}function ch(e){return e=M(e),e&&qs.test(e)?e.replace(mo,"\\$&"):e}var dh=Bn(function(e,n,t){return e+(t?"-":"")+n.toLowerCase()}),ph=Bn(function(e,n,t){return e+(t?" ":"")+n.toLowerCase()}),uh=lr("toLowerCase");function mh(e,n,t){e=M(e),n=C(n);var o=n?In(e):0;if(!n||o>=n)return e;var i=(n-o)/2;return Ht(At(i),t)+e+Ht(Bt(i),t)}function hh(e,n,t){e=M(e),n=C(n);var o=n?In(e):0;return n&&o<n?e+Ht(n-o,t):e}function bh(e,n,t){e=M(e),n=C(n);var o=n?In(e):0;return n&&o<n?Ht(n-o,t)+e:e}function gh(e,n,t){return t||n==null?n=0:n&&(n=+n),wc(M(e).replace(ho,""),n||0)}function fh(e,n,t){return (t?Q(e,n,t):n===s)?n=1:n=C(n),Ko(M(e),n)}function yh(){var e=arguments,n=M(e[0]);return e.length<3?n:n.replace(e[1],e[2])}var vh=Bn(function(e,n,t){return e+(t?"_":"")+n.toLowerCase()});function xh(e,n,t){return t&&typeof t!="number"&&Q(e,n,t)&&(n=t=s),t=t===s?Be:t>>>0,t?(e=M(e),e&&(typeof n=="string"||n!=null&&!bi(n))&&(n=se(n),!n&&Tn(e))?Qe(Ie(e),0,t):e.split(n,t)):[]}var Th=Bn(function(e,n,t){return e+(t?" ":"")+yi(n)});function Ih(e,n,t){return e=M(e),t=t==null?0:ln(C(t),0,e.length),n=se(n),e.slice(t,t+n.length)==n}function wh(e,n,t){var o=a.templateSettings;t&&Q(e,n,t)&&(n=s),e=M(e),n=eo({},n,o,br);var i=eo({},n.imports,o.imports,br),r=q(i),l=Ao(i,r),c,p,h=0,b=n.interpolate||mt,g="__p += '",f=Ro((n.escape||mt).source+"|"+b.source+"|"+(b===Wi?tl:mt).source+"|"+(n.evaluate||mt).source+"|$","g"),v="//# sourceURL="+(L.call(n,"sourceURL")?(n.sourceURL+"").replace(/\s/g," "):"lodash.templateSources["+ ++El+"]")+`
|
|
14
|
-
`;e.replace(f,function(I,B,R,ce,ee,de){return R||(R=ce),g+=e.slice(h,de).replace(cl,Jl),B&&(c=true,g+=`' +
|
|
15
|
-
__e(`+B+`) +
|
|
16
|
-
'`),ee&&(p=true,g+=`';
|
|
17
|
-
`+ee+`;
|
|
18
|
-
__p += '`),R&&(g+=`' +
|
|
19
|
-
((__t = (`+R+`)) == null ? '' : __t) +
|
|
20
|
-
'`),h=de+I.length,I}),g+=`';
|
|
21
|
-
`;var T=L.call(n,"variable")&&n.variable;if(!T)g=`with (obj) {
|
|
22
|
-
`+g+`
|
|
23
|
-
}
|
|
24
|
-
`;else if(el.test(T))throw new w(xs);g=(p?g.replace(Vs,""):g).replace(Fs,"$1").replace(Ns,"$1;"),g="function("+(T||"obj")+`) {
|
|
25
|
-
`+(T?"":`obj || (obj = {});
|
|
26
|
-
`)+"var __t, __p = ''"+(c?", __e = _.escape":"")+(p?`, __j = Array.prototype.join;
|
|
27
|
-
function print() { __p += __j.call(arguments, '') }
|
|
28
|
-
`:`;
|
|
29
|
-
`)+g+`return __p
|
|
30
|
-
}`;var S=ss(function(){return E(r,v+"return "+g).apply(s,l)});if(S.source=g,hi(S))throw S;return S}function Ph(e){return M(e).toLowerCase()}function Ch(e){return M(e).toUpperCase()}function Sh(e,n,t){if(e=M(e),e&&(t||n===s))return ga(e);if(!e||!(n=se(n)))return e;var o=Ie(e),i=Ie(n),r=fa(o,i),l=ya(o,i)+1;return Qe(o,r,l).join("")}function kh(e,n,t){if(e=M(e),e&&(t||n===s))return e.slice(0,xa(e)+1);if(!e||!(n=se(n)))return e;var o=Ie(e),i=ya(o,Ie(n))+1;return Qe(o,0,i).join("")}function Bh(e,n,t){if(e=M(e),e&&(t||n===s))return e.replace(ho,"");if(!e||!(n=se(n)))return e;var o=Ie(e),i=fa(o,Ie(n));return Qe(o,i).join("")}function Ah(e,n){var t=Is,o=ws;if(N(n)){var i="separator"in n?n.separator:i;t="length"in n?C(n.length):t,o="omission"in n?se(n.omission):o;}e=M(e);var r=e.length;if(Tn(e)){var l=Ie(e);r=l.length;}if(t>=r)return e;var c=t-In(o);if(c<1)return o;var p=l?Qe(l,0,c).join(""):e.slice(0,c);if(i===s)return p+o;if(l&&(c+=p.length-c),bi(i)){if(e.slice(c).search(i)){var h,b=p;for(i.global||(i=Ro(i.source,M(Vi.exec(i))+"g")),i.lastIndex=0;h=i.exec(b);)var g=h.index;p=p.slice(0,g===s?c:g);}}else if(e.indexOf(se(i),c)!=c){var f=p.lastIndexOf(i);f>-1&&(p=p.slice(0,f));}return p+o}function Dh(e){return e=M(e),e&&_s.test(e)?e.replace(Oi,ac):e}var Rh=Bn(function(e,n,t){return e+(t?" ":"")+n.toUpperCase()}),yi=lr("toUpperCase");function rs(e,n,t){return e=M(e),n=t?s:n,n===s?ec(e)?lc(e):jl(e):e.match(n)||[]}var ss=k(function(e,n){try{return ae(e,s,n)}catch(t){return hi(t)?t:new w(t)}}),Eh=Ve(function(e,n){return me(n,function(t){t=Re(t),ze(e,t,ui(e[t],e));}),e});function Lh(e){var n=e==null?0:e.length,t=x();return e=n?V(e,function(o){if(typeof o[1]!="function")throw new he(K);return [t(o[0]),o[1]]}):[],k(function(o){for(var i=-1;++i<n;){var r=e[i];if(ae(r[0],this,o))return ae(r[1],this,o)}})}function Mh(e){return ad(ge(e,Ue))}function vi(e){return function(){return e}}function Oh(e,n){return e==null||e!==e?n:e}var zh=dr(),Wh=dr(true);function ie(e){return e}function xi(e){return Na(typeof e=="function"?e:ge(e,Ue))}function Vh(e){return Ha(ge(e,Ue))}function Fh(e,n){return Ua(e,ge(n,Ue))}var Nh=k(function(e,n){return function(t){return Xn(t,e,n)}}),_h=k(function(e,n){return function(t){return Xn(e,t,n)}});function Ti(e,n,t){var o=q(n),i=Ot(n,o);t==null&&!(N(n)&&(i.length||!o.length))&&(t=n,n=e,e=this,i=Ot(n,q(n)));var r=!(N(t)&&"chain"in t)||!!t.chain,l=Ne(e);return me(i,function(c){var p=n[c];e[c]=p,l&&(e.prototype[c]=function(){var h=this.__chain__;if(r||h){var b=e(this.__wrapped__),g=b.__actions__=ne(this.__actions__);return g.push({func:p,args:arguments,thisArg:e}),b.__chain__=h,b}return p.apply(e,Ke([this.value()],arguments))});}),e}function Hh(){return Y._===this&&(Y._=hc),this}function Ii(){}function Uh(e){return e=C(e),k(function(n){return Ga(n,e)})}var Gh=Qo(V),jh=Qo(pa),Kh=Qo(Po);function ls(e){return ri(e)?Co(Re(e)):Id(e)}function Yh(e){return function(n){return e==null?s:cn(e,n)}}var qh=ur(),$h=ur(true);function wi(){return []}function Pi(){return false}function Zh(){return {}}function Xh(){return ""}function Jh(){return true}function Qh(e,n){if(e=C(e),e<1||e>Ge)return [];var t=Be,o=Z(e,Be);n=x(n),e-=Be;for(var i=Bo(o,n);++t<e;)n(t);return i}function eb(e){return P(e)?V(e,Re):le(e)?[e]:ne(Br(M(e)))}function nb(e){var n=++uc;return M(e)+n}var tb=_t(function(e,n){return e+n},0),ob=ei("ceil"),ib=_t(function(e,n){return e/n},1),ab=ei("floor");function rb(e){return e&&e.length?Mt(e,ie,Fo):s}function sb(e,n){return e&&e.length?Mt(e,x(n,2),Fo):s}function lb(e){return ha(e,ie)}function cb(e,n){return ha(e,x(n,2))}function db(e){return e&&e.length?Mt(e,ie,Uo):s}function pb(e,n){return e&&e.length?Mt(e,x(n,2),Uo):s}var ub=_t(function(e,n){return e*n},1),mb=ei("round"),hb=_t(function(e,n){return e-n},0);function bb(e){return e&&e.length?ko(e,ie):0}function gb(e,n){return e&&e.length?ko(e,x(n,2)):0}return a.after=Vu,a.ary=Fr,a.assign=Cm,a.assignIn=Qr,a.assignInWith=eo,a.assignWith=Sm,a.at=km,a.before=Nr,a.bind=ui,a.bindAll=Eh,a.bindKey=_r,a.castArray=Zu,a.chain=zr,a.chunk=ap,a.compact=rp,a.concat=sp,a.cond=Lh,a.conforms=Mh,a.constant=vi,a.countBy=bu,a.create=Bm,a.curry=Hr,a.curryRight=Ur,a.debounce=Gr,a.defaults=Am,a.defaultsDeep=Dm,a.defer=Fu,a.delay=Nu,a.difference=lp,a.differenceBy=cp,a.differenceWith=dp,a.drop=pp,a.dropRight=up,a.dropRightWhile=mp,a.dropWhile=hp,a.fill=bp,a.filter=fu,a.flatMap=xu,a.flatMapDeep=Tu,a.flatMapDepth=Iu,a.flatten=Er,a.flattenDeep=gp,a.flattenDepth=fp,a.flip=_u,a.flow=zh,a.flowRight=Wh,a.fromPairs=yp,a.functions=Wm,a.functionsIn=Vm,a.groupBy=wu,a.initial=xp,a.intersection=Tp,a.intersectionBy=Ip,a.intersectionWith=wp,a.invert=Nm,a.invertBy=_m,a.invokeMap=Cu,a.iteratee=xi,a.keyBy=Su,a.keys=q,a.keysIn=oe,a.map=qt,a.mapKeys=Um,a.mapValues=Gm,a.matches=Vh,a.matchesProperty=Fh,a.memoize=Zt,a.merge=jm,a.mergeWith=es,a.method=Nh,a.methodOf=_h,a.mixin=Ti,a.negate=Xt,a.nthArg=Uh,a.omit=Km,a.omitBy=Ym,a.once=Hu,a.orderBy=ku,a.over=Gh,a.overArgs=Uu,a.overEvery=jh,a.overSome=Kh,a.partial=mi,a.partialRight=jr,a.partition=Bu,a.pick=qm,a.pickBy=ns,a.property=ls,a.propertyOf=Yh,a.pull=kp,a.pullAll=Mr,a.pullAllBy=Bp,a.pullAllWith=Ap,a.pullAt=Dp,a.range=qh,a.rangeRight=$h,a.rearg=Gu,a.reject=Ru,a.remove=Rp,a.rest=ju,a.reverse=di,a.sampleSize=Lu,a.set=Zm,a.setWith=Xm,a.shuffle=Mu,a.slice=Ep,a.sortBy=Wu,a.sortedUniq=Fp,a.sortedUniqBy=Np,a.split=xh,a.spread=Ku,a.tail=_p,a.take=Hp,a.takeRight=Up,a.takeRightWhile=Gp,a.takeWhile=jp,a.tap=ru,a.throttle=Yu,a.thru=Yt,a.toArray=Zr,a.toPairs=ts,a.toPairsIn=os,a.toPath=eb,a.toPlainObject=Jr,a.transform=Jm,a.unary=qu,a.union=Kp,a.unionBy=Yp,a.unionWith=qp,a.uniq=$p,a.uniqBy=Zp,a.uniqWith=Xp,a.unset=Qm,a.unzip=pi,a.unzipWith=Or,a.update=eh,a.updateWith=nh,a.values=Rn,a.valuesIn=th,a.without=Jp,a.words=rs,a.wrap=$u,a.xor=Qp,a.xorBy=eu,a.xorWith=nu,a.zip=tu,a.zipObject=ou,a.zipObjectDeep=iu,a.zipWith=au,a.entries=ts,a.entriesIn=os,a.extend=Qr,a.extendWith=eo,Ti(a,a),a.add=tb,a.attempt=ss,a.camelCase=rh,a.capitalize=is,a.ceil=ob,a.clamp=oh,a.clone=Xu,a.cloneDeep=Qu,a.cloneDeepWith=em,a.cloneWith=Ju,a.conformsTo=nm,a.deburr=as,a.defaultTo=Oh,a.divide=ib,a.endsWith=sh,a.eq=Pe,a.escape=lh,a.escapeRegExp=ch,a.every=gu,a.find=yu,a.findIndex=Dr,a.findKey=Rm,a.findLast=vu,a.findLastIndex=Rr,a.findLastKey=Em,a.floor=ab,a.forEach=Wr,a.forEachRight=Vr,a.forIn=Lm,a.forInRight=Mm,a.forOwn=Om,a.forOwnRight=zm,a.get=gi,a.gt=tm,a.gte=om,a.has=Fm,a.hasIn=fi,a.head=Lr,a.identity=ie,a.includes=Pu,a.indexOf=vp,a.inRange=ih,a.invoke=Hm,a.isArguments=un,a.isArray=P,a.isArrayBuffer=im,a.isArrayLike=te,a.isArrayLikeObject=H,a.isBoolean=am,a.isBuffer=en,a.isDate=rm,a.isElement=sm,a.isEmpty=lm,a.isEqual=cm,a.isEqualWith=dm,a.isError=hi,a.isFinite=pm,a.isFunction=Ne,a.isInteger=Kr,a.isLength=Jt,a.isMap=Yr,a.isMatch=um,a.isMatchWith=mm,a.isNaN=hm,a.isNative=bm,a.isNil=fm,a.isNull=gm,a.isNumber=qr,a.isObject=N,a.isObjectLike=_,a.isPlainObject=ot,a.isRegExp=bi,a.isSafeInteger=ym,a.isSet=$r,a.isString=Qt,a.isSymbol=le,a.isTypedArray=Dn,a.isUndefined=vm,a.isWeakMap=xm,a.isWeakSet=Tm,a.join=Pp,a.kebabCase=dh,a.last=ye,a.lastIndexOf=Cp,a.lowerCase=ph,a.lowerFirst=uh,a.lt=Im,a.lte=wm,a.max=rb,a.maxBy=sb,a.mean=lb,a.meanBy=cb,a.min=db,a.minBy=pb,a.stubArray=wi,a.stubFalse=Pi,a.stubObject=Zh,a.stubString=Xh,a.stubTrue=Jh,a.multiply=ub,a.nth=Sp,a.noConflict=Hh,a.noop=Ii,a.now=$t,a.pad=mh,a.padEnd=hh,a.padStart=bh,a.parseInt=gh,a.random=ah,a.reduce=Au,a.reduceRight=Du,a.repeat=fh,a.replace=yh,a.result=$m,a.round=mb,a.runInContext=d,a.sample=Eu,a.size=Ou,a.snakeCase=vh,a.some=zu,a.sortedIndex=Lp,a.sortedIndexBy=Mp,a.sortedIndexOf=Op,a.sortedLastIndex=zp,a.sortedLastIndexBy=Wp,a.sortedLastIndexOf=Vp,a.startCase=Th,a.startsWith=Ih,a.subtract=hb,a.sum=bb,a.sumBy=gb,a.template=wh,a.times=Qh,a.toFinite=_e,a.toInteger=C,a.toLength=Xr,a.toLower=Ph,a.toNumber=ve,a.toSafeInteger=Pm,a.toString=M,a.toUpper=Ch,a.trim=Sh,a.trimEnd=kh,a.trimStart=Bh,a.truncate=Ah,a.unescape=Dh,a.uniqueId=nb,a.upperCase=Rh,a.upperFirst=yi,a.each=Wr,a.eachRight=Vr,a.first=Lr,Ti(a,(function(){var e={};return Ae(a,function(n,t){L.call(a.prototype,t)||(e[t]=n);}),e})(),{chain:false}),a.VERSION=F,me(["bind","bindKey","curry","curryRight","partial","partialRight"],function(e){a[e].placeholder=a;}),me(["drop","take"],function(e,n){D.prototype[e]=function(t){t=t===s?1:j(C(t),0);var o=this.__filtered__&&!n?new D(this):this.clone();return o.__filtered__?o.__takeCount__=Z(t,o.__takeCount__):o.__views__.push({size:Z(t,Be),type:e+(o.__dir__<0?"Right":"")}),o},D.prototype[e+"Right"]=function(t){return this.reverse()[e](t).reverse()};}),me(["filter","map","takeWhile"],function(e,n){var t=n+1,o=t==Ei||t==ks;D.prototype[e]=function(i){var r=this.clone();return r.__iteratees__.push({iteratee:x(i,3),type:t}),r.__filtered__=r.__filtered__||o,r};}),me(["head","last"],function(e,n){var t="take"+(n?"Right":"");D.prototype[e]=function(){return this[t](1).value()[0]};}),me(["initial","tail"],function(e,n){var t="drop"+(n?"":"Right");D.prototype[e]=function(){return this.__filtered__?new D(this):this[t](1)};}),D.prototype.compact=function(){return this.filter(ie)},D.prototype.find=function(e){return this.filter(e).head()},D.prototype.findLast=function(e){return this.reverse().find(e)},D.prototype.invokeMap=k(function(e,n){return typeof e=="function"?new D(this):this.map(function(t){return Xn(t,e,n)})}),D.prototype.reject=function(e){return this.filter(Xt(x(e)))},D.prototype.slice=function(e,n){e=C(e);var t=this;return t.__filtered__&&(e>0||n<0)?new D(t):(e<0?t=t.takeRight(-e):e&&(t=t.drop(e)),n!==s&&(n=C(n),t=n<0?t.dropRight(-n):t.take(n-e)),t)},D.prototype.takeRightWhile=function(e){return this.reverse().takeWhile(e).reverse()},D.prototype.toArray=function(){return this.take(Be)},Ae(D.prototype,function(e,n){var t=/^(?:filter|find|map|reject)|While$/.test(n),o=/^(?:head|last)$/.test(n),i=a[o?"take"+(n=="last"?"Right":""):n],r=o||/^find/.test(n);i&&(a.prototype[n]=function(){var l=this.__wrapped__,c=o?[1]:arguments,p=l instanceof D,h=c[0],b=p||P(l),g=function(B){var R=i.apply(a,Ke([B],c));return o&&f?R[0]:R};b&&t&&typeof h=="function"&&h.length!=1&&(p=b=false);var f=this.__chain__,v=!!this.__actions__.length,T=r&&!f,S=p&&!v;if(!r&&b){l=S?l:new D(this);var I=e.apply(l,c);return I.__actions__.push({func:Yt,args:[g],thisArg:s}),new be(I,f)}return T&&S?e.apply(this,c):(I=this.thru(g),T?o?I.value()[0]:I.value():I)});}),me(["pop","push","shift","sort","splice","unshift"],function(e){var n=vt[e],t=/^(?:push|sort|unshift)$/.test(e)?"tap":"thru",o=/^(?:pop|shift)$/.test(e);a.prototype[e]=function(){var i=arguments;if(o&&!this.__chain__){var r=this.value();return n.apply(P(r)?r:[],i)}return this[t](function(l){return n.apply(P(l)?l:[],i)})};}),Ae(D.prototype,function(e,n){var t=a[n];if(t){var o=t.name+"";L.call(Cn,o)||(Cn[o]=[]),Cn[o].push({name:n,func:t});}}),Cn[Nt(s,nn).name]=[{name:"wrapper",func:s}],D.prototype.clone=Dc,D.prototype.reverse=Rc,D.prototype.value=Ec,a.prototype.at=su,a.prototype.chain=lu,a.prototype.commit=cu,a.prototype.next=du,a.prototype.plant=uu,a.prototype.reverse=mu,a.prototype.toJSON=a.prototype.valueOf=a.prototype.value=hu,a.prototype.first=a.prototype.head,Gn&&(a.prototype[Gn]=pu),a}),qe=cc();typeof define=="function"&&typeof define.amd=="object"&&define.amd?(Y._=qe,define(function(){return qe})):on?((on.exports=qe)._=qe,xo._=qe):Y._=qe;}).call(En);});var vs=Pb(ps());var Ln={Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
|
|
11
|
+
var o={Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
|
|
31
12
|
|
|
32
13
|
* Full keyboard navigation
|
|
33
14
|
* It can expand one or multiple items
|
|
@@ -317,6 +298,11 @@ className?: string | ((props: UIStateOptions<T>) => string)
|
|
|
317
298
|
*/
|
|
318
299
|
style?: | React.CSSProperties
|
|
319
300
|
| ((props: UIStateOptions<T>) => React.CSSProperties)
|
|
301
|
+
/**
|
|
302
|
+
* A slot name for the component. Used to integrate with React Aria Components'
|
|
303
|
+
* context system (e.g., \`slot="drag"\` for drag handles in Table rows).
|
|
304
|
+
*/
|
|
305
|
+
slot?: string | null
|
|
320
306
|
/**
|
|
321
307
|
* The button's variant.
|
|
322
308
|
*
|
|
@@ -349,7 +335,6 @@ iconEnd?: React.FC<IconProps>
|
|
|
349
335
|
* @default sm
|
|
350
336
|
*/
|
|
351
337
|
size?: "sm" | "md" | "lg"
|
|
352
|
-
elementType?: any
|
|
353
338
|
}`,stories:{usage:[{id:"core-buttons-actionbutton--basic",name:"Basic",snippet:'const Basic = () => <ActionButton onPress={fn()} label="Label" />;'},{id:"core-buttons-actionbutton--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
354
339
|
<VariantViewer<React.ComponentProps<typeof ActionButton>>
|
|
355
340
|
header={["Enabled", "Disabled", "Icon Start", "Icon End"]}
|
|
@@ -939,6 +924,11 @@ className?: string | ((props: UIStateOptions<T>) => string)
|
|
|
939
924
|
*/
|
|
940
925
|
style?: | React.CSSProperties
|
|
941
926
|
| ((props: UIStateOptions<T>) => React.CSSProperties)
|
|
927
|
+
/**
|
|
928
|
+
* A slot name for the component. Used to integrate with React Aria Components'
|
|
929
|
+
* context system (e.g., \`slot="drag"\` for drag handles in Table rows).
|
|
930
|
+
*/
|
|
931
|
+
slot?: string | null
|
|
942
932
|
/**
|
|
943
933
|
* The icon to display
|
|
944
934
|
*/
|
|
@@ -2901,6 +2891,11 @@ label?: string
|
|
|
2901
2891
|
* @default end
|
|
2902
2892
|
*/
|
|
2903
2893
|
labelPosition?: "start" | "end"
|
|
2894
|
+
/**
|
|
2895
|
+
* The slot attribute for composition with parent components like Table.
|
|
2896
|
+
* Pass \`null\` to explicitly opt out of slot context lookup.
|
|
2897
|
+
*/
|
|
2898
|
+
slot?: string | null
|
|
2904
2899
|
}`,stories:{usage:[{id:"core-forms-checkbox--primary",name:"Primary",snippet:'const Primary = () => <Checkbox aria-label="Label" />;'},{id:"core-forms-checkbox--checked",name:"Checked",snippet:'const Checked = () => <Checkbox aria-label="Label" defaultSelected />;'},{id:"core-forms-checkbox--indeterminate",name:"Indeterminate",snippet:'const Indeterminate = () => <Checkbox aria-label="Label" isIndeterminate />;'},{id:"core-forms-checkbox--with-error",name:"With Error",snippet:'const WithError = () => <Checkbox aria-label="Label" isInvalid />;'},{id:"core-forms-checkbox--with-label-at-end",name:"With Label At End",snippet:"const WithLabelAtEnd = () => <WithLabel />;"},{id:"core-forms-checkbox--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <div style={{ width: 150 }}>
|
|
2905
2900
|
<WithLabel labelPosition="start" />
|
|
2906
2901
|
</div>;`}],implementation:""},similarTo:[],figmaUrl:null},Code:{id:"core-content-code",breadcrumb:"Core/Content/Code",importStatement:'import { Code } from "@baseline-ui/core";',description:"The `Code` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.",documentation:`The \`Code\` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.
|
|
@@ -4303,6 +4298,75 @@ DateField supports various calendar systems used around the world. The calendar
|
|
|
4303
4298
|
</I18nProvider>
|
|
4304
4299
|
\`\`\`
|
|
4305
4300
|
|
|
4301
|
+
The \`pickerType\` prop controls calendar picker integration.
|
|
4302
|
+
|
|
4303
|
+
Shows a trailing calendar icon as a visual indicator, with no interactive behavior.
|
|
4304
|
+
|
|
4305
|
+
\`\`\`jsx
|
|
4306
|
+
<DateField label="Event Date" pickerType="presentation" />
|
|
4307
|
+
\`\`\`
|
|
4308
|
+
|
|
4309
|
+
Shows a trailing calendar button that opens a Calendar popover. The calendar and date field sync bidirectionally \u2014 typing updates the calendar, and picking a date updates the field.
|
|
4310
|
+
|
|
4311
|
+
\`\`\`jsx
|
|
4312
|
+
<DateField label="Event Date" pickerType="calendar" />
|
|
4313
|
+
\`\`\`
|
|
4314
|
+
|
|
4315
|
+
\`\`\`jsx
|
|
4316
|
+
import { parseDate } from "@internationalized/date";
|
|
4317
|
+
|
|
4318
|
+
<DateField
|
|
4319
|
+
label="Event Date"
|
|
4320
|
+
pickerType="calendar"
|
|
4321
|
+
defaultValue={parseDate("2022-11-07")}
|
|
4322
|
+
/>;
|
|
4323
|
+
\`\`\`
|
|
4324
|
+
|
|
4325
|
+
Min/max values are shared between the field and calendar.
|
|
4326
|
+
|
|
4327
|
+
\`\`\`jsx
|
|
4328
|
+
import { CalendarDate } from "@internationalized/date";
|
|
4329
|
+
|
|
4330
|
+
<DateField
|
|
4331
|
+
label="Event Date"
|
|
4332
|
+
pickerType="calendar"
|
|
4333
|
+
minValue={new CalendarDate(2022, 1, 1)}
|
|
4334
|
+
maxValue={new CalendarDate(2022, 12, 31)}
|
|
4335
|
+
defaultValue={new CalendarDate(2022, 6, 15)}
|
|
4336
|
+
/>;
|
|
4337
|
+
\`\`\`
|
|
4338
|
+
|
|
4339
|
+
\`\`\`jsx
|
|
4340
|
+
<DateField
|
|
4341
|
+
label="Event Date"
|
|
4342
|
+
pickerType="calendar"
|
|
4343
|
+
isDisabled
|
|
4344
|
+
defaultValue={date}
|
|
4345
|
+
/>
|
|
4346
|
+
\`\`\`
|
|
4347
|
+
|
|
4348
|
+
\`\`\`jsx
|
|
4349
|
+
<DateField
|
|
4350
|
+
label="Event Date"
|
|
4351
|
+
pickerType="calendar"
|
|
4352
|
+
isReadOnly
|
|
4353
|
+
defaultValue={date}
|
|
4354
|
+
/>
|
|
4355
|
+
\`\`\`
|
|
4356
|
+
|
|
4357
|
+
\`\`\`jsx
|
|
4358
|
+
<DateField label="Event Date" pickerType="calendar" variant="ghost" />
|
|
4359
|
+
\`\`\`
|
|
4360
|
+
|
|
4361
|
+
\`\`\`jsx
|
|
4362
|
+
<DateField
|
|
4363
|
+
label="Event Date"
|
|
4364
|
+
pickerType="calendar"
|
|
4365
|
+
validationState="error"
|
|
4366
|
+
errorMessage="Invalid date"
|
|
4367
|
+
/>
|
|
4368
|
+
\`\`\`
|
|
4369
|
+
|
|
4306
4370
|
| Key | Function |
|
|
4307
4371
|
| ----------------- | ---------------------------------------- |
|
|
4308
4372
|
| \`ArrowLeft/Right\` | Navigate between date segments |
|
|
@@ -4342,6 +4406,15 @@ errorMessage?: string
|
|
|
4342
4406
|
* The warning message to display when the input is in a warning state.
|
|
4343
4407
|
*/
|
|
4344
4408
|
warningMessage?: string
|
|
4409
|
+
/**
|
|
4410
|
+
* Controls the calendar picker integration.
|
|
4411
|
+
* - \`"none"\`: No calendar icon or picker (default).
|
|
4412
|
+
* - \`"presentation"\`: Trailing calendar icon, non-interactive.
|
|
4413
|
+
* - \`"calendar"\`: Trailing calendar icon button that opens a Calendar popover.
|
|
4414
|
+
*
|
|
4415
|
+
* @default "none"
|
|
4416
|
+
*/
|
|
4417
|
+
pickerType?: "none" | "presentation" | "calendar"
|
|
4345
4418
|
}`,stories:{usage:[{id:"core-forms-datefield--basic",name:"Basic",snippet:'const Basic = () => <DateField onChange={fn()} aria-label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--with-label",name:"With Label",snippet:'const WithLabel = () => <DateField onChange={fn()} label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
4346
4419
|
<VariantViewer<React.ComponentProps<typeof DateField>>
|
|
4347
4420
|
cellStyle={{ minWidth: 300 }}
|
|
@@ -4659,7 +4732,50 @@ warningMessage?: string
|
|
|
4659
4732
|
onChange={fn()}
|
|
4660
4733
|
label="Label"
|
|
4661
4734
|
placeholderValue={new CalendarDate(2022, 1, 1)}
|
|
4662
|
-
granularity="day" />;`}
|
|
4735
|
+
granularity="day" />;`},{id:"core-forms-datefield--with-calendar-icon",name:"With Calendar Icon",snippet:`const WithCalendarIcon = () => <DateField
|
|
4736
|
+
onChange={fn()}
|
|
4737
|
+
label="Event Date"
|
|
4738
|
+
granularity="day"
|
|
4739
|
+
pickerType="presentation" />;`},{id:"core-forms-datefield--with-calendar-picker",name:"With Calendar Picker",snippet:`const WithCalendarPicker = () => <DateField
|
|
4740
|
+
onChange={fn()}
|
|
4741
|
+
label="Event Date"
|
|
4742
|
+
granularity="day"
|
|
4743
|
+
pickerType="calendar" />;`},{id:"core-forms-datefield--with-calendar-picker-and-default-value",name:"With Calendar Picker And Default Value",snippet:`const WithCalendarPickerAndDefaultValue = () => <DateField
|
|
4744
|
+
onChange={fn()}
|
|
4745
|
+
label="Event Date"
|
|
4746
|
+
granularity="day"
|
|
4747
|
+
pickerType="calendar"
|
|
4748
|
+
defaultValue={date} />;`},{id:"core-forms-datefield--with-calendar-picker-and-min-max",name:"With Calendar Picker And Min Max",snippet:`const WithCalendarPickerAndMinMax = () => <DateField
|
|
4749
|
+
onChange={fn()}
|
|
4750
|
+
label="Event Date"
|
|
4751
|
+
granularity="day"
|
|
4752
|
+
pickerType="calendar"
|
|
4753
|
+
minValue={new CalendarDate(2022, 1, 1)}
|
|
4754
|
+
maxValue={new CalendarDate(2022, 12, 31)}
|
|
4755
|
+
defaultValue={new CalendarDate(2022, 6, 15)} />;`},{id:"core-forms-datefield--with-calendar-picker-disabled",name:"With Calendar Picker Disabled",snippet:`const WithCalendarPickerDisabled = () => <DateField
|
|
4756
|
+
onChange={fn()}
|
|
4757
|
+
label="Event Date"
|
|
4758
|
+
granularity="day"
|
|
4759
|
+
pickerType="calendar"
|
|
4760
|
+
isDisabled
|
|
4761
|
+
defaultValue={date} />;`},{id:"core-forms-datefield--with-calendar-picker-read-only",name:"With Calendar Picker Read Only",snippet:`const WithCalendarPickerReadOnly = () => <DateField
|
|
4762
|
+
onChange={fn()}
|
|
4763
|
+
label="Event Date"
|
|
4764
|
+
granularity="day"
|
|
4765
|
+
pickerType="calendar"
|
|
4766
|
+
isReadOnly
|
|
4767
|
+
defaultValue={date} />;`},{id:"core-forms-datefield--with-calendar-picker-ghost",name:"With Calendar Picker Ghost",snippet:`const WithCalendarPickerGhost = () => <DateField
|
|
4768
|
+
onChange={fn()}
|
|
4769
|
+
label="Event Date"
|
|
4770
|
+
granularity="day"
|
|
4771
|
+
pickerType="calendar"
|
|
4772
|
+
variant="ghost" />;`},{id:"core-forms-datefield--with-calendar-picker-error",name:"With Calendar Picker Error",snippet:`const WithCalendarPickerError = () => <DateField
|
|
4773
|
+
onChange={fn()}
|
|
4774
|
+
label="Event Date"
|
|
4775
|
+
granularity="day"
|
|
4776
|
+
pickerType="calendar"
|
|
4777
|
+
validationState="error"
|
|
4778
|
+
errorMessage="Invalid date" />;`}],implementation:`import { CalendarDate, parseDate } from "@internationalized/date";
|
|
4663
4779
|
import React from "react";
|
|
4664
4780
|
|
|
4665
4781
|
import { DateField } from "../DateField";
|
|
@@ -7383,7 +7499,6 @@ orientation?: any
|
|
|
7383
7499
|
import { EllipseIcon } from "@baseline-ui/icons/16";
|
|
7384
7500
|
import { XIcon } from "@baseline-ui/icons/20";
|
|
7385
7501
|
import { themeVars } from "@baseline-ui/tokens";
|
|
7386
|
-
import { last } from "lodash";
|
|
7387
7502
|
import React, { useCallback, useRef, useState } from "react";
|
|
7388
7503
|
import { mergeProps, useButton, useFocusRing } from "react-aria";
|
|
7389
7504
|
import { useListData } from "react-stately";
|
|
@@ -7506,7 +7621,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
|
|
|
7506
7621
|
<ActionButton
|
|
7507
7622
|
label="Scroll to bottom"
|
|
7508
7623
|
onPress={() => {
|
|
7509
|
-
handleRef.current?.scrollIntoView(
|
|
7624
|
+
handleRef.current?.scrollIntoView(gridItems.at(-1)?.id ?? "", {
|
|
7510
7625
|
behavior: "smooth",
|
|
7511
7626
|
block: "end",
|
|
7512
7627
|
});
|
|
@@ -7516,7 +7631,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
|
|
|
7516
7631
|
<ActionButton
|
|
7517
7632
|
label="Focus Last Item"
|
|
7518
7633
|
onPress={() => {
|
|
7519
|
-
handleRef.current?.setFocusedKey(
|
|
7634
|
+
handleRef.current?.setFocusedKey(gridItems.at(-1)?.id ?? "");
|
|
7520
7635
|
}}
|
|
7521
7636
|
preventFocusOnPress={true}
|
|
7522
7637
|
/>
|
|
@@ -17470,7 +17585,1973 @@ statusLabel?: {
|
|
|
17470
17585
|
on: "On",
|
|
17471
17586
|
off: "Off",
|
|
17472
17587
|
}}
|
|
17473
|
-
labelPosition="left" />;`}],implementation:""},similarTo:[],figmaUrl:null},
|
|
17588
|
+
labelPosition="left" />;`}],implementation:""},similarTo:[],figmaUrl:null},Table:{id:"core-collections-table",breadcrumb:"Core/Collections/Table",importStatement:`import {
|
|
17589
|
+
ActionButton,
|
|
17590
|
+
ActionIconButton,
|
|
17591
|
+
AsyncLoadingTableExample,
|
|
17592
|
+
BasicTableExample,
|
|
17593
|
+
Box,
|
|
17594
|
+
Cell,
|
|
17595
|
+
Column,
|
|
17596
|
+
DisabledRowsTableExample,
|
|
17597
|
+
EmptyTableExample,
|
|
17598
|
+
MultipleSelectionTableExample,
|
|
17599
|
+
OnRowActionTableExample,
|
|
17600
|
+
Row,
|
|
17601
|
+
Select,
|
|
17602
|
+
SelectionCheckbox,
|
|
17603
|
+
SingleSelectionTableExample,
|
|
17604
|
+
SortableTableExample,
|
|
17605
|
+
Table,
|
|
17606
|
+
TableBody,
|
|
17607
|
+
TableHeader,
|
|
17608
|
+
TagAndMenuTableExample,
|
|
17609
|
+
Text,
|
|
17610
|
+
Toolbar,
|
|
17611
|
+
Virtualizer,
|
|
17612
|
+
VisuallyHidden,
|
|
17613
|
+
} from "@baseline-ui/core";`,description:"A fully-featured data table for displaying, selecting, sorting, and reordering tabular data. Built on react-aria-components for complete keyboard and screen reader accessibility.",documentation:`A fully-featured data table for displaying, selecting, sorting, and reordering tabular data. Built on react-aria-components for complete keyboard and screen reader accessibility.
|
|
17614
|
+
|
|
17615
|
+
* Column sorting with visual sort indicator
|
|
17616
|
+
* Row selection (single and multiple) with checkbox support
|
|
17617
|
+
* Drag-and-drop row reordering
|
|
17618
|
+
* Virtualization for large datasets
|
|
17619
|
+
* Full keyboard navigation and ARIA support
|
|
17620
|
+
|
|
17621
|
+
\`\`\`jsx
|
|
17622
|
+
import {
|
|
17623
|
+
Table,
|
|
17624
|
+
TableHeader,
|
|
17625
|
+
TableBody,
|
|
17626
|
+
Column,
|
|
17627
|
+
Row,
|
|
17628
|
+
Cell,
|
|
17629
|
+
} from "@baseline-ui/core";
|
|
17630
|
+
|
|
17631
|
+
const data = [
|
|
17632
|
+
{
|
|
17633
|
+
id: "1",
|
|
17634
|
+
name: "Annual Report.pdf",
|
|
17635
|
+
type: "PDF",
|
|
17636
|
+
size: "2.4 MB",
|
|
17637
|
+
},
|
|
17638
|
+
{
|
|
17639
|
+
id: "2",
|
|
17640
|
+
name: "Budget.xlsx",
|
|
17641
|
+
type: "Spreadsheet",
|
|
17642
|
+
size: "1.1 MB",
|
|
17643
|
+
},
|
|
17644
|
+
];
|
|
17645
|
+
|
|
17646
|
+
export function BasicTable() {
|
|
17647
|
+
return (
|
|
17648
|
+
<Table aria-label="Files">
|
|
17649
|
+
<TableHeader>
|
|
17650
|
+
<Column id="name" isRowHeader>
|
|
17651
|
+
Name
|
|
17652
|
+
</Column>
|
|
17653
|
+
<Column id="type">Type</Column>
|
|
17654
|
+
<Column id="size">Size</Column>
|
|
17655
|
+
</TableHeader>
|
|
17656
|
+
<TableBody>
|
|
17657
|
+
{data.map((row) => (
|
|
17658
|
+
<Row key={row.id} id={row.id}>
|
|
17659
|
+
<Cell>{row.name}</Cell>
|
|
17660
|
+
<Cell>{row.type}</Cell>
|
|
17661
|
+
<Cell>{row.size}</Cell>
|
|
17662
|
+
</Row>
|
|
17663
|
+
))}
|
|
17664
|
+
</TableBody>
|
|
17665
|
+
</Table>
|
|
17666
|
+
);
|
|
17667
|
+
}
|
|
17668
|
+
\`\`\`
|
|
17669
|
+
|
|
17670
|
+
Select a single row at a time with \`selectionMode="single"\`. Use the controlled state pattern with \`selectedKeys\` and \`onSelectionChange\` to track the selected row.
|
|
17671
|
+
|
|
17672
|
+
\`\`\`jsx
|
|
17673
|
+
function SingleSelectTable() {
|
|
17674
|
+
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
|
|
17675
|
+
|
|
17676
|
+
return (
|
|
17677
|
+
<Table
|
|
17678
|
+
selectionMode="single"
|
|
17679
|
+
selectedKeys={selectedKeys}
|
|
17680
|
+
onSelectionChange={setSelectedKeys}
|
|
17681
|
+
aria-label="Files"
|
|
17682
|
+
>
|
|
17683
|
+
<TableHeader>
|
|
17684
|
+
<Column id="name" isRowHeader>
|
|
17685
|
+
Name
|
|
17686
|
+
</Column>
|
|
17687
|
+
<Column id="type">Type</Column>
|
|
17688
|
+
</TableHeader>
|
|
17689
|
+
<TableBody>
|
|
17690
|
+
{data.map((row) => (
|
|
17691
|
+
<Row key={row.id} id={row.id}>
|
|
17692
|
+
<Cell>{row.name}</Cell>
|
|
17693
|
+
<Cell>{row.type}</Cell>
|
|
17694
|
+
</Row>
|
|
17695
|
+
))}
|
|
17696
|
+
</TableBody>
|
|
17697
|
+
</Table>
|
|
17698
|
+
);
|
|
17699
|
+
}
|
|
17700
|
+
\`\`\`
|
|
17701
|
+
|
|
17702
|
+
Enable multiple selection with \`selectionMode="multiple"\` and render a \`Checkbox\` component in the selection column. Include a header checkbox for selecting all rows.
|
|
17703
|
+
|
|
17704
|
+
\`\`\`jsx
|
|
17705
|
+
import { Checkbox } from "@baseline-ui/core";
|
|
17706
|
+
|
|
17707
|
+
function MultiSelectTable() {
|
|
17708
|
+
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1", "2"]));
|
|
17709
|
+
|
|
17710
|
+
return (
|
|
17711
|
+
<Table
|
|
17712
|
+
selectionMode="multiple"
|
|
17713
|
+
selectedKeys={selectedKeys}
|
|
17714
|
+
onSelectionChange={setSelectedKeys}
|
|
17715
|
+
aria-label="Files"
|
|
17716
|
+
>
|
|
17717
|
+
<TableHeader>
|
|
17718
|
+
<Column id="selection">
|
|
17719
|
+
<Checkbox slot="selection" />
|
|
17720
|
+
</Column>
|
|
17721
|
+
<Column id="name" isRowHeader>
|
|
17722
|
+
Name
|
|
17723
|
+
</Column>
|
|
17724
|
+
<Column id="type">Type</Column>
|
|
17725
|
+
</TableHeader>
|
|
17726
|
+
<TableBody>
|
|
17727
|
+
{data.map((row) => (
|
|
17728
|
+
<Row key={row.id} id={row.id}>
|
|
17729
|
+
<Cell>
|
|
17730
|
+
<Checkbox slot="selection" />
|
|
17731
|
+
</Cell>
|
|
17732
|
+
<Cell>{row.name}</Cell>
|
|
17733
|
+
<Cell>{row.type}</Cell>
|
|
17734
|
+
</Row>
|
|
17735
|
+
))}
|
|
17736
|
+
</TableBody>
|
|
17737
|
+
</Table>
|
|
17738
|
+
);
|
|
17739
|
+
}
|
|
17740
|
+
\`\`\`
|
|
17741
|
+
|
|
17742
|
+
Make columns sortable by adding \`allowsSorting={true}\` to the \`Column\` component. Track the sort state with \`sortDescriptor\` and \`onSortChange\`. The sort descriptor contains the column ID and direction ("ascending" or "descending").
|
|
17743
|
+
|
|
17744
|
+
\`\`\`jsx
|
|
17745
|
+
function SortableTable() {
|
|
17746
|
+
const [sortDescriptor, setSortDescriptor] = React.useState({
|
|
17747
|
+
column: "name",
|
|
17748
|
+
direction: "ascending",
|
|
17749
|
+
});
|
|
17750
|
+
|
|
17751
|
+
const sortedRows = React.useMemo(() => {
|
|
17752
|
+
const sorted = [...data].sort((a, b) => {
|
|
17753
|
+
const col = sortDescriptor.column;
|
|
17754
|
+
return a[col].localeCompare(b[col]);
|
|
17755
|
+
});
|
|
17756
|
+
return sortDescriptor.direction === "descending"
|
|
17757
|
+
? sorted.reverse()
|
|
17758
|
+
: sorted;
|
|
17759
|
+
}, [sortDescriptor]);
|
|
17760
|
+
|
|
17761
|
+
return (
|
|
17762
|
+
<Table
|
|
17763
|
+
sortDescriptor={sortDescriptor}
|
|
17764
|
+
onSortChange={setSortDescriptor}
|
|
17765
|
+
aria-label="Sortable files"
|
|
17766
|
+
>
|
|
17767
|
+
<TableHeader>
|
|
17768
|
+
<Column id="name" isRowHeader allowsSorting>
|
|
17769
|
+
Name
|
|
17770
|
+
</Column>
|
|
17771
|
+
<Column id="type" allowsSorting>
|
|
17772
|
+
Type
|
|
17773
|
+
</Column>
|
|
17774
|
+
</TableHeader>
|
|
17775
|
+
<TableBody>
|
|
17776
|
+
{sortedRows.map((row) => (
|
|
17777
|
+
<Row key={row.id} id={row.id}>
|
|
17778
|
+
<Cell>{row.name}</Cell>
|
|
17779
|
+
<Cell>{row.type}</Cell>
|
|
17780
|
+
</Row>
|
|
17781
|
+
))}
|
|
17782
|
+
</TableBody>
|
|
17783
|
+
</Table>
|
|
17784
|
+
);
|
|
17785
|
+
}
|
|
17786
|
+
\`\`\`
|
|
17787
|
+
|
|
17788
|
+
Enable row reordering with the \`useTableDragAndDrop\` hook. The hook accepts \`onReorder\` (and other drag-and-drop options) and returns \`{ dragAndDropHooks }\` to pass to the table.
|
|
17789
|
+
|
|
17790
|
+
\`\`\`jsx
|
|
17791
|
+
import { useTableDragAndDrop } from "@baseline-ui/core";
|
|
17792
|
+
|
|
17793
|
+
function DragAndDropTable() {
|
|
17794
|
+
const { dragAndDropHooks } = useTableDragAndDrop({
|
|
17795
|
+
onReorder: (event) => {
|
|
17796
|
+
console.log("Rows reordered:", event);
|
|
17797
|
+
},
|
|
17798
|
+
});
|
|
17799
|
+
|
|
17800
|
+
return (
|
|
17801
|
+
<Table dragAndDropHooks={dragAndDropHooks} aria-label="Reorderable files">
|
|
17802
|
+
<TableHeader>
|
|
17803
|
+
<Column id="name" isRowHeader>
|
|
17804
|
+
Name
|
|
17805
|
+
</Column>
|
|
17806
|
+
<Column id="type">Type</Column>
|
|
17807
|
+
</TableHeader>
|
|
17808
|
+
<TableBody items={data}>
|
|
17809
|
+
{(row) => (
|
|
17810
|
+
<Row key={row.id} id={row.id}>
|
|
17811
|
+
<Cell>{row.name}</Cell>
|
|
17812
|
+
<Cell>{row.type}</Cell>
|
|
17813
|
+
</Row>
|
|
17814
|
+
)}
|
|
17815
|
+
</TableBody>
|
|
17816
|
+
</Table>
|
|
17817
|
+
);
|
|
17818
|
+
}
|
|
17819
|
+
\`\`\`
|
|
17820
|
+
|
|
17821
|
+
Table supports virtualization for large datasets using the \`Virtualizer\` component. Virtualization only renders visible rows to the DOM, significantly improving performance when dealing with hundreds or thousands of rows.
|
|
17822
|
+
|
|
17823
|
+
**Important:** Table must have bounded \`height\` and \`width\` (or be constrained by flex/percentage) for virtualization to work. Without bounded dimensions, all rows render to DOM.
|
|
17824
|
+
|
|
17825
|
+
\`\`\`jsx
|
|
17826
|
+
import {
|
|
17827
|
+
Virtualizer,
|
|
17828
|
+
VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
|
|
17829
|
+
Table,
|
|
17830
|
+
} from "@baseline-ui/core";
|
|
17831
|
+
|
|
17832
|
+
function VirtualizedTable() {
|
|
17833
|
+
const largeDataset = Array.from({ length: 1000 }, (_, i) => {
|
|
17834
|
+
const sizeIndex = (i * 13) % 1000;
|
|
17835
|
+
return {
|
|
17836
|
+
id: String(i + 1),
|
|
17837
|
+
name: \`Item \${i + 1}.pdf\`,
|
|
17838
|
+
type: "PDF",
|
|
17839
|
+
size: \`\${(sizeIndex / 100).toFixed(1)} MB\`,
|
|
17840
|
+
};
|
|
17841
|
+
});
|
|
17842
|
+
|
|
17843
|
+
return (
|
|
17844
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
|
|
17845
|
+
<Table
|
|
17846
|
+
aria-label="Large file list"
|
|
17847
|
+
style={{ height: 400, width: 700, overflow: "auto" }}
|
|
17848
|
+
>
|
|
17849
|
+
<TableHeader>
|
|
17850
|
+
<Column id="name" isRowHeader>
|
|
17851
|
+
Name
|
|
17852
|
+
</Column>
|
|
17853
|
+
<Column id="type">Type</Column>
|
|
17854
|
+
<Column id="size">Size</Column>
|
|
17855
|
+
</TableHeader>
|
|
17856
|
+
<TableBody items={largeDataset}>
|
|
17857
|
+
{(row) => (
|
|
17858
|
+
<Row key={row.id} id={row.id}>
|
|
17859
|
+
<Cell>{row.name}</Cell>
|
|
17860
|
+
<Cell>{row.type}</Cell>
|
|
17861
|
+
<Cell>{row.size}</Cell>
|
|
17862
|
+
</Row>
|
|
17863
|
+
)}
|
|
17864
|
+
</TableBody>
|
|
17865
|
+
</Table>
|
|
17866
|
+
</Virtualizer>
|
|
17867
|
+
);
|
|
17868
|
+
}
|
|
17869
|
+
\`\`\`
|
|
17870
|
+
|
|
17871
|
+
Consider virtualization when:
|
|
17872
|
+
|
|
17873
|
+
* You have **100+ rows** in your table
|
|
17874
|
+
* You're experiencing performance issues with large datasets
|
|
17875
|
+
* You want to maintain smooth scrolling and interactions
|
|
17876
|
+
* Your table needs responsive performance on mobile devices
|
|
17877
|
+
|
|
17878
|
+
For smaller tables (under 100 rows), virtualization is optional and may not provide significant benefits.
|
|
17879
|
+
|
|
17880
|
+
Pass \`onLoadMore\` to \`TableBody\` to enable infinite loading. Baseline UI automatically renders the loading sentinel for you, so callers only need to manage row state and \`isLoading\`.
|
|
17881
|
+
|
|
17882
|
+
\`\`\`jsx
|
|
17883
|
+
import {
|
|
17884
|
+
Virtualizer,
|
|
17885
|
+
VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
|
|
17886
|
+
Table,
|
|
17887
|
+
} from "@baseline-ui/core";
|
|
17888
|
+
|
|
17889
|
+
function VirtualizedTableWithLoadMore() {
|
|
17890
|
+
const [rows, setRows] = React.useState(initialRows);
|
|
17891
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
|
17892
|
+
const timerRef = React.useRef(null);
|
|
17893
|
+
|
|
17894
|
+
React.useEffect(() => {
|
|
17895
|
+
return () => {
|
|
17896
|
+
if (timerRef.current !== null) clearTimeout(timerRef.current);
|
|
17897
|
+
};
|
|
17898
|
+
}, []);
|
|
17899
|
+
|
|
17900
|
+
const loadMore = React.useCallback(() => {
|
|
17901
|
+
if (isLoading) {
|
|
17902
|
+
return;
|
|
17903
|
+
}
|
|
17904
|
+
|
|
17905
|
+
setIsLoading(true);
|
|
17906
|
+
|
|
17907
|
+
timerRef.current = setTimeout(() => {
|
|
17908
|
+
setRows((currentRows) => [
|
|
17909
|
+
...currentRows,
|
|
17910
|
+
...getNextPage(currentRows.length),
|
|
17911
|
+
]);
|
|
17912
|
+
setIsLoading(false);
|
|
17913
|
+
}, 300);
|
|
17914
|
+
}, [isLoading]);
|
|
17915
|
+
|
|
17916
|
+
return (
|
|
17917
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
|
|
17918
|
+
<Table
|
|
17919
|
+
aria-label="Large file list"
|
|
17920
|
+
style={{ height: 400, width: 700, overflow: "auto" }}
|
|
17921
|
+
>
|
|
17922
|
+
<TableHeader>
|
|
17923
|
+
<Column id="name" isRowHeader>
|
|
17924
|
+
Name
|
|
17925
|
+
</Column>
|
|
17926
|
+
<Column id="type">Type</Column>
|
|
17927
|
+
<Column id="size">Size</Column>
|
|
17928
|
+
</TableHeader>
|
|
17929
|
+
<TableBody items={rows} onLoadMore={loadMore} isLoading={isLoading}>
|
|
17930
|
+
{(row) => (
|
|
17931
|
+
<Row key={row.id} id={row.id}>
|
|
17932
|
+
<Cell>{row.name}</Cell>
|
|
17933
|
+
<Cell>{row.type}</Cell>
|
|
17934
|
+
<Cell>{row.size}</Cell>
|
|
17935
|
+
</Row>
|
|
17936
|
+
)}
|
|
17937
|
+
</TableBody>
|
|
17938
|
+
</Table>
|
|
17939
|
+
</Virtualizer>
|
|
17940
|
+
);
|
|
17941
|
+
}
|
|
17942
|
+
\`\`\`
|
|
17943
|
+
|
|
17944
|
+
Combine Table with the \`Toolbar\` component to provide contextual actions for selected rows. Show the toolbar conditionally based on selection state.
|
|
17945
|
+
|
|
17946
|
+
\`\`\`jsx
|
|
17947
|
+
import { Toolbar } from "@baseline-ui/core";
|
|
17948
|
+
|
|
17949
|
+
function TableWithToolbar() {
|
|
17950
|
+
const [selectedKeys, setSelectedKeys] = React.useState(new Set());
|
|
17951
|
+
|
|
17952
|
+
return (
|
|
17953
|
+
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
|
17954
|
+
{selectedKeys.size > 0 && (
|
|
17955
|
+
<Toolbar aria-label="File actions">
|
|
17956
|
+
<div style={{ padding: "8px 16px" }}>
|
|
17957
|
+
{selectedKeys.size} file(s) selected
|
|
17958
|
+
</div>
|
|
17959
|
+
</Toolbar>
|
|
17960
|
+
)}
|
|
17961
|
+
<Table
|
|
17962
|
+
selectionMode="multiple"
|
|
17963
|
+
selectedKeys={selectedKeys}
|
|
17964
|
+
onSelectionChange={setSelectedKeys}
|
|
17965
|
+
aria-label="Files"
|
|
17966
|
+
>
|
|
17967
|
+
<TableHeader>
|
|
17968
|
+
<Column id="selection">
|
|
17969
|
+
<Checkbox slot="selection" />
|
|
17970
|
+
</Column>
|
|
17971
|
+
<Column id="name" isRowHeader>
|
|
17972
|
+
Name
|
|
17973
|
+
</Column>
|
|
17974
|
+
<Column id="type">Type</Column>
|
|
17975
|
+
</TableHeader>
|
|
17976
|
+
<TableBody>
|
|
17977
|
+
{data.map((row) => (
|
|
17978
|
+
<Row key={row.id} id={row.id}>
|
|
17979
|
+
<Cell>
|
|
17980
|
+
<Checkbox slot="selection" />
|
|
17981
|
+
</Cell>
|
|
17982
|
+
<Cell>{row.name}</Cell>
|
|
17983
|
+
<Cell>{row.type}</Cell>
|
|
17984
|
+
</Row>
|
|
17985
|
+
))}
|
|
17986
|
+
</TableBody>
|
|
17987
|
+
</Table>
|
|
17988
|
+
</div>
|
|
17989
|
+
);
|
|
17990
|
+
}
|
|
17991
|
+
\`\`\`
|
|
17992
|
+
|
|
17993
|
+
Prevent specific rows from being selected by passing a set of keys to \`disabledKeys\`. Disabled rows are visually dimmed and cannot be selected via click or keyboard. By default (\`disabledBehavior="selection"\`), disabled rows can still receive keyboard focus. Pass \`disabledBehavior="all"\` to skip them during keyboard navigation entirely.
|
|
17994
|
+
|
|
17995
|
+
\`\`\`jsx
|
|
17996
|
+
<Table
|
|
17997
|
+
selectionMode="multiple"
|
|
17998
|
+
selectedKeys={selectedKeys}
|
|
17999
|
+
onSelectionChange={setSelectedKeys}
|
|
18000
|
+
disabledKeys={new Set(["3"])}
|
|
18001
|
+
aria-label="Files"
|
|
18002
|
+
>
|
|
18003
|
+
{/* ... columns and rows */}
|
|
18004
|
+
</Table>
|
|
18005
|
+
\`\`\`
|
|
18006
|
+
|
|
18007
|
+
Trigger an action when a row is activated with \`onRowAction\`. When no selection mode is set, a single click or Enter key triggers the action. When combined with selection mode, React Aria uses \`selectionBehavior="replace"\` by default \u2014 clicking triggers the action while selection requires checkboxes or long-press.
|
|
18008
|
+
|
|
18009
|
+
\`\`\`jsx
|
|
18010
|
+
<Table aria-label="Files" onRowAction={(key) => console.log("Opened", key)}>
|
|
18011
|
+
<TableHeader>
|
|
18012
|
+
<Column id="name" isRowHeader>
|
|
18013
|
+
Name
|
|
18014
|
+
</Column>
|
|
18015
|
+
<Column id="type">Type</Column>
|
|
18016
|
+
</TableHeader>
|
|
18017
|
+
<TableBody>
|
|
18018
|
+
{data.map((row) => (
|
|
18019
|
+
<Row key={row.id} id={row.id}>
|
|
18020
|
+
<Cell>{row.name}</Cell>
|
|
18021
|
+
<Cell>{row.type}</Cell>
|
|
18022
|
+
</Row>
|
|
18023
|
+
))}
|
|
18024
|
+
</TableBody>
|
|
18025
|
+
</Table>
|
|
18026
|
+
\`\`\`
|
|
18027
|
+
|
|
18028
|
+
Use the \`renderEmptyState\` prop on \`TableBody\` to display a message when there are no rows.
|
|
18029
|
+
|
|
18030
|
+
\`\`\`jsx
|
|
18031
|
+
<Table aria-label="Files">
|
|
18032
|
+
<TableHeader>
|
|
18033
|
+
<Column id="name" isRowHeader>
|
|
18034
|
+
Name
|
|
18035
|
+
</Column>
|
|
18036
|
+
<Column id="type">Type</Column>
|
|
18037
|
+
</TableHeader>
|
|
18038
|
+
<TableBody items={[]} renderEmptyState={() => "No items"}>
|
|
18039
|
+
{(row) => (
|
|
18040
|
+
<Row key={row.id} id={row.id}>
|
|
18041
|
+
<Cell>{row.name}</Cell>
|
|
18042
|
+
<Cell>{row.type}</Cell>
|
|
18043
|
+
</Row>
|
|
18044
|
+
)}
|
|
18045
|
+
</TableBody>
|
|
18046
|
+
</Table>
|
|
18047
|
+
\`\`\`
|
|
18048
|
+
|
|
18049
|
+
| Key | Function |
|
|
18050
|
+
| --------------------- | -------------------------------------------------- |
|
|
18051
|
+
| \`Arrow Up/Down\` | Move focus between rows |
|
|
18052
|
+
| \`Arrow Left/Right\` | Move focus between cells |
|
|
18053
|
+
| \`Space\` | Toggle row selection (in selection mode) |
|
|
18054
|
+
| \`Enter\` | Trigger sort on column header / trigger row action |
|
|
18055
|
+
| \`Tab\` | Move focus to next interactive element |
|
|
18056
|
+
| \`Home\` | Move focus to first row |
|
|
18057
|
+
| \`End\` | Move focus to last row |
|
|
18058
|
+
| \`Ctrl+A\` | Select all rows (in multiple selection mode) |
|
|
18059
|
+
| \`Escape\` | Clear selection |
|
|
18060
|
+
| \`Shift+Arrow Up/Down\` | Extend selection in the arrow direction |
|
|
18061
|
+
|
|
18062
|
+
| Selector | Description |
|
|
18063
|
+
| -------------------------------------- | --------------------------------------------------------- |
|
|
18064
|
+
| \`.BaselineUI-Table\` | Root table element |
|
|
18065
|
+
| \`.BaselineUI-TableHeader\` | Table header section |
|
|
18066
|
+
| \`.BaselineUI-Column\` | Column header cell |
|
|
18067
|
+
| \`.BaselineUI-TableBody\` | Table body section |
|
|
18068
|
+
| \`.BaselineUI-Row\` | Data row |
|
|
18069
|
+
| \`.BaselineUI-Cell\` | Data cell |
|
|
18070
|
+
| \`.BaselineUI-DropIndicator\` | DnD drop indicator |
|
|
18071
|
+
| \`.BaselineUI-TableLoadMoreItem\` | Load-more sentinel row (present when \`onLoadMore\` is set) |
|
|
18072
|
+
| \`.BaselineUI-TableLoadMoreItemContent\` | Container for the loading spinner inside the sentinel |
|
|
18073
|
+
| \`[data-selected]\` | Applied to selected rows |
|
|
18074
|
+
| \`[data-focused]\` | Applied to focused row (any focus source) |
|
|
18075
|
+
| \`[data-focus-visible]\` | Applied to rows/cells focused via keyboard |
|
|
18076
|
+
| \`[data-hovered]\` | Applied to hovered rows |
|
|
18077
|
+
| \`[data-disabled]\` | Applied to disabled rows |
|
|
18078
|
+
| \`[data-allows-sorting]\` | Applied to sortable columns |
|
|
18079
|
+
| \`[aria-sort]\` | Applied to sorted columns (ascending/descending) |
|
|
18080
|
+
| \`[data-drop-target]\` | Applied to DnD drop target rows |
|
|
18081
|
+
|
|
18082
|
+
* **Checkbox** \u2014 for row selection in multiple-selection mode
|
|
18083
|
+
* **Virtualizer** \u2014 for performance with large datasets
|
|
18084
|
+
* **Toolbar** \u2014 for contextual actions on selected rows
|
|
18085
|
+
* **Tag** \u2014 for displaying status badges in cells
|
|
18086
|
+
* **Menu** \u2014 for row-level action menus`,props:`interface TableProps {
|
|
18087
|
+
/**
|
|
18088
|
+
* Overrides the default DOM element with a custom render function.
|
|
18089
|
+
* This allows rendering existing components with built-in styles and behaviors
|
|
18090
|
+
* such as router links, animation libraries, and pre-styled components.
|
|
18091
|
+
*
|
|
18092
|
+
* Requirements:
|
|
18093
|
+
*
|
|
18094
|
+
* * You must render the expected element type (e.g. if \`<button>\` is expected, you cannot render an \`<a>\`).
|
|
18095
|
+
* * Only a single root DOM element can be rendered (no fragments).
|
|
18096
|
+
* * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
|
|
18097
|
+
*/
|
|
18098
|
+
render?: (props: React.JSX.IntrinsicElements[E], renderProps: T) => ReactElement
|
|
18099
|
+
/**
|
|
18100
|
+
* The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
|
|
18101
|
+
*/
|
|
18102
|
+
className?: string | ((values: T & {defaultClassName: string | undefined}) => string)
|
|
18103
|
+
/**
|
|
18104
|
+
* The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
|
|
18105
|
+
*/
|
|
18106
|
+
style?: CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined)
|
|
18107
|
+
/**
|
|
18108
|
+
* A slot name for the component. Slots allow the component to receive props from a parent component.
|
|
18109
|
+
* An explicit \`null\` value indicates that the local props completely override all props received from a parent.
|
|
18110
|
+
*/
|
|
18111
|
+
slot?: string | null
|
|
18112
|
+
/**
|
|
18113
|
+
* The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
|
|
18114
|
+
*/
|
|
18115
|
+
children?: ReactNode
|
|
18116
|
+
/**
|
|
18117
|
+
* How multiple selection should behave in the collection.
|
|
18118
|
+
* @default "toggle"
|
|
18119
|
+
*/
|
|
18120
|
+
selectionBehavior?: SelectionBehavior
|
|
18121
|
+
/**
|
|
18122
|
+
* Whether \`disabledKeys\` applies to all interactions, or only selection.
|
|
18123
|
+
* @default "all"
|
|
18124
|
+
*/
|
|
18125
|
+
disabledBehavior?: DisabledBehavior
|
|
18126
|
+
/**
|
|
18127
|
+
* Handler that is called when a user performs an action on the row.
|
|
18128
|
+
*/
|
|
18129
|
+
onRowAction?: (key: Key) => void
|
|
18130
|
+
/**
|
|
18131
|
+
* The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for the Table.
|
|
18132
|
+
*/
|
|
18133
|
+
dragAndDropHooks?: DragHooks<T> & DropHooks
|
|
18134
|
+
}`,stories:{usage:[{id:"core-collections-table--default",name:"Default",snippet:"const Default = () => <BasicTableExample />;",description:"Basic table with columns and rows, no interactivity"},{id:"core-collections-table--single-selection",name:"Single Selection",snippet:"const SingleSelection = () => <SingleSelectionTableExample />;",description:"Single selection mode with controlled state"},{id:"core-collections-table--multiple-selection",name:"Multiple Selection",snippet:"const MultipleSelection = () => <MultipleSelectionTableExample />;",description:"Multiple selection mode with checkbox column and select-all header"},{id:"core-collections-table--sorting",name:"Sorting",snippet:"const Sorting = () => <SortableTableExample />;",description:"Sortable columns with sort descriptor and client-side sorting"},{id:"core-collections-table--empty",name:"Empty",snippet:"const Empty = () => <EmptyTableExample />;",description:"Empty table with no rows"},{id:"core-collections-table--row-action",name:"Row Action",snippet:`const RowAction = () => (
|
|
18135
|
+
<OnRowActionTableExample
|
|
18136
|
+
onRowAction={(key) => {
|
|
18137
|
+
alert(\`Row action: \${key}\`);
|
|
18138
|
+
}}
|
|
18139
|
+
/>
|
|
18140
|
+
);`,description:"Table with onRowAction callback"},{id:"core-collections-table--drag-and-drop",name:"Drag And Drop",snippet:`const DragAndDrop = () => {
|
|
18141
|
+
const list = useListData({ initialItems: rows });
|
|
18142
|
+
|
|
18143
|
+
const { dragAndDropHooks } = useTableDragAndDrop({
|
|
18144
|
+
onReorder: (e: DroppableCollectionReorderEvent) => {
|
|
18145
|
+
if (e.target.dropPosition === "before") {
|
|
18146
|
+
list.moveBefore(e.target.key, e.keys);
|
|
18147
|
+
} else if (e.target.dropPosition === "after") {
|
|
18148
|
+
list.moveAfter(e.target.key, e.keys);
|
|
18149
|
+
}
|
|
18150
|
+
},
|
|
18151
|
+
});
|
|
18152
|
+
|
|
18153
|
+
return (
|
|
18154
|
+
<Table dragAndDropHooks={dragAndDropHooks} aria-label="Files with drag and drop">
|
|
18155
|
+
<TableHeader>
|
|
18156
|
+
<Column id="drag">
|
|
18157
|
+
<VisuallyHidden>Drag handle</VisuallyHidden>
|
|
18158
|
+
</Column>
|
|
18159
|
+
<Column id="name" isRowHeader={true}>Name
|
|
18160
|
+
</Column>
|
|
18161
|
+
<Column id="type">Type</Column>
|
|
18162
|
+
<Column id="size">Size</Column>
|
|
18163
|
+
<Column id="modified">Date Modified</Column>
|
|
18164
|
+
</TableHeader>
|
|
18165
|
+
<TableBody items={list.items}>
|
|
18166
|
+
{(row) => {
|
|
18167
|
+
const typedRow = row as (typeof rows)[0];
|
|
18168
|
+
return (
|
|
18169
|
+
<Row key={typedRow.id} id={String(typedRow.id)}>
|
|
18170
|
+
<Cell>
|
|
18171
|
+
<ActionIconButton
|
|
18172
|
+
slot="drag"
|
|
18173
|
+
icon={DragIndicatorIcon}
|
|
18174
|
+
variant="ghost"
|
|
18175
|
+
size="xs"
|
|
18176
|
+
aria-label="Drag"
|
|
18177
|
+
/>
|
|
18178
|
+
</Cell>
|
|
18179
|
+
<Cell>
|
|
18180
|
+
<Text type="body" size="sm">
|
|
18181
|
+
{typedRow.name}
|
|
18182
|
+
</Text>
|
|
18183
|
+
</Cell>
|
|
18184
|
+
<Cell>
|
|
18185
|
+
<Text type="body" size="sm">
|
|
18186
|
+
{typedRow.type}
|
|
18187
|
+
</Text>
|
|
18188
|
+
</Cell>
|
|
18189
|
+
<Cell>
|
|
18190
|
+
<Text type="body" size="sm">
|
|
18191
|
+
{typedRow.size}
|
|
18192
|
+
</Text>
|
|
18193
|
+
</Cell>
|
|
18194
|
+
<Cell>
|
|
18195
|
+
<Text type="body" size="sm">
|
|
18196
|
+
{typedRow.modified}
|
|
18197
|
+
</Text>
|
|
18198
|
+
</Cell>
|
|
18199
|
+
</Row>
|
|
18200
|
+
);
|
|
18201
|
+
}}
|
|
18202
|
+
</TableBody>
|
|
18203
|
+
</Table>
|
|
18204
|
+
);
|
|
18205
|
+
};`,description:"Drag-and-drop row reordering using useTableDragAndDrop hook. Uses ActionIconButton for the drag handle (the shared component uses a plain button)."},{id:"core-collections-table--virtualized",name:"Virtualized",snippet:`const Virtualized = () => {
|
|
18206
|
+
const largeDataset = generateLargeDataset(1000);
|
|
18207
|
+
|
|
18208
|
+
return (
|
|
18209
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
|
|
18210
|
+
<Table
|
|
18211
|
+
aria-label="Virtualized files (1000 rows)"
|
|
18212
|
+
style={{ height: 400, width: 700, overflow: "auto" }}>
|
|
18213
|
+
<TableHeader>
|
|
18214
|
+
<Column id="name" isRowHeader={true}>Name
|
|
18215
|
+
</Column>
|
|
18216
|
+
<Column id="type">Type</Column>
|
|
18217
|
+
<Column id="size">Size</Column>
|
|
18218
|
+
<Column id="modified">Date Modified</Column>
|
|
18219
|
+
</TableHeader>
|
|
18220
|
+
<TableBody items={largeDataset}>
|
|
18221
|
+
{(row) => {
|
|
18222
|
+
const typedRow = row as ReturnType<
|
|
18223
|
+
typeof generateLargeDataset
|
|
18224
|
+
>[0];
|
|
18225
|
+
return (
|
|
18226
|
+
<Row key={typedRow.id} id={String(typedRow.id)}>
|
|
18227
|
+
<Cell>
|
|
18228
|
+
<Text type="body" size="sm">
|
|
18229
|
+
{typedRow.name}
|
|
18230
|
+
</Text>
|
|
18231
|
+
</Cell>
|
|
18232
|
+
<Cell>
|
|
18233
|
+
<Text type="body" size="sm">
|
|
18234
|
+
{typedRow.type}
|
|
18235
|
+
</Text>
|
|
18236
|
+
</Cell>
|
|
18237
|
+
<Cell>
|
|
18238
|
+
<Text type="body" size="sm">
|
|
18239
|
+
{typedRow.size}
|
|
18240
|
+
</Text>
|
|
18241
|
+
</Cell>
|
|
18242
|
+
<Cell>
|
|
18243
|
+
<Text type="body" size="sm">
|
|
18244
|
+
{typedRow.modified}
|
|
18245
|
+
</Text>
|
|
18246
|
+
</Cell>
|
|
18247
|
+
</Row>
|
|
18248
|
+
);
|
|
18249
|
+
}}
|
|
18250
|
+
</TableBody>
|
|
18251
|
+
</Table>
|
|
18252
|
+
</Virtualizer>
|
|
18253
|
+
);
|
|
18254
|
+
};`,description:"Virtualized table with 1000 rows for large datasets"},{id:"core-collections-table--async-loading",name:"Async Loading",snippet:"const AsyncLoading = () => <AsyncLoadingTableExample loadingDelay={1200} />;",description:"Virtualized table demonstrating async loading near the end of the current rows."},{id:"core-collections-table--with-toolbar",name:"With Toolbar",snippet:`const WithToolbar = () => {
|
|
18255
|
+
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(
|
|
18256
|
+
new Set(["1"]),
|
|
18257
|
+
);
|
|
18258
|
+
|
|
18259
|
+
const selectedCount =
|
|
18260
|
+
selectedKeys === "all"
|
|
18261
|
+
? wideRows.length
|
|
18262
|
+
: (selectedKeys as Set<React.Key>).size;
|
|
18263
|
+
|
|
18264
|
+
const hasSelection = selectedCount > 0;
|
|
18265
|
+
|
|
18266
|
+
return (
|
|
18267
|
+
<Box
|
|
18268
|
+
display="flex"
|
|
18269
|
+
flexDirection="column"
|
|
18270
|
+
style={{ minWidth: 900, marginTop: -50 }}>
|
|
18271
|
+
<Toolbar aria-label="Selection actions">
|
|
18272
|
+
<Box
|
|
18273
|
+
display="flex"
|
|
18274
|
+
alignItems="center"
|
|
18275
|
+
justifyContent="space-between"
|
|
18276
|
+
width="full"
|
|
18277
|
+
paddingX="lg"
|
|
18278
|
+
backgroundColor="support.info.subtler"
|
|
18279
|
+
style={{ height: 48 }}>
|
|
18280
|
+
<Text type="label" size="md">
|
|
18281
|
+
{selectedCount}item{selectedCount === 1 ? "" : "s"}selected
|
|
18282
|
+
</Text>
|
|
18283
|
+
<Box display="flex" alignItems="center" gap="sm">
|
|
18284
|
+
<ActionButton
|
|
18285
|
+
label="Copy"
|
|
18286
|
+
iconStart={CopyIcon}
|
|
18287
|
+
variant="ghost"
|
|
18288
|
+
size="sm"
|
|
18289
|
+
isDisabled={!hasSelection}
|
|
18290
|
+
onPress={() => {}} />
|
|
18291
|
+
<ActionButton
|
|
18292
|
+
label="Edit"
|
|
18293
|
+
iconStart={EditIcon}
|
|
18294
|
+
variant="ghost"
|
|
18295
|
+
size="sm"
|
|
18296
|
+
isDisabled={!hasSelection}
|
|
18297
|
+
onPress={() => {}} />
|
|
18298
|
+
<ActionButton
|
|
18299
|
+
label="Export"
|
|
18300
|
+
iconStart={DownloadIcon}
|
|
18301
|
+
variant="ghost"
|
|
18302
|
+
size="sm"
|
|
18303
|
+
isDisabled={!hasSelection}
|
|
18304
|
+
onPress={() => {}} />
|
|
18305
|
+
<ActionButton
|
|
18306
|
+
label="Delete"
|
|
18307
|
+
iconStart={TrashIcon}
|
|
18308
|
+
variant="ghost"
|
|
18309
|
+
size="sm"
|
|
18310
|
+
isDisabled={!hasSelection}
|
|
18311
|
+
onPress={() => {}} />
|
|
18312
|
+
<ActionButton
|
|
18313
|
+
label="Cancel"
|
|
18314
|
+
variant="secondary"
|
|
18315
|
+
size="sm"
|
|
18316
|
+
isDisabled={!hasSelection}
|
|
18317
|
+
onPress={() => {
|
|
18318
|
+
setSelectedKeys(new Set());
|
|
18319
|
+
}} />
|
|
18320
|
+
</Box>
|
|
18321
|
+
</Box>
|
|
18322
|
+
</Toolbar>
|
|
18323
|
+
<Table
|
|
18324
|
+
selectionMode="multiple"
|
|
18325
|
+
selectedKeys={selectedKeys}
|
|
18326
|
+
onSelectionChange={(keys: Selection) => {
|
|
18327
|
+
setSelectedKeys(keys);
|
|
18328
|
+
}}
|
|
18329
|
+
aria-label="Files">
|
|
18330
|
+
<TableHeader>
|
|
18331
|
+
<Column id="selection">
|
|
18332
|
+
<SelectionCheckbox />
|
|
18333
|
+
</Column>
|
|
18334
|
+
<Column id="name" isRowHeader={true}>Name
|
|
18335
|
+
</Column>
|
|
18336
|
+
<Column id="type">Type</Column>
|
|
18337
|
+
<Column id="size">Size</Column>
|
|
18338
|
+
<Column id="owner">Owner</Column>
|
|
18339
|
+
<Column id="status">Status</Column>
|
|
18340
|
+
<Column id="modified">Date Modified</Column>
|
|
18341
|
+
</TableHeader>
|
|
18342
|
+
<TableBody>
|
|
18343
|
+
{wideRows.map((row) => (
|
|
18344
|
+
<Row key={row.id} id={row.id}>
|
|
18345
|
+
<Cell>
|
|
18346
|
+
<SelectionCheckbox />
|
|
18347
|
+
</Cell>
|
|
18348
|
+
<Cell>
|
|
18349
|
+
<Text type="body" size="sm">
|
|
18350
|
+
{row.name}
|
|
18351
|
+
</Text>
|
|
18352
|
+
</Cell>
|
|
18353
|
+
<Cell>
|
|
18354
|
+
<Text type="body" size="sm">
|
|
18355
|
+
{row.type}
|
|
18356
|
+
</Text>
|
|
18357
|
+
</Cell>
|
|
18358
|
+
<Cell>
|
|
18359
|
+
<Text type="body" size="sm">
|
|
18360
|
+
{row.size}
|
|
18361
|
+
</Text>
|
|
18362
|
+
</Cell>
|
|
18363
|
+
<Cell>
|
|
18364
|
+
<Text type="body" size="sm">
|
|
18365
|
+
{row.owner}
|
|
18366
|
+
</Text>
|
|
18367
|
+
</Cell>
|
|
18368
|
+
<Cell>
|
|
18369
|
+
<Text type="body" size="sm">
|
|
18370
|
+
{row.status}
|
|
18371
|
+
</Text>
|
|
18372
|
+
</Cell>
|
|
18373
|
+
<Cell>
|
|
18374
|
+
<Text type="body" size="sm">
|
|
18375
|
+
{row.modified}
|
|
18376
|
+
</Text>
|
|
18377
|
+
</Cell>
|
|
18378
|
+
</Row>
|
|
18379
|
+
))}
|
|
18380
|
+
</TableBody>
|
|
18381
|
+
</Table>
|
|
18382
|
+
</Box>
|
|
18383
|
+
);
|
|
18384
|
+
};`,description:"Table composed with Toolbar for selection actions, matching the Figma toolbar pattern"},{id:"core-collections-table--with-tag-and-menu",name:"With Tag And Menu",snippet:"const WithTagAndMenu = () => <TagAndMenuTableExample />;",description:"Table with Tag for status display and Menu for row actions"},{id:"core-collections-table--selection-with-row-action",name:"Selection With Row Action",snippet:`const SelectionWithRowAction = () => {
|
|
18385
|
+
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(
|
|
18386
|
+
new Set(),
|
|
18387
|
+
);
|
|
18388
|
+
|
|
18389
|
+
return (
|
|
18390
|
+
<Table
|
|
18391
|
+
selectionMode="multiple"
|
|
18392
|
+
selectedKeys={selectedKeys}
|
|
18393
|
+
onSelectionChange={(keys: Selection) => {
|
|
18394
|
+
setSelectedKeys(keys);
|
|
18395
|
+
}}
|
|
18396
|
+
onRowAction={(key) => {
|
|
18397
|
+
alert(\`Action on row \${key}\`);
|
|
18398
|
+
}}
|
|
18399
|
+
aria-label="Files with selection and action"
|
|
18400
|
+
>
|
|
18401
|
+
<TableHeader>
|
|
18402
|
+
<Column id="selection">
|
|
18403
|
+
<SelectionCheckbox />
|
|
18404
|
+
</Column>
|
|
18405
|
+
<Column id="name" isRowHeader={true}>
|
|
18406
|
+
Name
|
|
18407
|
+
</Column>
|
|
18408
|
+
<Column id="type">Type</Column>
|
|
18409
|
+
<Column id="size">Size</Column>
|
|
18410
|
+
<Column id="modified">Date Modified</Column>
|
|
18411
|
+
</TableHeader>
|
|
18412
|
+
<TableBody>
|
|
18413
|
+
{rows.map((row) => (
|
|
18414
|
+
<Row key={row.id} id={row.id}>
|
|
18415
|
+
<Cell>
|
|
18416
|
+
<SelectionCheckbox />
|
|
18417
|
+
</Cell>
|
|
18418
|
+
<Cell>
|
|
18419
|
+
<Text type="body" size="sm">
|
|
18420
|
+
{row.name}
|
|
18421
|
+
</Text>
|
|
18422
|
+
</Cell>
|
|
18423
|
+
<Cell>
|
|
18424
|
+
<Text type="body" size="sm">
|
|
18425
|
+
{row.type}
|
|
18426
|
+
</Text>
|
|
18427
|
+
</Cell>
|
|
18428
|
+
<Cell>
|
|
18429
|
+
<Text type="body" size="sm">
|
|
18430
|
+
{row.size}
|
|
18431
|
+
</Text>
|
|
18432
|
+
</Cell>
|
|
18433
|
+
<Cell>
|
|
18434
|
+
<Text type="body" size="sm">
|
|
18435
|
+
{row.modified}
|
|
18436
|
+
</Text>
|
|
18437
|
+
</Cell>
|
|
18438
|
+
</Row>
|
|
18439
|
+
))}
|
|
18440
|
+
</TableBody>
|
|
18441
|
+
</Table>
|
|
18442
|
+
);
|
|
18443
|
+
};`,description:'Row action combined with selection mode. Click triggers the action; use checkboxes or long-press for selection (selectionBehavior="replace").'},{id:"core-collections-table--long-text-content",name:"Long Text Content",snippet:`const LongTextContent = () => {
|
|
18444
|
+
const longRows = [
|
|
18445
|
+
{
|
|
18446
|
+
id: "1",
|
|
18447
|
+
name: "Very Long Filename That Exceeds Normal Column Width and Should Demonstrate Truncation Behavior.pdf",
|
|
18448
|
+
type: "PDF",
|
|
18449
|
+
description:
|
|
18450
|
+
"This is a very long description that contains multiple sentences to test how the table handles text overflow in cells. It should wrap or truncate depending on the CSS configuration.",
|
|
18451
|
+
},
|
|
18452
|
+
{
|
|
18453
|
+
id: "2",
|
|
18454
|
+
name: "Short.txt",
|
|
18455
|
+
type: "Text",
|
|
18456
|
+
description: "Brief description.",
|
|
18457
|
+
},
|
|
18458
|
+
{
|
|
18459
|
+
id: "3",
|
|
18460
|
+
name: "Another-Extremely-Long-Filename-Without-Spaces-That-Tests-Word-Break-Behavior-In-Table-Cells.xlsx",
|
|
18461
|
+
type: "Spreadsheet",
|
|
18462
|
+
description:
|
|
18463
|
+
"Hyphenated-words-and-camelCase-content-that-tests-different-word-break-scenarios.",
|
|
18464
|
+
},
|
|
18465
|
+
];
|
|
18466
|
+
|
|
18467
|
+
return (
|
|
18468
|
+
<Table aria-label="Files with long text" style={{ width: 600 }}>
|
|
18469
|
+
<TableHeader>
|
|
18470
|
+
<Column id="name" isRowHeader={true}>Name
|
|
18471
|
+
</Column>
|
|
18472
|
+
<Column id="type">Type</Column>
|
|
18473
|
+
<Column id="description">Description</Column>
|
|
18474
|
+
</TableHeader>
|
|
18475
|
+
<TableBody>
|
|
18476
|
+
{longRows.map((row) => (
|
|
18477
|
+
<Row key={row.id} id={row.id}>
|
|
18478
|
+
<Cell>
|
|
18479
|
+
<Text type="body" size="sm">
|
|
18480
|
+
{row.name}
|
|
18481
|
+
</Text>
|
|
18482
|
+
</Cell>
|
|
18483
|
+
<Cell>
|
|
18484
|
+
<Text type="body" size="sm">
|
|
18485
|
+
{row.type}
|
|
18486
|
+
</Text>
|
|
18487
|
+
</Cell>
|
|
18488
|
+
<Cell>
|
|
18489
|
+
<Text type="body" size="sm">
|
|
18490
|
+
{row.description}
|
|
18491
|
+
</Text>
|
|
18492
|
+
</Cell>
|
|
18493
|
+
</Row>
|
|
18494
|
+
))}
|
|
18495
|
+
</TableBody>
|
|
18496
|
+
</Table>
|
|
18497
|
+
);
|
|
18498
|
+
};`,description:"Long text content to demonstrate cell truncation and wrapping behavior."},{id:"core-collections-table--disabled-rows",name:"Disabled Rows",snippet:`const DisabledRows = () => {
|
|
18499
|
+
const [disabledBehavior, setDisabledBehavior] = React.useState<
|
|
18500
|
+
"selection" | "all"
|
|
18501
|
+
>("selection");
|
|
18502
|
+
|
|
18503
|
+
return (
|
|
18504
|
+
<Box display="flex" flexDirection="column" gap="lg">
|
|
18505
|
+
<Select
|
|
18506
|
+
label="disabledBehavior"
|
|
18507
|
+
labelPosition="start"
|
|
18508
|
+
selectedKey={disabledBehavior}
|
|
18509
|
+
onSelectionChange={(key) => {
|
|
18510
|
+
setDisabledBehavior(key as "selection" | "all");
|
|
18511
|
+
}}
|
|
18512
|
+
items={[
|
|
18513
|
+
{ id: "selection", label: "selection" },
|
|
18514
|
+
{ id: "all", label: "all" },
|
|
18515
|
+
]}
|
|
18516
|
+
/>
|
|
18517
|
+
<DisabledRowsTableExample disabledBehavior={disabledBehavior} />
|
|
18518
|
+
</Box>
|
|
18519
|
+
);
|
|
18520
|
+
};`,description:'Rows with ID "3" are disabled by default. Use the select to switch between `"selection"` (default \u2014 disabled rows can still receive focus but cannot be selected) and `"all"` (disabled rows are completely skipped during keyboard navigation).'}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/20";
|
|
18521
|
+
import { SearchIcon } from "@baseline-ui/icons/24";
|
|
18522
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
18523
|
+
import { VisuallyHidden } from "react-aria";
|
|
18524
|
+
import { Button } from "react-aria-components";
|
|
18525
|
+
import { useListData } from "react-stately";
|
|
18526
|
+
|
|
18527
|
+
import { ActionButton } from "../../ActionButton";
|
|
18528
|
+
import { Box } from "../../Box";
|
|
18529
|
+
import { Checkbox } from "../../Checkbox";
|
|
18530
|
+
import { Menu } from "../../Menu";
|
|
18531
|
+
import { Tag } from "../../Tag";
|
|
18532
|
+
import { Text } from "../../Text";
|
|
18533
|
+
import {
|
|
18534
|
+
VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
|
|
18535
|
+
Virtualizer,
|
|
18536
|
+
} from "../../Virtualizer";
|
|
18537
|
+
import { useTableDragAndDrop } from "../hooks/useTableDragAndDrop";
|
|
18538
|
+
import { Cell, Column, Row, Table, TableBody, TableHeader } from "../Table";
|
|
18539
|
+
|
|
18540
|
+
import type { TagVariant } from "../../Tag";
|
|
18541
|
+
import type { DroppableCollectionReorderEvent } from "@react-types/shared";
|
|
18542
|
+
import type { Selection, SortDescriptor } from "react-aria-components";
|
|
18543
|
+
|
|
18544
|
+
// ---------------------------------------------------------------------------
|
|
18545
|
+
// Shared helpers
|
|
18546
|
+
// ---------------------------------------------------------------------------
|
|
18547
|
+
|
|
18548
|
+
export function SelectionCheckbox() {
|
|
18549
|
+
return <Checkbox slot="selection" />;
|
|
18550
|
+
}
|
|
18551
|
+
|
|
18552
|
+
/** Shared row data used by most table examples. */
|
|
18553
|
+
export const rows = [
|
|
18554
|
+
{
|
|
18555
|
+
id: "1",
|
|
18556
|
+
name: "Annual Report.pdf",
|
|
18557
|
+
type: "PDF",
|
|
18558
|
+
size: "2.4 MB",
|
|
18559
|
+
modified: "Jan 15, 2026",
|
|
18560
|
+
},
|
|
18561
|
+
{
|
|
18562
|
+
id: "2",
|
|
18563
|
+
name: "Budget.xlsx",
|
|
18564
|
+
type: "Spreadsheet",
|
|
18565
|
+
size: "1.1 MB",
|
|
18566
|
+
modified: "Feb 3, 2026",
|
|
18567
|
+
},
|
|
18568
|
+
{
|
|
18569
|
+
id: "3",
|
|
18570
|
+
name: "Presentation.pptx",
|
|
18571
|
+
type: "Slides",
|
|
18572
|
+
size: "5.2 MB",
|
|
18573
|
+
modified: "Mar 10, 2026",
|
|
18574
|
+
},
|
|
18575
|
+
{
|
|
18576
|
+
id: "4",
|
|
18577
|
+
name: "Notes.txt",
|
|
18578
|
+
type: "Text",
|
|
18579
|
+
size: "0.1 MB",
|
|
18580
|
+
modified: "Mar 28, 2026",
|
|
18581
|
+
},
|
|
18582
|
+
{
|
|
18583
|
+
id: "5",
|
|
18584
|
+
name: "Photo.jpg",
|
|
18585
|
+
type: "Image",
|
|
18586
|
+
size: "3.8 MB",
|
|
18587
|
+
modified: "Apr 1, 2026",
|
|
18588
|
+
},
|
|
18589
|
+
];
|
|
18590
|
+
|
|
18591
|
+
export type RowItem = (typeof rows)[0];
|
|
18592
|
+
|
|
18593
|
+
/** Generate a deterministic large dataset for virtualization examples. */
|
|
18594
|
+
export const generateLargeDataset = (count: number) => {
|
|
18595
|
+
return Array.from({ length: count }, (_, i) => {
|
|
18596
|
+
const typeIndex = i % 4;
|
|
18597
|
+
const sizeIndex = (i * 13) % 1000;
|
|
18598
|
+
const modifiedIndex = (i * 7) % 365;
|
|
18599
|
+
return {
|
|
18600
|
+
id: String(i + 1),
|
|
18601
|
+
name: \`Item \${i + 1}.pdf\`,
|
|
18602
|
+
type: ["PDF", "Excel", "Word", "Image"][typeIndex],
|
|
18603
|
+
size: \`\${(sizeIndex / 100).toFixed(1)} MB\`,
|
|
18604
|
+
modified: \`\${modifiedIndex} days ago\`,
|
|
18605
|
+
};
|
|
18606
|
+
});
|
|
18607
|
+
};
|
|
18608
|
+
|
|
18609
|
+
// ---------------------------------------------------------------------------
|
|
18610
|
+
// Table examples \u2014 used by both stories and tests
|
|
18611
|
+
// ---------------------------------------------------------------------------
|
|
18612
|
+
|
|
18613
|
+
/** Basic table with columns and rows, no interactivity. */
|
|
18614
|
+
export const BasicTableExample: React.FC = () => (
|
|
18615
|
+
<Table aria-label="Files">
|
|
18616
|
+
<TableHeader>
|
|
18617
|
+
<Column id="name" isRowHeader={true}>
|
|
18618
|
+
Name
|
|
18619
|
+
</Column>
|
|
18620
|
+
<Column id="type">Type</Column>
|
|
18621
|
+
<Column id="size">Size</Column>
|
|
18622
|
+
<Column id="modified">Date Modified</Column>
|
|
18623
|
+
</TableHeader>
|
|
18624
|
+
<TableBody>
|
|
18625
|
+
{rows.map((row) => (
|
|
18626
|
+
<Row key={row.id} id={row.id}>
|
|
18627
|
+
<Cell>
|
|
18628
|
+
<Text type="body" size="sm">
|
|
18629
|
+
{row.name}
|
|
18630
|
+
</Text>
|
|
18631
|
+
</Cell>
|
|
18632
|
+
<Cell>
|
|
18633
|
+
<Text type="body" size="sm">
|
|
18634
|
+
{row.type}
|
|
18635
|
+
</Text>
|
|
18636
|
+
</Cell>
|
|
18637
|
+
<Cell>
|
|
18638
|
+
<Text type="body" size="sm">
|
|
18639
|
+
{row.size}
|
|
18640
|
+
</Text>
|
|
18641
|
+
</Cell>
|
|
18642
|
+
<Cell>
|
|
18643
|
+
<Text type="body" size="sm">
|
|
18644
|
+
{row.modified}
|
|
18645
|
+
</Text>
|
|
18646
|
+
</Cell>
|
|
18647
|
+
</Row>
|
|
18648
|
+
))}
|
|
18649
|
+
</TableBody>
|
|
18650
|
+
</Table>
|
|
18651
|
+
);
|
|
18652
|
+
|
|
18653
|
+
interface SingleSelectionTableExampleProps {
|
|
18654
|
+
onSelectionChange?: (keys: Selection) => void;
|
|
18655
|
+
}
|
|
18656
|
+
|
|
18657
|
+
/** Single selection mode with controlled state. */
|
|
18658
|
+
export const SingleSelectionTableExample: React.FC<
|
|
18659
|
+
SingleSelectionTableExampleProps
|
|
18660
|
+
> = ({ onSelectionChange }) => {
|
|
18661
|
+
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
|
|
18662
|
+
|
|
18663
|
+
const handleSelectionChange = (keys: Selection) => {
|
|
18664
|
+
setSelectedKeys(keys);
|
|
18665
|
+
onSelectionChange?.(keys);
|
|
18666
|
+
};
|
|
18667
|
+
|
|
18668
|
+
return (
|
|
18669
|
+
<Table
|
|
18670
|
+
selectionMode="single"
|
|
18671
|
+
selectedKeys={selectedKeys}
|
|
18672
|
+
onSelectionChange={handleSelectionChange}
|
|
18673
|
+
aria-label="Files"
|
|
18674
|
+
>
|
|
18675
|
+
<TableHeader>
|
|
18676
|
+
<Column id="name" isRowHeader={true}>
|
|
18677
|
+
Name
|
|
18678
|
+
</Column>
|
|
18679
|
+
<Column id="type">Type</Column>
|
|
18680
|
+
<Column id="size">Size</Column>
|
|
18681
|
+
<Column id="modified">Date Modified</Column>
|
|
18682
|
+
</TableHeader>
|
|
18683
|
+
<TableBody>
|
|
18684
|
+
{rows.map((row) => (
|
|
18685
|
+
<Row key={row.id} id={row.id}>
|
|
18686
|
+
<Cell>
|
|
18687
|
+
<Text type="body" size="sm">
|
|
18688
|
+
{row.name}
|
|
18689
|
+
</Text>
|
|
18690
|
+
</Cell>
|
|
18691
|
+
<Cell>
|
|
18692
|
+
<Text type="body" size="sm">
|
|
18693
|
+
{row.type}
|
|
18694
|
+
</Text>
|
|
18695
|
+
</Cell>
|
|
18696
|
+
<Cell>
|
|
18697
|
+
<Text type="body" size="sm">
|
|
18698
|
+
{row.size}
|
|
18699
|
+
</Text>
|
|
18700
|
+
</Cell>
|
|
18701
|
+
<Cell>
|
|
18702
|
+
<Text type="body" size="sm">
|
|
18703
|
+
{row.modified}
|
|
18704
|
+
</Text>
|
|
18705
|
+
</Cell>
|
|
18706
|
+
</Row>
|
|
18707
|
+
))}
|
|
18708
|
+
</TableBody>
|
|
18709
|
+
</Table>
|
|
18710
|
+
);
|
|
18711
|
+
};
|
|
18712
|
+
|
|
18713
|
+
interface MultipleSelectionTableExampleProps {
|
|
18714
|
+
onSelectionChange?: (keys: Selection) => void;
|
|
18715
|
+
}
|
|
18716
|
+
|
|
18717
|
+
/** Multiple selection mode with checkbox column and select-all header. */
|
|
18718
|
+
export const MultipleSelectionTableExample: React.FC<
|
|
18719
|
+
MultipleSelectionTableExampleProps
|
|
18720
|
+
> = ({ onSelectionChange }) => {
|
|
18721
|
+
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
|
|
18722
|
+
|
|
18723
|
+
const handleSelectionChange = (keys: Selection) => {
|
|
18724
|
+
setSelectedKeys(keys);
|
|
18725
|
+
onSelectionChange?.(keys);
|
|
18726
|
+
};
|
|
18727
|
+
|
|
18728
|
+
return (
|
|
18729
|
+
<Table
|
|
18730
|
+
selectionMode="multiple"
|
|
18731
|
+
selectedKeys={selectedKeys}
|
|
18732
|
+
onSelectionChange={handleSelectionChange}
|
|
18733
|
+
aria-label="Files"
|
|
18734
|
+
>
|
|
18735
|
+
<TableHeader>
|
|
18736
|
+
<Column id="selection">
|
|
18737
|
+
<SelectionCheckbox />
|
|
18738
|
+
</Column>
|
|
18739
|
+
<Column id="name" isRowHeader={true}>
|
|
18740
|
+
Name
|
|
18741
|
+
</Column>
|
|
18742
|
+
<Column id="type">Type</Column>
|
|
18743
|
+
<Column id="size">Size</Column>
|
|
18744
|
+
<Column id="modified">Date Modified</Column>
|
|
18745
|
+
</TableHeader>
|
|
18746
|
+
<TableBody>
|
|
18747
|
+
{rows.map((row) => (
|
|
18748
|
+
<Row key={row.id} id={row.id}>
|
|
18749
|
+
<Cell>
|
|
18750
|
+
<SelectionCheckbox />
|
|
18751
|
+
</Cell>
|
|
18752
|
+
<Cell>
|
|
18753
|
+
<Text type="body" size="sm">
|
|
18754
|
+
{row.name}
|
|
18755
|
+
</Text>
|
|
18756
|
+
</Cell>
|
|
18757
|
+
<Cell>
|
|
18758
|
+
<Text type="body" size="sm">
|
|
18759
|
+
{row.type}
|
|
18760
|
+
</Text>
|
|
18761
|
+
</Cell>
|
|
18762
|
+
<Cell>
|
|
18763
|
+
<Text type="body" size="sm">
|
|
18764
|
+
{row.size}
|
|
18765
|
+
</Text>
|
|
18766
|
+
</Cell>
|
|
18767
|
+
<Cell>
|
|
18768
|
+
<Text type="body" size="sm">
|
|
18769
|
+
{row.modified}
|
|
18770
|
+
</Text>
|
|
18771
|
+
</Cell>
|
|
18772
|
+
</Row>
|
|
18773
|
+
))}
|
|
18774
|
+
</TableBody>
|
|
18775
|
+
</Table>
|
|
18776
|
+
);
|
|
18777
|
+
};
|
|
18778
|
+
|
|
18779
|
+
interface SortableTableExampleProps {
|
|
18780
|
+
onSortChange?: (sortDescriptor: SortDescriptor) => void;
|
|
18781
|
+
}
|
|
18782
|
+
|
|
18783
|
+
/** Sortable columns with sort descriptor and client-side sorting. */
|
|
18784
|
+
export const SortableTableExample: React.FC<SortableTableExampleProps> = ({
|
|
18785
|
+
onSortChange,
|
|
18786
|
+
}) => {
|
|
18787
|
+
const [sortDescriptor, setSortDescriptor] = useState<
|
|
18788
|
+
SortDescriptor | undefined
|
|
18789
|
+
>();
|
|
18790
|
+
const [sortedRows, setSortedRows] = useState(rows);
|
|
18791
|
+
|
|
18792
|
+
const handleSortChange = useCallback(
|
|
18793
|
+
(descriptor: SortDescriptor) => {
|
|
18794
|
+
setSortDescriptor(descriptor);
|
|
18795
|
+
onSortChange?.(descriptor);
|
|
18796
|
+
|
|
18797
|
+
const sorted = rows.toSorted((a, b) => {
|
|
18798
|
+
const colKey = String(descriptor.column) as keyof RowItem;
|
|
18799
|
+
return descriptor.direction === "ascending"
|
|
18800
|
+
? String(a[colKey]).localeCompare(String(b[colKey]))
|
|
18801
|
+
: String(b[colKey]).localeCompare(String(a[colKey]));
|
|
18802
|
+
});
|
|
18803
|
+
setSortedRows(sorted);
|
|
18804
|
+
},
|
|
18805
|
+
[onSortChange],
|
|
18806
|
+
);
|
|
18807
|
+
|
|
18808
|
+
return (
|
|
18809
|
+
<Table
|
|
18810
|
+
sortDescriptor={sortDescriptor}
|
|
18811
|
+
onSortChange={handleSortChange}
|
|
18812
|
+
aria-label="Files"
|
|
18813
|
+
>
|
|
18814
|
+
<TableHeader>
|
|
18815
|
+
<Column id="name" isRowHeader={true} allowsSorting={true}>
|
|
18816
|
+
Name
|
|
18817
|
+
</Column>
|
|
18818
|
+
<Column id="type" allowsSorting={true}>
|
|
18819
|
+
Type
|
|
18820
|
+
</Column>
|
|
18821
|
+
<Column id="size">Size</Column>
|
|
18822
|
+
<Column id="modified">Date Modified</Column>
|
|
18823
|
+
</TableHeader>
|
|
18824
|
+
<TableBody>
|
|
18825
|
+
{sortedRows.map((row) => (
|
|
18826
|
+
<Row key={row.id} id={row.id}>
|
|
18827
|
+
<Cell>
|
|
18828
|
+
<Text type="body" size="sm">
|
|
18829
|
+
{row.name}
|
|
18830
|
+
</Text>
|
|
18831
|
+
</Cell>
|
|
18832
|
+
<Cell>
|
|
18833
|
+
<Text type="body" size="sm">
|
|
18834
|
+
{row.type}
|
|
18835
|
+
</Text>
|
|
18836
|
+
</Cell>
|
|
18837
|
+
<Cell>
|
|
18838
|
+
<Text type="body" size="sm">
|
|
18839
|
+
{row.size}
|
|
18840
|
+
</Text>
|
|
18841
|
+
</Cell>
|
|
18842
|
+
<Cell>
|
|
18843
|
+
<Text type="body" size="sm">
|
|
18844
|
+
{row.modified}
|
|
18845
|
+
</Text>
|
|
18846
|
+
</Cell>
|
|
18847
|
+
</Row>
|
|
18848
|
+
))}
|
|
18849
|
+
</TableBody>
|
|
18850
|
+
</Table>
|
|
18851
|
+
);
|
|
18852
|
+
};
|
|
18853
|
+
|
|
18854
|
+
interface DisabledRowsTableExampleProps {
|
|
18855
|
+
onSelectionChange?: (keys: Selection) => void;
|
|
18856
|
+
disabledBehavior?: "selection" | "all";
|
|
18857
|
+
disabledKeys?: Set<string>;
|
|
18858
|
+
}
|
|
18859
|
+
|
|
18860
|
+
/** Multiple selection with disabledKeys (row id="3" is disabled by default). */
|
|
18861
|
+
export const DisabledRowsTableExample: React.FC<
|
|
18862
|
+
DisabledRowsTableExampleProps
|
|
18863
|
+
> = ({
|
|
18864
|
+
onSelectionChange,
|
|
18865
|
+
disabledBehavior,
|
|
18866
|
+
disabledKeys = new Set(["3"]),
|
|
18867
|
+
}) => {
|
|
18868
|
+
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
|
|
18869
|
+
|
|
18870
|
+
const handleSelectionChange = (keys: Selection) => {
|
|
18871
|
+
setSelectedKeys(keys);
|
|
18872
|
+
onSelectionChange?.(keys);
|
|
18873
|
+
};
|
|
18874
|
+
|
|
18875
|
+
return (
|
|
18876
|
+
<Table
|
|
18877
|
+
selectionMode="multiple"
|
|
18878
|
+
selectedKeys={selectedKeys}
|
|
18879
|
+
onSelectionChange={handleSelectionChange}
|
|
18880
|
+
disabledKeys={disabledKeys}
|
|
18881
|
+
disabledBehavior={disabledBehavior}
|
|
18882
|
+
aria-label="Files"
|
|
18883
|
+
>
|
|
18884
|
+
<TableHeader>
|
|
18885
|
+
<Column id="selection">
|
|
18886
|
+
<SelectionCheckbox />
|
|
18887
|
+
</Column>
|
|
18888
|
+
<Column id="name" isRowHeader={true}>
|
|
18889
|
+
Name
|
|
18890
|
+
</Column>
|
|
18891
|
+
<Column id="type">Type</Column>
|
|
18892
|
+
<Column id="size">Size</Column>
|
|
18893
|
+
<Column id="modified">Date Modified</Column>
|
|
18894
|
+
</TableHeader>
|
|
18895
|
+
<TableBody>
|
|
18896
|
+
{rows.map((row) => (
|
|
18897
|
+
<Row key={row.id} id={row.id}>
|
|
18898
|
+
<Cell>
|
|
18899
|
+
<SelectionCheckbox />
|
|
18900
|
+
</Cell>
|
|
18901
|
+
<Cell>
|
|
18902
|
+
<Text type="body" size="sm">
|
|
18903
|
+
{row.name}
|
|
18904
|
+
</Text>
|
|
18905
|
+
</Cell>
|
|
18906
|
+
<Cell>
|
|
18907
|
+
<Text type="body" size="sm">
|
|
18908
|
+
{row.type}
|
|
18909
|
+
</Text>
|
|
18910
|
+
</Cell>
|
|
18911
|
+
<Cell>
|
|
18912
|
+
<Text type="body" size="sm">
|
|
18913
|
+
{row.size}
|
|
18914
|
+
</Text>
|
|
18915
|
+
</Cell>
|
|
18916
|
+
<Cell>
|
|
18917
|
+
<Text type="body" size="sm">
|
|
18918
|
+
{row.modified}
|
|
18919
|
+
</Text>
|
|
18920
|
+
</Cell>
|
|
18921
|
+
</Row>
|
|
18922
|
+
))}
|
|
18923
|
+
</TableBody>
|
|
18924
|
+
</Table>
|
|
18925
|
+
);
|
|
18926
|
+
};
|
|
18927
|
+
|
|
18928
|
+
interface DragAndDropTableExampleProps {
|
|
18929
|
+
onReorder?: (event: DroppableCollectionReorderEvent) => void;
|
|
18930
|
+
}
|
|
18931
|
+
|
|
18932
|
+
/** Drag-and-drop row reordering using useTableDragAndDrop hook. */
|
|
18933
|
+
export const DragAndDropTableExample: React.FC<
|
|
18934
|
+
DragAndDropTableExampleProps
|
|
18935
|
+
> = ({ onReorder }) => {
|
|
18936
|
+
const list = useListData({ initialItems: rows });
|
|
18937
|
+
|
|
18938
|
+
const handleReorder = useCallback(
|
|
18939
|
+
(e: DroppableCollectionReorderEvent) => {
|
|
18940
|
+
onReorder?.(e);
|
|
18941
|
+
if (e.target.dropPosition === "before") {
|
|
18942
|
+
list.moveBefore(e.target.key, e.keys);
|
|
18943
|
+
} else if (e.target.dropPosition === "after") {
|
|
18944
|
+
list.moveAfter(e.target.key, e.keys);
|
|
18945
|
+
}
|
|
18946
|
+
},
|
|
18947
|
+
[list, onReorder],
|
|
18948
|
+
);
|
|
18949
|
+
|
|
18950
|
+
const { dragAndDropHooks } = useTableDragAndDrop({
|
|
18951
|
+
onReorder: handleReorder,
|
|
18952
|
+
});
|
|
18953
|
+
|
|
18954
|
+
return (
|
|
18955
|
+
<Table dragAndDropHooks={dragAndDropHooks} aria-label="Files">
|
|
18956
|
+
<TableHeader>
|
|
18957
|
+
<Column id="drag">
|
|
18958
|
+
<VisuallyHidden>Drag handle</VisuallyHidden>
|
|
18959
|
+
</Column>
|
|
18960
|
+
<Column id="name" isRowHeader={true}>
|
|
18961
|
+
Name
|
|
18962
|
+
</Column>
|
|
18963
|
+
<Column id="type">Type</Column>
|
|
18964
|
+
<Column id="size">Size</Column>
|
|
18965
|
+
<Column id="modified">Date Modified</Column>
|
|
18966
|
+
</TableHeader>
|
|
18967
|
+
<TableBody>
|
|
18968
|
+
{list.items.map((row) => (
|
|
18969
|
+
<Row key={row.id} id={row.id}>
|
|
18970
|
+
<Cell>
|
|
18971
|
+
<Button slot="drag">\u2261</Button>
|
|
18972
|
+
</Cell>
|
|
18973
|
+
<Cell>
|
|
18974
|
+
<Text type="body" size="sm">
|
|
18975
|
+
{row.name}
|
|
18976
|
+
</Text>
|
|
18977
|
+
</Cell>
|
|
18978
|
+
<Cell>
|
|
18979
|
+
<Text type="body" size="sm">
|
|
18980
|
+
{row.type}
|
|
18981
|
+
</Text>
|
|
18982
|
+
</Cell>
|
|
18983
|
+
<Cell>
|
|
18984
|
+
<Text type="body" size="sm">
|
|
18985
|
+
{row.size}
|
|
18986
|
+
</Text>
|
|
18987
|
+
</Cell>
|
|
18988
|
+
<Cell>
|
|
18989
|
+
<Text type="body" size="sm">
|
|
18990
|
+
{row.modified}
|
|
18991
|
+
</Text>
|
|
18992
|
+
</Cell>
|
|
18993
|
+
</Row>
|
|
18994
|
+
))}
|
|
18995
|
+
</TableBody>
|
|
18996
|
+
</Table>
|
|
18997
|
+
);
|
|
18998
|
+
};
|
|
18999
|
+
|
|
19000
|
+
/** Table with zero rows and an empty state message. */
|
|
19001
|
+
export const EmptyTableExample: React.FC = () => {
|
|
19002
|
+
const emptyItems: RowItem[] = [];
|
|
19003
|
+
return (
|
|
19004
|
+
<Table aria-label="Files">
|
|
19005
|
+
<TableHeader>
|
|
19006
|
+
<Column id="name" isRowHeader={true}>
|
|
19007
|
+
Name
|
|
19008
|
+
</Column>
|
|
19009
|
+
<Column id="type">Type</Column>
|
|
19010
|
+
<Column id="size">Size</Column>
|
|
19011
|
+
<Column id="modified">Date Modified</Column>
|
|
19012
|
+
</TableHeader>
|
|
19013
|
+
<TableBody
|
|
19014
|
+
items={emptyItems}
|
|
19015
|
+
renderEmptyState={() => (
|
|
19016
|
+
<Box
|
|
19017
|
+
display="flex"
|
|
19018
|
+
flexDirection="column"
|
|
19019
|
+
alignItems="center"
|
|
19020
|
+
justifyContent="center"
|
|
19021
|
+
gap="md"
|
|
19022
|
+
padding="3xl"
|
|
19023
|
+
>
|
|
19024
|
+
<Box
|
|
19025
|
+
display="flex"
|
|
19026
|
+
alignItems="center"
|
|
19027
|
+
justifyContent="center"
|
|
19028
|
+
backgroundColor="background.secondary.subtle"
|
|
19029
|
+
color="icon.secondary"
|
|
19030
|
+
style={{
|
|
19031
|
+
width: 48,
|
|
19032
|
+
height: 48,
|
|
19033
|
+
borderRadius: "50%",
|
|
19034
|
+
}}
|
|
19035
|
+
>
|
|
19036
|
+
<SearchIcon />
|
|
19037
|
+
</Box>
|
|
19038
|
+
<Box
|
|
19039
|
+
display="flex"
|
|
19040
|
+
flexDirection="column"
|
|
19041
|
+
alignItems="center"
|
|
19042
|
+
gap="xs"
|
|
19043
|
+
>
|
|
19044
|
+
<Text type="body" size="sm" style={{ fontWeight: 600 }}>
|
|
19045
|
+
No items found
|
|
19046
|
+
</Text>
|
|
19047
|
+
<Box elementType="span" color="text.secondary">
|
|
19048
|
+
<Text type="body" size="sm">
|
|
19049
|
+
There are no files to display.
|
|
19050
|
+
</Text>
|
|
19051
|
+
</Box>
|
|
19052
|
+
</Box>
|
|
19053
|
+
</Box>
|
|
19054
|
+
)}
|
|
19055
|
+
>
|
|
19056
|
+
{(item) => {
|
|
19057
|
+
const row = item as RowItem;
|
|
19058
|
+
return (
|
|
19059
|
+
<Row key={row.id} id={row.id}>
|
|
19060
|
+
<Cell>
|
|
19061
|
+
<Text type="body" size="sm">
|
|
19062
|
+
{row.name}
|
|
19063
|
+
</Text>
|
|
19064
|
+
</Cell>
|
|
19065
|
+
<Cell>
|
|
19066
|
+
<Text type="body" size="sm">
|
|
19067
|
+
{row.type}
|
|
19068
|
+
</Text>
|
|
19069
|
+
</Cell>
|
|
19070
|
+
<Cell>
|
|
19071
|
+
<Text type="body" size="sm">
|
|
19072
|
+
{row.size}
|
|
19073
|
+
</Text>
|
|
19074
|
+
</Cell>
|
|
19075
|
+
<Cell>
|
|
19076
|
+
<Text type="body" size="sm">
|
|
19077
|
+
{row.modified}
|
|
19078
|
+
</Text>
|
|
19079
|
+
</Cell>
|
|
19080
|
+
</Row>
|
|
19081
|
+
);
|
|
19082
|
+
}}
|
|
19083
|
+
</TableBody>
|
|
19084
|
+
</Table>
|
|
19085
|
+
);
|
|
19086
|
+
};
|
|
19087
|
+
|
|
19088
|
+
interface OnRowActionTableExampleProps {
|
|
19089
|
+
onRowAction?: (key: React.Key) => void;
|
|
19090
|
+
}
|
|
19091
|
+
|
|
19092
|
+
/** Table with onRowAction callback. */
|
|
19093
|
+
export const OnRowActionTableExample: React.FC<
|
|
19094
|
+
OnRowActionTableExampleProps
|
|
19095
|
+
> = ({ onRowAction }) => (
|
|
19096
|
+
<Table aria-label="Files" onRowAction={onRowAction}>
|
|
19097
|
+
<TableHeader>
|
|
19098
|
+
<Column id="name" isRowHeader={true}>
|
|
19099
|
+
Name
|
|
19100
|
+
</Column>
|
|
19101
|
+
<Column id="type">Type</Column>
|
|
19102
|
+
<Column id="size">Size</Column>
|
|
19103
|
+
<Column id="modified">Date Modified</Column>
|
|
19104
|
+
</TableHeader>
|
|
19105
|
+
<TableBody>
|
|
19106
|
+
{rows.map((row) => (
|
|
19107
|
+
<Row key={row.id} id={row.id}>
|
|
19108
|
+
<Cell>
|
|
19109
|
+
<Text type="body" size="sm">
|
|
19110
|
+
{row.name}
|
|
19111
|
+
</Text>
|
|
19112
|
+
</Cell>
|
|
19113
|
+
<Cell>
|
|
19114
|
+
<Text type="body" size="sm">
|
|
19115
|
+
{row.type}
|
|
19116
|
+
</Text>
|
|
19117
|
+
</Cell>
|
|
19118
|
+
<Cell>
|
|
19119
|
+
<Text type="body" size="sm">
|
|
19120
|
+
{row.size}
|
|
19121
|
+
</Text>
|
|
19122
|
+
</Cell>
|
|
19123
|
+
<Cell>
|
|
19124
|
+
<Text type="body" size="sm">
|
|
19125
|
+
{row.modified}
|
|
19126
|
+
</Text>
|
|
19127
|
+
</Cell>
|
|
19128
|
+
</Row>
|
|
19129
|
+
))}
|
|
19130
|
+
</TableBody>
|
|
19131
|
+
</Table>
|
|
19132
|
+
);
|
|
19133
|
+
|
|
19134
|
+
/** Virtualized table using actual Virtualizer component with 1000 rows. */
|
|
19135
|
+
export const VirtualizedTableExample: React.FC = () => {
|
|
19136
|
+
const largeDataset = generateLargeDataset(1000);
|
|
19137
|
+
|
|
19138
|
+
return (
|
|
19139
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
|
|
19140
|
+
<Table
|
|
19141
|
+
aria-label="Files"
|
|
19142
|
+
style={{ height: 400, width: 700, overflow: "auto" }}
|
|
19143
|
+
>
|
|
19144
|
+
<TableHeader>
|
|
19145
|
+
<Column id="name" isRowHeader={true}>
|
|
19146
|
+
Name
|
|
19147
|
+
</Column>
|
|
19148
|
+
<Column id="type">Type</Column>
|
|
19149
|
+
<Column id="size">Size</Column>
|
|
19150
|
+
<Column id="modified">Date Modified</Column>
|
|
19151
|
+
</TableHeader>
|
|
19152
|
+
<TableBody items={largeDataset}>
|
|
19153
|
+
{(row) => {
|
|
19154
|
+
const typedRow = row as ReturnType<typeof generateLargeDataset>[0];
|
|
19155
|
+
return (
|
|
19156
|
+
<Row key={typedRow.id} id={String(typedRow.id)}>
|
|
19157
|
+
<Cell>
|
|
19158
|
+
<Text type="body" size="sm">
|
|
19159
|
+
{typedRow.name}
|
|
19160
|
+
</Text>
|
|
19161
|
+
</Cell>
|
|
19162
|
+
<Cell>
|
|
19163
|
+
<Text type="body" size="sm">
|
|
19164
|
+
{typedRow.type}
|
|
19165
|
+
</Text>
|
|
19166
|
+
</Cell>
|
|
19167
|
+
<Cell>
|
|
19168
|
+
<Text type="body" size="sm">
|
|
19169
|
+
{typedRow.size}
|
|
19170
|
+
</Text>
|
|
19171
|
+
</Cell>
|
|
19172
|
+
<Cell>
|
|
19173
|
+
<Text type="body" size="sm">
|
|
19174
|
+
{typedRow.modified}
|
|
19175
|
+
</Text>
|
|
19176
|
+
</Cell>
|
|
19177
|
+
</Row>
|
|
19178
|
+
);
|
|
19179
|
+
}}
|
|
19180
|
+
</TableBody>
|
|
19181
|
+
</Table>
|
|
19182
|
+
</Virtualizer>
|
|
19183
|
+
);
|
|
19184
|
+
};
|
|
19185
|
+
|
|
19186
|
+
interface AsyncLoadingTableExampleProps {
|
|
19187
|
+
onLoadMore?: () => void;
|
|
19188
|
+
autoResolve?: boolean;
|
|
19189
|
+
initialCount?: number;
|
|
19190
|
+
batchSize?: number;
|
|
19191
|
+
totalCount?: number;
|
|
19192
|
+
loadingDelay?: number;
|
|
19193
|
+
scrollOffset?: number;
|
|
19194
|
+
}
|
|
19195
|
+
|
|
19196
|
+
/** Virtualized table that loads more rows automatically near the end. */
|
|
19197
|
+
export const AsyncLoadingTableExample: React.FC<
|
|
19198
|
+
AsyncLoadingTableExampleProps
|
|
19199
|
+
> = ({
|
|
19200
|
+
onLoadMore,
|
|
19201
|
+
autoResolve = true,
|
|
19202
|
+
initialCount = 20,
|
|
19203
|
+
batchSize = 20,
|
|
19204
|
+
totalCount = 60,
|
|
19205
|
+
loadingDelay = 50,
|
|
19206
|
+
scrollOffset = 1,
|
|
19207
|
+
}) => {
|
|
19208
|
+
const dataset = generateLargeDataset(totalCount);
|
|
19209
|
+
const [visibleCount, setVisibleCount] = useState(initialCount);
|
|
19210
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
19211
|
+
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
19212
|
+
|
|
19213
|
+
useEffect(() => {
|
|
19214
|
+
return () => {
|
|
19215
|
+
if (timerRef.current !== null) {
|
|
19216
|
+
clearTimeout(timerRef.current);
|
|
19217
|
+
}
|
|
19218
|
+
};
|
|
19219
|
+
}, []);
|
|
19220
|
+
|
|
19221
|
+
const handleLoadMore = useCallback(() => {
|
|
19222
|
+
if (isLoading || visibleCount >= dataset.length) {
|
|
19223
|
+
return;
|
|
19224
|
+
}
|
|
19225
|
+
|
|
19226
|
+
onLoadMore?.();
|
|
19227
|
+
setIsLoading(true);
|
|
19228
|
+
|
|
19229
|
+
if (!autoResolve) {
|
|
19230
|
+
return;
|
|
19231
|
+
}
|
|
19232
|
+
|
|
19233
|
+
timerRef.current = setTimeout(() => {
|
|
19234
|
+
setVisibleCount((currentCount) =>
|
|
19235
|
+
Math.min(currentCount + batchSize, dataset.length),
|
|
19236
|
+
);
|
|
19237
|
+
setIsLoading(false);
|
|
19238
|
+
}, loadingDelay);
|
|
19239
|
+
}, [
|
|
19240
|
+
autoResolve,
|
|
19241
|
+
batchSize,
|
|
19242
|
+
dataset.length,
|
|
19243
|
+
isLoading,
|
|
19244
|
+
loadingDelay,
|
|
19245
|
+
onLoadMore,
|
|
19246
|
+
visibleCount,
|
|
19247
|
+
]);
|
|
19248
|
+
|
|
19249
|
+
const visibleRows = dataset.slice(0, visibleCount);
|
|
19250
|
+
|
|
19251
|
+
return (
|
|
19252
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
|
|
19253
|
+
<Table
|
|
19254
|
+
aria-label="Files with load more"
|
|
19255
|
+
style={{ height: 400, width: 700, overflow: "auto" }}
|
|
19256
|
+
>
|
|
19257
|
+
<TableHeader>
|
|
19258
|
+
<Column id="name" isRowHeader={true}>
|
|
19259
|
+
Name
|
|
19260
|
+
</Column>
|
|
19261
|
+
<Column id="type">Type</Column>
|
|
19262
|
+
<Column id="size">Size</Column>
|
|
19263
|
+
<Column id="modified">Date Modified</Column>
|
|
19264
|
+
</TableHeader>
|
|
19265
|
+
<TableBody
|
|
19266
|
+
items={visibleRows}
|
|
19267
|
+
onLoadMore={
|
|
19268
|
+
visibleCount < dataset.length ? handleLoadMore : undefined
|
|
19269
|
+
}
|
|
19270
|
+
isLoading={isLoading}
|
|
19271
|
+
scrollOffset={scrollOffset}
|
|
19272
|
+
>
|
|
19273
|
+
{(row) => {
|
|
19274
|
+
const typedRow = row as ReturnType<typeof generateLargeDataset>[0];
|
|
19275
|
+
return (
|
|
19276
|
+
<Row key={typedRow.id} id={String(typedRow.id)}>
|
|
19277
|
+
<Cell>
|
|
19278
|
+
<Text type="body" size="sm">
|
|
19279
|
+
{typedRow.name}
|
|
19280
|
+
</Text>
|
|
19281
|
+
</Cell>
|
|
19282
|
+
<Cell>
|
|
19283
|
+
<Text type="body" size="sm">
|
|
19284
|
+
{typedRow.type}
|
|
19285
|
+
</Text>
|
|
19286
|
+
</Cell>
|
|
19287
|
+
<Cell>
|
|
19288
|
+
<Text type="body" size="sm">
|
|
19289
|
+
{typedRow.size}
|
|
19290
|
+
</Text>
|
|
19291
|
+
</Cell>
|
|
19292
|
+
<Cell>
|
|
19293
|
+
<Text type="body" size="sm">
|
|
19294
|
+
{typedRow.modified}
|
|
19295
|
+
</Text>
|
|
19296
|
+
</Cell>
|
|
19297
|
+
</Row>
|
|
19298
|
+
);
|
|
19299
|
+
}}
|
|
19300
|
+
</TableBody>
|
|
19301
|
+
</Table>
|
|
19302
|
+
</Virtualizer>
|
|
19303
|
+
);
|
|
19304
|
+
};
|
|
19305
|
+
|
|
19306
|
+
interface SelectionWithRowActionTableExampleProps {
|
|
19307
|
+
onRowAction?: (key: React.Key) => void;
|
|
19308
|
+
onSelectionChange?: (keys: Selection) => void;
|
|
19309
|
+
}
|
|
19310
|
+
|
|
19311
|
+
/** Table with both selection mode and onRowAction (double-click triggers action). */
|
|
19312
|
+
export const SelectionWithRowActionTableExample: React.FC<
|
|
19313
|
+
SelectionWithRowActionTableExampleProps
|
|
19314
|
+
> = ({ onRowAction, onSelectionChange }) => {
|
|
19315
|
+
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
|
|
19316
|
+
|
|
19317
|
+
const handleSelectionChange = (keys: Selection) => {
|
|
19318
|
+
setSelectedKeys(keys);
|
|
19319
|
+
onSelectionChange?.(keys);
|
|
19320
|
+
};
|
|
19321
|
+
|
|
19322
|
+
return (
|
|
19323
|
+
<Table
|
|
19324
|
+
selectionMode="multiple"
|
|
19325
|
+
selectedKeys={selectedKeys}
|
|
19326
|
+
onSelectionChange={handleSelectionChange}
|
|
19327
|
+
onRowAction={onRowAction}
|
|
19328
|
+
aria-label="Files"
|
|
19329
|
+
>
|
|
19330
|
+
<TableHeader>
|
|
19331
|
+
<Column id="name" isRowHeader={true}>
|
|
19332
|
+
Name
|
|
19333
|
+
</Column>
|
|
19334
|
+
<Column id="type">Type</Column>
|
|
19335
|
+
<Column id="size">Size</Column>
|
|
19336
|
+
<Column id="modified">Date Modified</Column>
|
|
19337
|
+
</TableHeader>
|
|
19338
|
+
<TableBody>
|
|
19339
|
+
{rows.map((row) => (
|
|
19340
|
+
<Row key={row.id} id={row.id}>
|
|
19341
|
+
<Cell>
|
|
19342
|
+
<Text type="body" size="sm">
|
|
19343
|
+
{row.name}
|
|
19344
|
+
</Text>
|
|
19345
|
+
</Cell>
|
|
19346
|
+
<Cell>
|
|
19347
|
+
<Text type="body" size="sm">
|
|
19348
|
+
{row.type}
|
|
19349
|
+
</Text>
|
|
19350
|
+
</Cell>
|
|
19351
|
+
<Cell>
|
|
19352
|
+
<Text type="body" size="sm">
|
|
19353
|
+
{row.size}
|
|
19354
|
+
</Text>
|
|
19355
|
+
</Cell>
|
|
19356
|
+
<Cell>
|
|
19357
|
+
<Text type="body" size="sm">
|
|
19358
|
+
{row.modified}
|
|
19359
|
+
</Text>
|
|
19360
|
+
</Cell>
|
|
19361
|
+
</Row>
|
|
19362
|
+
))}
|
|
19363
|
+
</TableBody>
|
|
19364
|
+
</Table>
|
|
19365
|
+
);
|
|
19366
|
+
};
|
|
19367
|
+
|
|
19368
|
+
interface DynamicRowsTableExampleProps {
|
|
19369
|
+
onAdd?: () => void;
|
|
19370
|
+
onRemove?: () => void;
|
|
19371
|
+
}
|
|
19372
|
+
|
|
19373
|
+
/** Table that supports adding/removing rows dynamically. */
|
|
19374
|
+
export const DynamicRowsTableExample: React.FC<
|
|
19375
|
+
DynamicRowsTableExampleProps
|
|
19376
|
+
> = ({ onAdd, onRemove }) => {
|
|
19377
|
+
const [items, setItems] = useState(rows.slice(0, 3));
|
|
19378
|
+
|
|
19379
|
+
const addRow = () => {
|
|
19380
|
+
const nextRow = rows[items.length % rows.length];
|
|
19381
|
+
setItems((prev) => [
|
|
19382
|
+
...prev,
|
|
19383
|
+
{ ...nextRow, id: String(Date.now()), name: \`New \${prev.length + 1}\` },
|
|
19384
|
+
]);
|
|
19385
|
+
onAdd?.();
|
|
19386
|
+
};
|
|
19387
|
+
|
|
19388
|
+
const removeLastRow = () => {
|
|
19389
|
+
setItems((prev) => prev.slice(0, -1));
|
|
19390
|
+
onRemove?.();
|
|
19391
|
+
};
|
|
19392
|
+
|
|
19393
|
+
return (
|
|
19394
|
+
<>
|
|
19395
|
+
<button data-testid="add-row" onClick={addRow}>
|
|
19396
|
+
Add row
|
|
19397
|
+
</button>
|
|
19398
|
+
<button data-testid="remove-row" onClick={removeLastRow}>
|
|
19399
|
+
Remove row
|
|
19400
|
+
</button>
|
|
19401
|
+
<Table aria-label="Files">
|
|
19402
|
+
<TableHeader>
|
|
19403
|
+
<Column id="name" isRowHeader={true}>
|
|
19404
|
+
Name
|
|
19405
|
+
</Column>
|
|
19406
|
+
<Column id="type">Type</Column>
|
|
19407
|
+
<Column id="size">Size</Column>
|
|
19408
|
+
</TableHeader>
|
|
19409
|
+
<TableBody items={items} renderEmptyState={() => "No items"}>
|
|
19410
|
+
{(item) => {
|
|
19411
|
+
const row = item as RowItem;
|
|
19412
|
+
return (
|
|
19413
|
+
<Row key={row.id} id={row.id}>
|
|
19414
|
+
<Cell>
|
|
19415
|
+
<Text type="body" size="sm">
|
|
19416
|
+
{row.name}
|
|
19417
|
+
</Text>
|
|
19418
|
+
</Cell>
|
|
19419
|
+
<Cell>
|
|
19420
|
+
<Text type="body" size="sm">
|
|
19421
|
+
{row.type}
|
|
19422
|
+
</Text>
|
|
19423
|
+
</Cell>
|
|
19424
|
+
<Cell>
|
|
19425
|
+
<Text type="body" size="sm">
|
|
19426
|
+
{row.size}
|
|
19427
|
+
</Text>
|
|
19428
|
+
</Cell>
|
|
19429
|
+
</Row>
|
|
19430
|
+
);
|
|
19431
|
+
}}
|
|
19432
|
+
</TableBody>
|
|
19433
|
+
</Table>
|
|
19434
|
+
</>
|
|
19435
|
+
);
|
|
19436
|
+
};
|
|
19437
|
+
|
|
19438
|
+
// ---------------------------------------------------------------------------
|
|
19439
|
+
// Tag & Menu example (used by WithTagAndMenu story)
|
|
19440
|
+
// ---------------------------------------------------------------------------
|
|
19441
|
+
|
|
19442
|
+
const statusMap: Record<string, { label: string; variant: TagVariant }> = {
|
|
19443
|
+
active: { label: "Active", variant: "green" },
|
|
19444
|
+
archived: { label: "Archived", variant: "neutral" },
|
|
19445
|
+
review: { label: "In Review", variant: "blue" },
|
|
19446
|
+
rejected: { label: "Rejected", variant: "red" },
|
|
19447
|
+
draft: { label: "Draft", variant: "high-contrast" },
|
|
19448
|
+
};
|
|
19449
|
+
|
|
19450
|
+
const rowsWithStatus = [
|
|
19451
|
+
{
|
|
19452
|
+
id: "1",
|
|
19453
|
+
name: "Annual Report.pdf",
|
|
19454
|
+
type: "PDF",
|
|
19455
|
+
status: "active",
|
|
19456
|
+
modified: "Jan 15, 2026",
|
|
19457
|
+
},
|
|
19458
|
+
{
|
|
19459
|
+
id: "2",
|
|
19460
|
+
name: "Budget.xlsx",
|
|
19461
|
+
type: "Spreadsheet",
|
|
19462
|
+
status: "review",
|
|
19463
|
+
modified: "Feb 3, 2026",
|
|
19464
|
+
},
|
|
19465
|
+
{
|
|
19466
|
+
id: "3",
|
|
19467
|
+
name: "Presentation.pptx",
|
|
19468
|
+
type: "Slides",
|
|
19469
|
+
status: "draft",
|
|
19470
|
+
modified: "Mar 10, 2026",
|
|
19471
|
+
},
|
|
19472
|
+
{
|
|
19473
|
+
id: "4",
|
|
19474
|
+
name: "Notes.txt",
|
|
19475
|
+
type: "Text",
|
|
19476
|
+
status: "rejected",
|
|
19477
|
+
modified: "Mar 28, 2026",
|
|
19478
|
+
},
|
|
19479
|
+
{
|
|
19480
|
+
id: "5",
|
|
19481
|
+
name: "Photo.jpg",
|
|
19482
|
+
type: "Image",
|
|
19483
|
+
status: "archived",
|
|
19484
|
+
modified: "Apr 1, 2026",
|
|
19485
|
+
},
|
|
19486
|
+
];
|
|
19487
|
+
|
|
19488
|
+
const actionMenuItems = [
|
|
19489
|
+
{ id: "open", label: "Open" },
|
|
19490
|
+
{ id: "download", label: "Download" },
|
|
19491
|
+
{ id: "rename", label: "Rename" },
|
|
19492
|
+
{ id: "delete", label: "Delete" },
|
|
19493
|
+
];
|
|
19494
|
+
|
|
19495
|
+
/** Table with Tag for status display and Menu for row actions. */
|
|
19496
|
+
export const TagAndMenuTableExample: React.FC = () => (
|
|
19497
|
+
<Table aria-label="Files with status and actions">
|
|
19498
|
+
<TableHeader>
|
|
19499
|
+
<Column id="name" isRowHeader={true}>
|
|
19500
|
+
Name
|
|
19501
|
+
</Column>
|
|
19502
|
+
<Column id="type">Type</Column>
|
|
19503
|
+
<Column id="status">Status</Column>
|
|
19504
|
+
<Column id="modified">Date Modified</Column>
|
|
19505
|
+
<Column id="actions">
|
|
19506
|
+
<VisuallyHidden>Actions</VisuallyHidden>
|
|
19507
|
+
</Column>
|
|
19508
|
+
</TableHeader>
|
|
19509
|
+
<TableBody>
|
|
19510
|
+
{rowsWithStatus.map((row) => {
|
|
19511
|
+
const status = statusMap[row.status];
|
|
19512
|
+
return (
|
|
19513
|
+
<Row key={row.id} id={row.id}>
|
|
19514
|
+
<Cell>
|
|
19515
|
+
<Text type="body" size="sm">
|
|
19516
|
+
{row.name}
|
|
19517
|
+
</Text>
|
|
19518
|
+
</Cell>
|
|
19519
|
+
<Cell>
|
|
19520
|
+
<Text type="body" size="sm">
|
|
19521
|
+
{row.type}
|
|
19522
|
+
</Text>
|
|
19523
|
+
</Cell>
|
|
19524
|
+
<Cell>
|
|
19525
|
+
<Tag variant={status.variant} size="sm">
|
|
19526
|
+
{status.label}
|
|
19527
|
+
</Tag>
|
|
19528
|
+
</Cell>
|
|
19529
|
+
<Cell>
|
|
19530
|
+
<Text type="body" size="sm">
|
|
19531
|
+
{row.modified}
|
|
19532
|
+
</Text>
|
|
19533
|
+
</Cell>
|
|
19534
|
+
<Cell>
|
|
19535
|
+
<Menu
|
|
19536
|
+
items={actionMenuItems}
|
|
19537
|
+
renderTrigger={({ buttonProps, ref }) => (
|
|
19538
|
+
<ActionButton
|
|
19539
|
+
{...buttonProps}
|
|
19540
|
+
iconStart={EllipseIcon}
|
|
19541
|
+
size="sm"
|
|
19542
|
+
variant="ghost"
|
|
19543
|
+
aria-label="Actions"
|
|
19544
|
+
ref={ref}
|
|
19545
|
+
/>
|
|
19546
|
+
)}
|
|
19547
|
+
/>
|
|
19548
|
+
</Cell>
|
|
19549
|
+
</Row>
|
|
19550
|
+
);
|
|
19551
|
+
})}
|
|
19552
|
+
</TableBody>
|
|
19553
|
+
</Table>
|
|
19554
|
+
);`},similarTo:[],figmaUrl:null},Tabs:{id:"core-navigation-tabs",breadcrumb:"Core/Navigation/Tabs",importStatement:'import { AddButtonExample, BasicExample, Tabs } from "@baseline-ui/core";',description:"The `Tabs` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create\na tab panel by wrapping a `TabItem` component in a `Tabs` component.",documentation:`The \`Tabs\` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create
|
|
17474
19555
|
a tab panel by wrapping a \`TabItem\` component in a \`Tabs\` component.
|
|
17475
19556
|
|
|
17476
19557
|
* Full support for mouse, keyboard, and touch interactions
|
|
@@ -27238,7 +29319,7 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
|
|
|
27238
29319
|
formatValue={(value: number) => \`\${value} pt\`}
|
|
27239
29320
|
aria-label="Icon slider"
|
|
27240
29321
|
onTriggerPress={fn()}
|
|
27241
|
-
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var
|
|
29322
|
+
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var i={gettingStarted:`# Getting started
|
|
27242
29323
|
|
|
27243
29324
|
Install the packages required for using Baseline UI with the following command:
|
|
27244
29325
|
|
|
@@ -28463,7 +30544,7 @@ padding={[null, "lg", "xl"]}
|
|
|
28463
30544
|
|
|
28464
30545
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
28465
30546
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
28466
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var us={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var ms={version:"0.56.0"};var hs=`
|
|
30547
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.57.1"};var u=`
|
|
28467
30548
|
# Baseline UI MCP Server Guidelines
|
|
28468
30549
|
|
|
28469
30550
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -28506,7 +30587,7 @@ When recommending styling or customization approaches:
|
|
|
28506
30587
|
4. **Theming Support**: Design systems with themes enabled; use the theming guides for color scheme customization
|
|
28507
30588
|
5. **Browser Compatibility**: Ensure components are used in browser environments with required APIs
|
|
28508
30589
|
6. **Box Component Usage**: Use the Box component to wrap all components that need to be styled with the design system. The Box component is a generic container component that can be used to wrap other components. It is used to provide a consistent API for layout and spacing. You can use any sprinkle as a prop to add styling to the box.
|
|
28509
|
-
`,
|
|
30590
|
+
`,a=`
|
|
28510
30591
|
A list of available components with descriptions and similar component suggestions. In case don't find the exact component you are looking for, you can look for similar components in the "Similar To" column. The "Similar To" column is a list of components that are similar to the one you are looking for.
|
|
28511
30592
|
|
|
28512
30593
|
A component can be imported using:
|
|
@@ -28514,7 +30595,7 @@ A component can be imported using:
|
|
|
28514
30595
|
\`\`\`tsx
|
|
28515
30596
|
import { ComponentName } from "@baseline-ui/core";
|
|
28516
30597
|
\`\`\`
|
|
28517
|
-
`,
|
|
30598
|
+
`,r=`
|
|
28518
30599
|
A complete icon library organized by size with import instructions. The icons are organized by size and can be imported using the import statement provided.
|
|
28519
30600
|
|
|
28520
30601
|
An icon can be imported using:
|
|
@@ -28530,7 +30611,7 @@ Example:
|
|
|
28530
30611
|
\`\`\`tsx
|
|
28531
30612
|
import { IconName } from "@baseline-ui/icons/12";
|
|
28532
30613
|
\`\`\`
|
|
28533
|
-
`;var
|
|
30614
|
+
`;var m=`
|
|
28534
30615
|
Detailed documentation, props, and story IDs for any Baseline UI component. This resource provides comprehensive component specifications and usage examples.
|
|
28535
30616
|
|
|
28536
30617
|
## Response Structure
|
|
@@ -28566,11 +30647,11 @@ Components can be imported using:
|
|
|
28566
30647
|
\`\`\`tsx
|
|
28567
30648
|
import { ComponentName } from "@baseline-ui/core";
|
|
28568
30649
|
\`\`\`
|
|
28569
|
-
`,
|
|
30650
|
+
`,h=`
|
|
28570
30651
|
Generate a live demo URL for a Baseline UI story. Use story IDs from the component info tool to view interactive examples. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how to customize it.
|
|
28571
|
-
`,
|
|
30652
|
+
`,b=`
|
|
28572
30653
|
Get the Figma URL for a given component. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
|
|
28573
|
-
`,
|
|
30654
|
+
`,l=`
|
|
28574
30655
|
Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
|
|
28575
30656
|
|
|
28576
30657
|
## Usage
|
|
@@ -28578,9 +30659,9 @@ Best practices and guidelines for using Baseline UI components, styling, and des
|
|
|
28578
30659
|
Use this resource to:
|
|
28579
30660
|
- Understand best practices for using Baseline UI components
|
|
28580
30661
|
- Understand styling guidelines for using Baseline UI components
|
|
28581
|
-
`,
|
|
30662
|
+
`,s=`
|
|
28582
30663
|
A guide for implementing styling elements in Baseline UI components or applying styling to existing components. READ THIS BEFORE DOING ANYTHING.
|
|
28583
|
-
`,
|
|
30664
|
+
`,g=`
|
|
28584
30665
|
List all 8 available resources in the Baseline UI MCP server with their descriptions and URIs. Use this tool to discover what information and documentation is available.
|
|
28585
30666
|
|
|
28586
30667
|
## Available Resources
|
|
@@ -28618,13 +30699,13 @@ Use this tool to:
|
|
|
28618
30699
|
- Consult **list_components** to find the right component for your needs
|
|
28619
30700
|
- Reference **theming** for custom design systems
|
|
28620
30701
|
- Check **styling** for CSS and design token guidance
|
|
28621
|
-
`;var
|
|
30702
|
+
`;var I=`# List of available components in Baseline UI design system
|
|
28622
30703
|
| Name | Description | Similar To |
|
|
28623
30704
|
| --- | --- | --- |
|
|
28624
|
-
${Object.entries(
|
|
30705
|
+
${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
|
|
28625
30706
|
`)}
|
|
28626
|
-
`,
|
|
30707
|
+
`,P=Object.entries(c).map(([n,t])=>`${n}
|
|
28627
30708
|
|
|
28628
|
-
${
|
|
30709
|
+
${t.map(e=>"- "+e).join(`
|
|
28629
30710
|
`)}`).join(`
|
|
28630
|
-
`);async function
|
|
30711
|
+
`);async function S(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:s,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:l,mimeType:"text/markdown"}],null,2)}]}));let t=new stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await S())();
|