@baseline-ui/mcp 0.55.0 → 0.57.0
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 +2841 -154
- package/dist/index.js +2841 -154
- 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,V)=>()=>(V||s((V={exports:{}}).exports,V),V.exports);var wb=(s,V,A,at)=>{if(V&&typeof V=="object"||typeof V=="function")for(let K of vb(V))!Tb.call(s,K)&&K!==A&&ds(s,K,{get:()=>V[K],enumerable:!(at=yb(V,K))||at.enumerable});return s};var Pb=(s,V,A)=>(A=s!=null?fb(xb(s)):{},wb(ds(A,"default",{value:s,enumerable:true}),s));var ps=Ib((En,it)=>{(function(){var s,V="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]",Fn="[object Number]",Ms="[object Null]",Le="[object Object]",Mi="[object Promise]",Os="[object Proxy]",Vn="[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]",Fs=/\b__p \+= '';/g,Vs=/\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,Fi=/\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",Vi=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="["+Vi+"]",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+Vi+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[Fn]=W[Le]=W[Vn]=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[Fn]=z[Le]=z[Vn]=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,Fl=parseInt,oa=typeof global=="object"&&global&&global.Object===Object&&global,Vl=typeof self=="object"&&self&&self.Object===Object&&self,Y=oa||Vl||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 F(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 F(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 F(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 Fc(){this.__data__=[],this.size=0;}function Vc(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=Fc,Me.prototype.delete=Vc,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")||Ve(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=F(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(Fo,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 Fo(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 Vo(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=F(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 Fa(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 Va(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)==Vn}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,Ve(n,t)?e[n]:s}function ja(e,n,t){n.length?n=F(n,function(r){return P(r)?function(l){return cn(l,r.length===1?r[0]:r)}:r}):n=[ie];var o=-1;n=F(n,re(x()));var i=_a(e,function(r,l,c){var p=F(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=F(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;Ve(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:Ve(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 F(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:Vd(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 Ft(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,Fi.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 Vt(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 Fe(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 Fe(function(n){return n=F(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 Fd(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 Vd=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=Fd(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 Fn:return Pe(+e,+n);case dt:return e.name==n.name&&e.message==n.message;case Vn: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 Fe(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 Va(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)&&Ve(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 Fn:case Nn:return new o(e);case Vn: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 Ve(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)&&Ve(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]=Ve(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?Ft(e,x(n,3),true,true):[]}function hp(e,n){return e&&e.length?Ft(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=F(e,Zo);return n.length&&n[0]===e[0]?No(n):[]}),Ip=k(function(e){var n=ye(e),t=F(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=F(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=Fe(function(e,n){var t=e==null?0:e.length,o=zo(e,n);return Ya(e,F(n,function(i){return Ve(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 Fp(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 Vp(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?Ft(e,x(n,3),false,true):[]}function jp(e,n){return e&&e.length?Ft(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 F(e,Co(t))})}function Or(e,n){if(!(e&&e.length))return [];var t=pi(e);return n==null?t:F(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=Fe(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)||!Ve(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=Vt(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 Fr(e,n){var t=P(e)?_l:Ma;return t(e,x(n,3))}var wu=Vt(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=Vt(function(e,n,t){ze(e,t,n);});function qt(e,n){var t=P(e)?F:_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=Vt(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 Fu(e,n){if(typeof n!="function")throw new he(K);return e=C(e),function(){if(--e<1)return n.apply(this,arguments)}}function Vr(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 Vu=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])?F(n[0],re(x())):F($(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=Fe(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 Vr(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(Vo),om=Ut(function(e,n){return e>=n}),un=Fa((function(){return arguments})())?Fa: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 Va(e)}function gm(e){return e===null}function fm(e){return e==null}function qr(e){return typeof e=="number"||_(e)&&J(e)==Fn}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)?Fl(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=Fe(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),Fo)}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&&Fo(e,x(n,3))}function Wm(e){return e==null?[]:Ot(e,q(e))}function Fm(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 Vm(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=Fe(function(e,n){var t={};if(e==null)return t;var o=false;n=F(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=Fe(function(e,n){return e==null?{}:Td(e,n)});function ns(e,n){if(e==null)return {};var t=F(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(Fs,""):g).replace(Vs,"$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(Fi.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=Fe(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?F(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 Fh(e){return Ha(ge(e,Ue))}function Vh(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(F),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)?F(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,Vo):s}function sb(e,n){return e&&e.length?Mt(e,x(n,2),Vo):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=Fu,a.ary=Vr,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=Vu,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=Fm,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=Fh,a.matchesProperty=Vh,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=Vp,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=Fr,a.forIn=Lm,a.forInRight=Mm,a.forOwn=Om,a.forOwnRight=zm,a.get=gi,a.gt=tm,a.gte=om,a.has=Vm,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=Fp,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=Fr,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=V,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
|
*/
|
|
@@ -2265,7 +2255,7 @@ export const ButtonSelectWithOptionStyleFn: React.FC<
|
|
|
2265
2255
|
})}
|
|
2266
2256
|
/>
|
|
2267
2257
|
);
|
|
2268
|
-
};`},similarTo:[],figmaUrl:null},
|
|
2258
|
+
};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"A Calendar displays a monthly grid of dates, allowing users to select a single date. It supports keyboard navigation, international calendars, and accessible interactions.",documentation:'A Calendar displays a monthly grid of dates, allowing users to select a single date. It supports keyboard navigation, international calendars, and accessible interactions.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
|
|
2269
2259
|
/**
|
|
2270
2260
|
* The unique identifier for the block. This is used to identify the block in
|
|
2271
2261
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -2290,67 +2280,363 @@ className?: string
|
|
|
2290
2280
|
*/
|
|
2291
2281
|
style?: React.CSSProperties
|
|
2292
2282
|
/**
|
|
2293
|
-
* The
|
|
2283
|
+
* The size of the calendar.
|
|
2294
2284
|
*/
|
|
2295
|
-
|
|
2285
|
+
size?: "xs" | "sm"
|
|
2296
2286
|
/**
|
|
2297
|
-
*
|
|
2298
|
-
*
|
|
2299
|
-
* @default end
|
|
2287
|
+
* Optional title displayed above the calendar (e.g. "Date"). Shows a calendar icon and separator.
|
|
2300
2288
|
*/
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2289
|
+
title?: string
|
|
2290
|
+
/**
|
|
2291
|
+
* Controls how the calendar header is displayed.
|
|
2292
|
+
* - \`"title"\`: Month and year as plain text between navigation arrows (default).
|
|
2293
|
+
* - \`"selectMonth"\`: Month and year as a dropdown selector with grouped navigation arrows.
|
|
2294
|
+
* - \`"selectMonthAndYear"\`: Separate month and year sections, each with their own navigation arrows.
|
|
2295
|
+
* @default "title"
|
|
2296
|
+
*/
|
|
2297
|
+
headerVariant?: | "title"
|
|
2298
|
+
| "selectMonth"
|
|
2299
|
+
| "selectMonthAndYear"
|
|
2300
|
+
}`,stories:{usage:[{id:"core-forms-calendar--default",name:"Default",snippet:'const Default = () => <Calendar size="sm" aria-label="Event date" />;'},{id:"core-forms-calendar--with-title",name:"With Title",snippet:'const WithTitle = () => <Calendar size="sm" aria-label="Event date" title="Date" />;'},{id:"core-forms-calendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <Calendar
|
|
2301
|
+
size="sm"
|
|
2302
|
+
aria-label="Event date"
|
|
2303
|
+
defaultValue={parseDate("2024-09-15")}
|
|
2304
|
+
title="Date" />;`},{id:"core-forms-calendar--disabled",name:"Disabled",snippet:'const Disabled = () => <Calendar size="sm" aria-label="Event date" isDisabled />;'},{id:"core-forms-calendar--read-only",name:"Read Only",snippet:`const ReadOnly = () => <Calendar
|
|
2305
|
+
size="sm"
|
|
2306
|
+
aria-label="Event date"
|
|
2307
|
+
isReadOnly
|
|
2308
|
+
defaultValue={today(getLocalTimeZone())} />;`},{id:"core-forms-calendar--with-min-max",name:"With Min Max",snippet:`const WithMinMax = () => <Calendar
|
|
2309
|
+
size="sm"
|
|
2310
|
+
aria-label="Event date"
|
|
2311
|
+
minValue={today(getLocalTimeZone())}
|
|
2312
|
+
maxValue={today(getLocalTimeZone()).add({ months: 1 })} />;`},{id:"core-forms-calendar--unavailable-dates",name:"Unavailable Dates",snippet:`const UnavailableDates = () => <Calendar
|
|
2313
|
+
size="sm"
|
|
2314
|
+
aria-label="Event date"
|
|
2315
|
+
defaultValue={parseDate("2024-09-15")}
|
|
2316
|
+
isDateUnavailable={(date) =>
|
|
2317
|
+
date.day === 10 || date.day === 20 || date.day === 25} />;`},{id:"core-forms-calendar--extra-small",name:"Extra Small",snippet:'const ExtraSmall = () => <Calendar size="xs" aria-label="Event date" title="Date" />;'},{id:"core-forms-calendar--extra-small-no-title",name:"Extra Small No Title",snippet:'const ExtraSmallNoTitle = () => <Calendar size="xs" aria-label="Event date" />;'},{id:"core-forms-calendar--select-month",name:"Select Month",snippet:'const SelectMonth = () => <Calendar size="sm" aria-label="Event date" headerVariant="selectMonth" />;'},{id:"core-forms-calendar--select-month-with-title",name:"Select Month With Title",snippet:`const SelectMonthWithTitle = () => <Calendar
|
|
2318
|
+
size="sm"
|
|
2319
|
+
aria-label="Event date"
|
|
2320
|
+
headerVariant="selectMonth"
|
|
2321
|
+
title="Date" />;`},{id:"core-forms-calendar--select-month-extra-small",name:"Select Month Extra Small",snippet:'const SelectMonthExtraSmall = () => <Calendar size="xs" aria-label="Event date" headerVariant="selectMonth" />;'},{id:"core-forms-calendar--select-month-and-year",name:"Select Month And Year",snippet:'const SelectMonthAndYear = () => <Calendar size="sm" aria-label="Event date" headerVariant="selectMonthAndYear" />;'},{id:"core-forms-calendar--select-month-and-year-with-title",name:"Select Month And Year With Title",snippet:`const SelectMonthAndYearWithTitle = () => <Calendar
|
|
2322
|
+
size="sm"
|
|
2323
|
+
aria-label="Event date"
|
|
2324
|
+
headerVariant="selectMonthAndYear"
|
|
2325
|
+
title="Date" />;`},{id:"core-forms-calendar--select-month-and-year-extra-small",name:"Select Month And Year Extra Small",snippet:'const SelectMonthAndYearExtraSmall = () => <Calendar size="xs" aria-label="Event date" headerVariant="selectMonthAndYear" />;'},{id:"core-forms-calendar--international-calendar",name:"International Calendar",snippet:`const InternationalCalendar = () => {
|
|
2326
|
+
const [locale, setLocale] = React.useState("th-TH");
|
|
2305
2327
|
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2328
|
+
return (
|
|
2329
|
+
<Box display="flex" flexDirection="column" gap="lg">
|
|
2330
|
+
<Select
|
|
2331
|
+
label="Calendar system"
|
|
2332
|
+
items={localeItems}
|
|
2333
|
+
selectedKey={locale}
|
|
2334
|
+
onSelectionChange={(key) => {
|
|
2335
|
+
setLocale(key as string);
|
|
2336
|
+
}} />
|
|
2337
|
+
<I18nProvider locale={locale}>
|
|
2338
|
+
<Calendar size="sm" aria-label="Event date" defaultValue={parseDate("2024-09-15")} />
|
|
2339
|
+
</I18nProvider>
|
|
2340
|
+
</Box>
|
|
2341
|
+
);
|
|
2342
|
+
};`}],implementation:`import { CalendarDate, parseDate } from "@internationalized/date";
|
|
2343
|
+
import React from "react";
|
|
2344
|
+
|
|
2345
|
+
import { I18nProvider } from "../../I18nProvider";
|
|
2346
|
+
import { Calendar } from "../Calendar";
|
|
2347
|
+
import { RangeCalendar } from "../RangeCalendar";
|
|
2348
|
+
|
|
2349
|
+
import type { CalendarProps, RangeCalendarProps } from "../Calendar.types";
|
|
2350
|
+
|
|
2351
|
+
export const CalendarExample: React.FC<
|
|
2352
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2353
|
+
defaultValue?: string;
|
|
2354
|
+
value?: string;
|
|
2355
|
+
}
|
|
2356
|
+
> = ({ defaultValue, value, ...rest }) => {
|
|
2357
|
+
return (
|
|
2358
|
+
<Calendar
|
|
2359
|
+
{...rest}
|
|
2360
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2361
|
+
value={value ? parseDate(value) : undefined}
|
|
2362
|
+
/>
|
|
2363
|
+
);
|
|
2364
|
+
};
|
|
2365
|
+
|
|
2366
|
+
export const MinMaxCalendarExample: React.FC<
|
|
2367
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2368
|
+
defaultValue?: string;
|
|
2369
|
+
value?: string;
|
|
2370
|
+
}
|
|
2371
|
+
> = (props) => {
|
|
2372
|
+
return (
|
|
2373
|
+
<CalendarExample
|
|
2374
|
+
{...props}
|
|
2375
|
+
minValue={new CalendarDate(2024, 3, 1)}
|
|
2376
|
+
maxValue={new CalendarDate(2024, 3, 31)}
|
|
2377
|
+
/>
|
|
2378
|
+
);
|
|
2379
|
+
};
|
|
2380
|
+
|
|
2381
|
+
export const UnavailableCalendarExample: React.FC<
|
|
2382
|
+
Omit<CalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
2383
|
+
defaultValue?: string;
|
|
2384
|
+
}
|
|
2385
|
+
> = ({ defaultValue, ...rest }) => {
|
|
2386
|
+
return (
|
|
2387
|
+
<Calendar
|
|
2388
|
+
{...rest}
|
|
2389
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2390
|
+
isDateUnavailable={(date) => date.day === 20}
|
|
2391
|
+
/>
|
|
2392
|
+
);
|
|
2393
|
+
};
|
|
2394
|
+
|
|
2395
|
+
export const InternationalCalendarExample: React.FC<
|
|
2396
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2397
|
+
defaultValue?: string;
|
|
2398
|
+
locale: string;
|
|
2399
|
+
}
|
|
2400
|
+
> = ({ defaultValue, locale, ...rest }) => {
|
|
2401
|
+
return (
|
|
2402
|
+
<I18nProvider locale={locale}>
|
|
2403
|
+
<Calendar
|
|
2404
|
+
{...rest}
|
|
2405
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2406
|
+
/>
|
|
2407
|
+
</I18nProvider>
|
|
2408
|
+
);
|
|
2409
|
+
};
|
|
2410
|
+
|
|
2411
|
+
export const InternationalRangeCalendarExample: React.FC<
|
|
2412
|
+
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
2413
|
+
defaultValue?: { start: string; end: string };
|
|
2414
|
+
locale: string;
|
|
2415
|
+
}
|
|
2416
|
+
> = ({ defaultValue, locale, ...rest }) => {
|
|
2417
|
+
return (
|
|
2418
|
+
<I18nProvider locale={locale}>
|
|
2419
|
+
<RangeCalendar
|
|
2420
|
+
{...rest}
|
|
2421
|
+
defaultValue={
|
|
2422
|
+
defaultValue
|
|
2423
|
+
? {
|
|
2424
|
+
start: parseDate(defaultValue.start),
|
|
2425
|
+
end: parseDate(defaultValue.end),
|
|
2426
|
+
}
|
|
2427
|
+
: undefined
|
|
2428
|
+
}
|
|
2429
|
+
/>
|
|
2430
|
+
</I18nProvider>
|
|
2431
|
+
);
|
|
2432
|
+
};
|
|
2433
|
+
|
|
2434
|
+
export const RangeCalendarExample: React.FC<
|
|
2435
|
+
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
2436
|
+
defaultValue?: { start: string; end: string };
|
|
2437
|
+
value?: { start: string; end: string };
|
|
2438
|
+
}
|
|
2439
|
+
> = ({ defaultValue, value, ...rest }) => {
|
|
2440
|
+
return (
|
|
2441
|
+
<RangeCalendar
|
|
2442
|
+
{...rest}
|
|
2443
|
+
defaultValue={
|
|
2444
|
+
defaultValue
|
|
2445
|
+
? {
|
|
2446
|
+
start: parseDate(defaultValue.start),
|
|
2447
|
+
end: parseDate(defaultValue.end),
|
|
2448
|
+
}
|
|
2449
|
+
: undefined
|
|
2450
|
+
}
|
|
2451
|
+
value={
|
|
2452
|
+
value
|
|
2453
|
+
? { start: parseDate(value.start), end: parseDate(value.end) }
|
|
2454
|
+
: undefined
|
|
2455
|
+
}
|
|
2456
|
+
/>
|
|
2457
|
+
);
|
|
2458
|
+
};`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"A RangeCalendar displays a monthly grid of dates, allowing users to select a contiguous range of dates by clicking a start and end date. It supports keyboard navigation, international calendars, and accessible interactions.",documentation:`A RangeCalendar displays a monthly grid of dates, allowing users to select a contiguous range of dates by clicking a start and end date. It supports keyboard navigation, international calendars, and accessible interactions.
|
|
2459
|
+
|
|
2460
|
+
* **Range selection** \u2013 Click to set start and end dates, with visual highlighting for the selected range
|
|
2461
|
+
* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more
|
|
2462
|
+
* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support
|
|
2463
|
+
* **Accessible** \u2013 Uses \`role="grid"\` with proper ARIA attributes for screen readers
|
|
2464
|
+
* **Size variants** \u2013 Available in \`sm\` (default) and \`xs\` sizes
|
|
2465
|
+
* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid
|
|
2310
2466
|
|
|
2311
2467
|
\`\`\`jsx
|
|
2312
|
-
import {
|
|
2468
|
+
import { RangeCalendar } from "@baseline-ui/core";
|
|
2313
2469
|
|
|
2314
|
-
<
|
|
2470
|
+
<RangeCalendar aria-label="Trip dates" />;
|
|
2315
2471
|
\`\`\`
|
|
2316
2472
|
|
|
2317
|
-
|
|
2473
|
+
\`\`\`jsx
|
|
2474
|
+
<RangeCalendar aria-label="Trip dates" title="Date" />
|
|
2475
|
+
\`\`\`
|
|
2476
|
+
|
|
2477
|
+
Set an initial selected range using the \`defaultValue\` prop with start and end dates.
|
|
2318
2478
|
|
|
2319
2479
|
\`\`\`jsx
|
|
2320
|
-
import {
|
|
2480
|
+
import { parseDate } from "@internationalized/date";
|
|
2321
2481
|
|
|
2322
|
-
<
|
|
2323
|
-
|
|
2324
|
-
"
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
}
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2482
|
+
<RangeCalendar
|
|
2483
|
+
aria-label="Trip dates"
|
|
2484
|
+
title="Date"
|
|
2485
|
+
defaultValue={{
|
|
2486
|
+
start: parseDate("2024-09-02"),
|
|
2487
|
+
end: parseDate("2024-09-11"),
|
|
2488
|
+
}}
|
|
2489
|
+
/>;
|
|
2490
|
+
\`\`\`
|
|
2491
|
+
|
|
2492
|
+
\`\`\`jsx
|
|
2493
|
+
<RangeCalendar aria-label="Trip dates" size="xs" title="Date" />
|
|
2494
|
+
\`\`\`
|
|
2495
|
+
|
|
2496
|
+
\`\`\`jsx
|
|
2497
|
+
<RangeCalendar aria-label="Trip dates" size="xs" />
|
|
2498
|
+
\`\`\`
|
|
2499
|
+
|
|
2500
|
+
The \`headerVariant\` prop controls how the calendar header is displayed. The default is \`"title"\`, which shows the month and year as plain text between navigation arrows.
|
|
2501
|
+
|
|
2502
|
+
Use \`headerVariant="selectMonth"\` to display the month and year as a dropdown selector with grouped navigation arrows.
|
|
2503
|
+
|
|
2504
|
+
\`\`\`jsx
|
|
2505
|
+
<RangeCalendar aria-label="Trip dates" headerVariant="selectMonth" />
|
|
2506
|
+
\`\`\`
|
|
2507
|
+
|
|
2508
|
+
\`\`\`jsx
|
|
2509
|
+
<RangeCalendar
|
|
2510
|
+
aria-label="Trip dates"
|
|
2511
|
+
headerVariant="selectMonth"
|
|
2512
|
+
title="Date"
|
|
2513
|
+
/>
|
|
2514
|
+
\`\`\`
|
|
2515
|
+
|
|
2516
|
+
Use \`headerVariant="selectMonthAndYear"\` to display separate month and year sections, each with their own navigation arrows.
|
|
2517
|
+
|
|
2518
|
+
\`\`\`jsx
|
|
2519
|
+
<RangeCalendar aria-label="Trip dates" headerVariant="selectMonthAndYear" />
|
|
2520
|
+
\`\`\`
|
|
2521
|
+
|
|
2522
|
+
\`\`\`jsx
|
|
2523
|
+
<RangeCalendar
|
|
2524
|
+
aria-label="Trip dates"
|
|
2525
|
+
headerVariant="selectMonthAndYear"
|
|
2526
|
+
title="Date"
|
|
2527
|
+
/>
|
|
2528
|
+
\`\`\`
|
|
2529
|
+
|
|
2530
|
+
When \`isDisabled\` is true, all dates and navigation buttons become non-interactive.
|
|
2531
|
+
|
|
2532
|
+
\`\`\`jsx
|
|
2533
|
+
import { parseDate } from "@internationalized/date";
|
|
2534
|
+
|
|
2535
|
+
<RangeCalendar
|
|
2536
|
+
aria-label="Trip dates"
|
|
2537
|
+
isDisabled
|
|
2538
|
+
defaultValue={{
|
|
2539
|
+
start: parseDate("2024-09-02"),
|
|
2540
|
+
end: parseDate("2024-09-11"),
|
|
2541
|
+
}}
|
|
2542
|
+
/>;
|
|
2543
|
+
\`\`\`
|
|
2544
|
+
|
|
2545
|
+
When \`isReadOnly\` is true, the selected range is visible but cannot be changed.
|
|
2546
|
+
|
|
2547
|
+
\`\`\`jsx
|
|
2548
|
+
import { parseDate } from "@internationalized/date";
|
|
2549
|
+
|
|
2550
|
+
<RangeCalendar
|
|
2551
|
+
aria-label="Trip dates"
|
|
2552
|
+
isReadOnly
|
|
2553
|
+
defaultValue={{
|
|
2554
|
+
start: parseDate("2024-09-02"),
|
|
2555
|
+
end: parseDate("2024-09-11"),
|
|
2556
|
+
}}
|
|
2557
|
+
/>;
|
|
2558
|
+
\`\`\`
|
|
2559
|
+
|
|
2560
|
+
Restrict selectable dates to a range using \`minValue\` and \`maxValue\`.
|
|
2561
|
+
|
|
2562
|
+
\`\`\`jsx
|
|
2563
|
+
import { getLocalTimeZone, today } from "@internationalized/date";
|
|
2564
|
+
|
|
2565
|
+
<RangeCalendar
|
|
2566
|
+
aria-label="Trip dates"
|
|
2567
|
+
minValue={today(getLocalTimeZone())}
|
|
2568
|
+
maxValue={today(getLocalTimeZone()).add({ months: 1 })}
|
|
2569
|
+
/>;
|
|
2570
|
+
\`\`\`
|
|
2571
|
+
|
|
2572
|
+
Use \`isDateUnavailable\` to mark specific dates as unavailable.
|
|
2573
|
+
|
|
2574
|
+
\`\`\`jsx
|
|
2575
|
+
<RangeCalendar
|
|
2576
|
+
aria-label="Trip dates"
|
|
2577
|
+
isDateUnavailable={(date) => date.day === 5 || date.day === 15}
|
|
2578
|
+
/>
|
|
2579
|
+
\`\`\`
|
|
2580
|
+
|
|
2581
|
+
RangeCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user's locale. Wrap the calendar in an \`I18nProvider\` to override the locale and display a different calendar system.
|
|
2582
|
+
|
|
2583
|
+
Use the locale selector below to preview different calendar systems including Buddhist (\`th-TH\`), Persian (\`fa-IR\`), Islamic (\`ar-SA\`), Hebrew (\`he-IL-u-ca-hebrew\`), Japanese (\`ja-JP-u-ca-japanese\`), and ROC (\`zh-TW-u-ca-roc\`).
|
|
2584
|
+
|
|
2585
|
+
\`\`\`jsx
|
|
2586
|
+
import { I18nProvider, RangeCalendar } from "@baseline-ui/core";
|
|
2587
|
+
import { parseDate } from "@internationalized/date";
|
|
2588
|
+
|
|
2589
|
+
<I18nProvider locale="th-TH">
|
|
2590
|
+
<RangeCalendar
|
|
2591
|
+
aria-label="Trip dates"
|
|
2592
|
+
defaultValue={{
|
|
2593
|
+
start: parseDate("2024-09-02"),
|
|
2594
|
+
end: parseDate("2024-09-11"),
|
|
2595
|
+
}}
|
|
2596
|
+
/>
|
|
2597
|
+
</I18nProvider>;
|
|
2598
|
+
\`\`\`
|
|
2599
|
+
|
|
2600
|
+
An \`aria-label\` must be provided to the RangeCalendar for accessibility. If the calendar is labeled by a separate visible element, use \`aria-labelledby\` instead.
|
|
2601
|
+
|
|
2602
|
+
\`\`\`jsx
|
|
2603
|
+
{/* Labeling with aria-label */}
|
|
2604
|
+
<RangeCalendar aria-label="Trip dates" />
|
|
2605
|
+
|
|
2606
|
+
{/* Labeling with a visible element */}
|
|
2607
|
+
<label id="date-label">Trip dates</label>
|
|
2608
|
+
<RangeCalendar aria-labelledby="date-label" />
|
|
2609
|
+
\`\`\`
|
|
2610
|
+
|
|
2611
|
+
When the \`title\` prop is set, it is automatically linked via \`aria-labelledby\` so no additional labeling prop is needed.
|
|
2612
|
+
|
|
2613
|
+
| Selector | Description |
|
|
2614
|
+
| --------------------------- | ------------------------------- |
|
|
2615
|
+
| \`.BaselineUI-RangeCalendar\` | Root container element |
|
|
2616
|
+
| \`[data-selected]\` | Selected date cell (in range) |
|
|
2617
|
+
| \`[data-selection-start]\` | Start date of the range |
|
|
2618
|
+
| \`[data-selection-end]\` | End date of the range |
|
|
2619
|
+
| \`[data-disabled]\` | Disabled date cell |
|
|
2620
|
+
| \`[data-unavailable]\` | Unavailable date cell |
|
|
2621
|
+
| \`[data-outside-month]\` | Date cell outside current month |
|
|
2622
|
+
| \`[data-focus-visible]\` | Keyboard-focused cell |
|
|
2623
|
+
| \`[data-hovered]\` | Hovered date cell |
|
|
2624
|
+
| \`[data-today]\` | Today's date cell |
|
|
2625
|
+
|
|
2626
|
+
| Key | Function |
|
|
2627
|
+
| ----------------- | ------------------------------------------------ |
|
|
2628
|
+
| \`ArrowRight\` | Move focus to the next day |
|
|
2629
|
+
| \`ArrowLeft\` | Move focus to the previous day |
|
|
2630
|
+
| \`ArrowDown\` | Move focus to the same day in the next week |
|
|
2631
|
+
| \`ArrowUp\` | Move focus to the same day in the previous week |
|
|
2632
|
+
| \`PageDown\` | Move focus to the same day in the next month |
|
|
2633
|
+
| \`PageUp\` | Move focus to the same day in the previous month |
|
|
2634
|
+
| \`Home\` | Move focus to the first day of the month |
|
|
2635
|
+
| \`End\` | Move focus to the last day of the month |
|
|
2636
|
+
| \`Enter\` / \`Space\` | Select the focused date / set range boundary |
|
|
2637
|
+
|
|
2638
|
+
* **[Calendar](/docs/core-forms-calendar--docs)** \u2013 For selecting a single date instead of a range
|
|
2639
|
+
* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments`,props:`interface RangeCalendarProps {
|
|
2354
2640
|
/**
|
|
2355
2641
|
* The unique identifier for the block. This is used to identify the block in
|
|
2356
2642
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -2375,51 +2661,362 @@ className?: string
|
|
|
2375
2661
|
*/
|
|
2376
2662
|
style?: React.CSSProperties
|
|
2377
2663
|
/**
|
|
2378
|
-
* The
|
|
2379
|
-
* color presets is:
|
|
2380
|
-
*
|
|
2381
|
-
* \`\`\`ts
|
|
2382
|
-
* export interface ColorPreset {
|
|
2383
|
-
* label: string;
|
|
2384
|
-
* color: string;
|
|
2385
|
-
* }
|
|
2386
|
-
* \`\`\`
|
|
2387
|
-
*
|
|
2388
|
-
* The color can be a hex or hexa value.
|
|
2389
|
-
*/
|
|
2390
|
-
presets?: ColorPreset[]
|
|
2391
|
-
/**
|
|
2392
|
-
* Whether to include the custom color picker. If \`false\`, the color picker
|
|
2393
|
-
* will only show the color presets. The custom color picker allows the user
|
|
2394
|
-
* to pick any color. You can set the \`allowAlpha\` prop to \`false\` to disable
|
|
2395
|
-
* the alpha channel.
|
|
2396
|
-
*
|
|
2397
|
-
* @default true
|
|
2664
|
+
* The size of the calendar.
|
|
2398
2665
|
*/
|
|
2399
|
-
|
|
2666
|
+
size?: "xs" | "sm"
|
|
2400
2667
|
/**
|
|
2401
|
-
*
|
|
2402
|
-
* that is currently selected. If boolean, the label will be shown only when
|
|
2403
|
-
* the color is not \`null\`. If a function, the function will be called with
|
|
2404
|
-
* the current color and should return a string. If \`false\`, the label will
|
|
2405
|
-
* not be shown.
|
|
2406
|
-
*
|
|
2407
|
-
* @default true
|
|
2668
|
+
* Optional title displayed above the calendar (e.g. "Date"). Shows a calendar icon and separator.
|
|
2408
2669
|
*/
|
|
2409
|
-
|
|
2410
|
-
| ((
|
|
2411
|
-
color: Color | null,
|
|
2412
|
-
options: {
|
|
2413
|
-
isIndeterminate: boolean;
|
|
2414
|
-
},
|
|
2415
|
-
) => string)
|
|
2670
|
+
title?: string
|
|
2416
2671
|
/**
|
|
2417
|
-
*
|
|
2418
|
-
*
|
|
2419
|
-
*
|
|
2672
|
+
* Controls how the calendar header is displayed.
|
|
2673
|
+
* - \`"title"\`: Month and year as plain text between navigation arrows (default).
|
|
2674
|
+
* - \`"selectMonth"\`: Month and year as a dropdown selector with grouped navigation arrows.
|
|
2675
|
+
* - \`"selectMonthAndYear"\`: Separate month and year sections, each with their own navigation arrows.
|
|
2676
|
+
* @default "title"
|
|
2420
2677
|
*/
|
|
2421
|
-
|
|
2422
|
-
|
|
2678
|
+
headerVariant?: | "title"
|
|
2679
|
+
| "selectMonth"
|
|
2680
|
+
| "selectMonthAndYear"
|
|
2681
|
+
}`,stories:{usage:[{id:"core-forms-rangecalendar--default",name:"Default",snippet:'const Default = () => <RangeCalendar size="sm" aria-label="Trip dates" />;'},{id:"core-forms-rangecalendar--with-title",name:"With Title",snippet:'const WithTitle = () => <RangeCalendar size="sm" aria-label="Trip dates" title="Date" />;'},{id:"core-forms-rangecalendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <RangeCalendar
|
|
2682
|
+
size="sm"
|
|
2683
|
+
aria-label="Trip dates"
|
|
2684
|
+
title="Date"
|
|
2685
|
+
defaultValue={{
|
|
2686
|
+
start: parseDate("2024-09-02"),
|
|
2687
|
+
end: parseDate("2024-09-11"),
|
|
2688
|
+
}} />;`},{id:"core-forms-rangecalendar--disabled",name:"Disabled",snippet:`const Disabled = () => <RangeCalendar
|
|
2689
|
+
size="sm"
|
|
2690
|
+
aria-label="Trip dates"
|
|
2691
|
+
isDisabled
|
|
2692
|
+
defaultValue={{
|
|
2693
|
+
start: parseDate("2024-09-02"),
|
|
2694
|
+
end: parseDate("2024-09-11"),
|
|
2695
|
+
}} />;`},{id:"core-forms-rangecalendar--read-only",name:"Read Only",snippet:`const ReadOnly = () => <RangeCalendar
|
|
2696
|
+
size="sm"
|
|
2697
|
+
aria-label="Trip dates"
|
|
2698
|
+
isReadOnly
|
|
2699
|
+
defaultValue={{
|
|
2700
|
+
start: parseDate("2024-09-02"),
|
|
2701
|
+
end: parseDate("2024-09-11"),
|
|
2702
|
+
}} />;`},{id:"core-forms-rangecalendar--with-min-max",name:"With Min Max",snippet:`const WithMinMax = () => <RangeCalendar
|
|
2703
|
+
size="sm"
|
|
2704
|
+
aria-label="Trip dates"
|
|
2705
|
+
minValue={today(getLocalTimeZone())}
|
|
2706
|
+
maxValue={today(getLocalTimeZone()).add({ months: 1 })} />;`},{id:"core-forms-rangecalendar--unavailable-dates",name:"Unavailable Dates",snippet:`const UnavailableDates = () => <RangeCalendar
|
|
2707
|
+
size="sm"
|
|
2708
|
+
aria-label="Trip dates"
|
|
2709
|
+
defaultValue={{
|
|
2710
|
+
start: parseDate("2024-09-02"),
|
|
2711
|
+
end: parseDate("2024-09-11"),
|
|
2712
|
+
}}
|
|
2713
|
+
isDateUnavailable={(date) => date.day === 5 || date.day === 15} />;`},{id:"core-forms-rangecalendar--extra-small",name:"Extra Small",snippet:'const ExtraSmall = () => <RangeCalendar size="xs" aria-label="Trip dates" title="Date" />;'},{id:"core-forms-rangecalendar--extra-small-no-title",name:"Extra Small No Title",snippet:'const ExtraSmallNoTitle = () => <RangeCalendar size="xs" aria-label="Trip dates" />;'},{id:"core-forms-rangecalendar--select-month",name:"Select Month",snippet:'const SelectMonth = () => <RangeCalendar size="sm" aria-label="Trip dates" headerVariant="selectMonth" />;'},{id:"core-forms-rangecalendar--select-month-with-title",name:"Select Month With Title",snippet:`const SelectMonthWithTitle = () => <RangeCalendar
|
|
2714
|
+
size="sm"
|
|
2715
|
+
aria-label="Trip dates"
|
|
2716
|
+
headerVariant="selectMonth"
|
|
2717
|
+
title="Date" />;`},{id:"core-forms-rangecalendar--select-month-and-year",name:"Select Month And Year",snippet:'const SelectMonthAndYear = () => <RangeCalendar size="sm" aria-label="Trip dates" headerVariant="selectMonthAndYear" />;'},{id:"core-forms-rangecalendar--select-month-and-year-with-title",name:"Select Month And Year With Title",snippet:`const SelectMonthAndYearWithTitle = () => <RangeCalendar
|
|
2718
|
+
size="sm"
|
|
2719
|
+
aria-label="Trip dates"
|
|
2720
|
+
headerVariant="selectMonthAndYear"
|
|
2721
|
+
title="Date" />;`},{id:"core-forms-rangecalendar--international-calendar",name:"International Calendar",snippet:`const InternationalCalendar = () => {
|
|
2722
|
+
const [locale, setLocale] = React.useState("th-TH");
|
|
2723
|
+
|
|
2724
|
+
return (
|
|
2725
|
+
<Box display="flex" flexDirection="column" gap="lg">
|
|
2726
|
+
<Select
|
|
2727
|
+
label="Calendar system"
|
|
2728
|
+
items={localeItems}
|
|
2729
|
+
selectedKey={locale}
|
|
2730
|
+
onSelectionChange={(key) => {
|
|
2731
|
+
setLocale(key as string);
|
|
2732
|
+
}} />
|
|
2733
|
+
<I18nProvider locale={locale}>
|
|
2734
|
+
<RangeCalendar
|
|
2735
|
+
size="sm"
|
|
2736
|
+
aria-label="Trip dates"
|
|
2737
|
+
defaultValue={{
|
|
2738
|
+
start: parseDate("2024-09-02"),
|
|
2739
|
+
end: parseDate("2024-09-11"),
|
|
2740
|
+
}} />
|
|
2741
|
+
</I18nProvider>
|
|
2742
|
+
</Box>
|
|
2743
|
+
);
|
|
2744
|
+
};`}],implementation:`import { CalendarDate, parseDate } from "@internationalized/date";
|
|
2745
|
+
import React from "react";
|
|
2746
|
+
|
|
2747
|
+
import { I18nProvider } from "../../I18nProvider";
|
|
2748
|
+
import { Calendar } from "../Calendar";
|
|
2749
|
+
import { RangeCalendar } from "../RangeCalendar";
|
|
2750
|
+
|
|
2751
|
+
import type { CalendarProps, RangeCalendarProps } from "../Calendar.types";
|
|
2752
|
+
|
|
2753
|
+
export const CalendarExample: React.FC<
|
|
2754
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2755
|
+
defaultValue?: string;
|
|
2756
|
+
value?: string;
|
|
2757
|
+
}
|
|
2758
|
+
> = ({ defaultValue, value, ...rest }) => {
|
|
2759
|
+
return (
|
|
2760
|
+
<Calendar
|
|
2761
|
+
{...rest}
|
|
2762
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2763
|
+
value={value ? parseDate(value) : undefined}
|
|
2764
|
+
/>
|
|
2765
|
+
);
|
|
2766
|
+
};
|
|
2767
|
+
|
|
2768
|
+
export const MinMaxCalendarExample: React.FC<
|
|
2769
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2770
|
+
defaultValue?: string;
|
|
2771
|
+
value?: string;
|
|
2772
|
+
}
|
|
2773
|
+
> = (props) => {
|
|
2774
|
+
return (
|
|
2775
|
+
<CalendarExample
|
|
2776
|
+
{...props}
|
|
2777
|
+
minValue={new CalendarDate(2024, 3, 1)}
|
|
2778
|
+
maxValue={new CalendarDate(2024, 3, 31)}
|
|
2779
|
+
/>
|
|
2780
|
+
);
|
|
2781
|
+
};
|
|
2782
|
+
|
|
2783
|
+
export const UnavailableCalendarExample: React.FC<
|
|
2784
|
+
Omit<CalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
2785
|
+
defaultValue?: string;
|
|
2786
|
+
}
|
|
2787
|
+
> = ({ defaultValue, ...rest }) => {
|
|
2788
|
+
return (
|
|
2789
|
+
<Calendar
|
|
2790
|
+
{...rest}
|
|
2791
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2792
|
+
isDateUnavailable={(date) => date.day === 20}
|
|
2793
|
+
/>
|
|
2794
|
+
);
|
|
2795
|
+
};
|
|
2796
|
+
|
|
2797
|
+
export const InternationalCalendarExample: React.FC<
|
|
2798
|
+
Omit<CalendarProps, "defaultValue" | "value"> & {
|
|
2799
|
+
defaultValue?: string;
|
|
2800
|
+
locale: string;
|
|
2801
|
+
}
|
|
2802
|
+
> = ({ defaultValue, locale, ...rest }) => {
|
|
2803
|
+
return (
|
|
2804
|
+
<I18nProvider locale={locale}>
|
|
2805
|
+
<Calendar
|
|
2806
|
+
{...rest}
|
|
2807
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
2808
|
+
/>
|
|
2809
|
+
</I18nProvider>
|
|
2810
|
+
);
|
|
2811
|
+
};
|
|
2812
|
+
|
|
2813
|
+
export const InternationalRangeCalendarExample: React.FC<
|
|
2814
|
+
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
2815
|
+
defaultValue?: { start: string; end: string };
|
|
2816
|
+
locale: string;
|
|
2817
|
+
}
|
|
2818
|
+
> = ({ defaultValue, locale, ...rest }) => {
|
|
2819
|
+
return (
|
|
2820
|
+
<I18nProvider locale={locale}>
|
|
2821
|
+
<RangeCalendar
|
|
2822
|
+
{...rest}
|
|
2823
|
+
defaultValue={
|
|
2824
|
+
defaultValue
|
|
2825
|
+
? {
|
|
2826
|
+
start: parseDate(defaultValue.start),
|
|
2827
|
+
end: parseDate(defaultValue.end),
|
|
2828
|
+
}
|
|
2829
|
+
: undefined
|
|
2830
|
+
}
|
|
2831
|
+
/>
|
|
2832
|
+
</I18nProvider>
|
|
2833
|
+
);
|
|
2834
|
+
};
|
|
2835
|
+
|
|
2836
|
+
export const RangeCalendarExample: React.FC<
|
|
2837
|
+
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
2838
|
+
defaultValue?: { start: string; end: string };
|
|
2839
|
+
value?: { start: string; end: string };
|
|
2840
|
+
}
|
|
2841
|
+
> = ({ defaultValue, value, ...rest }) => {
|
|
2842
|
+
return (
|
|
2843
|
+
<RangeCalendar
|
|
2844
|
+
{...rest}
|
|
2845
|
+
defaultValue={
|
|
2846
|
+
defaultValue
|
|
2847
|
+
? {
|
|
2848
|
+
start: parseDate(defaultValue.start),
|
|
2849
|
+
end: parseDate(defaultValue.end),
|
|
2850
|
+
}
|
|
2851
|
+
: undefined
|
|
2852
|
+
}
|
|
2853
|
+
value={
|
|
2854
|
+
value
|
|
2855
|
+
? { start: parseDate(value.start), end: parseDate(value.end) }
|
|
2856
|
+
: undefined
|
|
2857
|
+
}
|
|
2858
|
+
/>
|
|
2859
|
+
);
|
|
2860
|
+
};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a component that allows users to select one or more items from a set. It is built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html) and provides additional styling and behavior.",documentation:'`Checkbox` is a component that allows users to select one or more items from a set. It is built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html) and provides additional styling and behavior.\n\nIn most cases, checkboxes should have a visual label. If the checkbox does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify the element to assistive technology.\n\n* Built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html)\n* Full support for form autofill\n* Keyboard focus management and cross browser normalization\n* Labeling support for assistive technology via aria-\\* props\n* Indeterminate state support\n\n```jsx\nimport { Checkbox } from "@baseline-ui/core";\n\n<Checkbox label="Label" onChange={console.log} />;\n```\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n```jsx\n<Checkbox label="Label" defaultSelected onChange={console.log} />\n```\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n```jsx\n<Checkbox label="Label" isSelected onChange={console.log} />\n```\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n```jsx\n<Checkbox label="Label" isIndeterminate onChange={console.log} />\n```\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n```jsx\n<Checkbox label="Label" isReadOnly isSelected onChange={console.log} />\n```\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n```jsx\n<Checkbox label="Label" isDisabled onChange={console.log} />\n```\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n```jsx\n<Checkbox label="Label" name="name" value="value" onChange={console.log} />\n```\n\nThe `labelPosition` prop controls whether the label appears before or after the checkbox.\n\n```jsx\n<Checkbox label="Label" labelPosition="start" onChange={console.log} />\n```\n\nThe `isInvalid` prop marks the checkbox as having a validation error.\n\n```jsx\n<Checkbox label="Label" isInvalid onChange={console.log} />\n```\n\nThe `onChange` callback receives a `boolean` indicating the new checked state.\n\n```jsx\n<Checkbox\n label="Label"\n onChange={(isSelected) => {\n console.log("Checked:", isSelected);\n }}\n/>\n```\n\nWhen `isIndeterminate` is `true`, the checkbox displays a minus icon regardless of the `isSelected` state. Clicking an indeterminate checkbox will call `onChange` with `true`.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-selected] | Whether the component is selected. |\n| \\[data-readonly] | Whether the component is read-only. |\n| \\[data-pressed] | Whether the component is currently pressed. |\n| \\[data-indeterminate] | Whether the component is in an indeterminate state. |\n| \\[data-invalid] | Whether the component has a validation error. |\n\n| Key | Function |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |',props:`interface CheckboxProps {
|
|
2861
|
+
/**
|
|
2862
|
+
* The unique identifier for the block. This is used to identify the block in
|
|
2863
|
+
* the DOM and in the block map. It is added as a data attribute
|
|
2864
|
+
* \`data-block-id\` to the root element of the block if a DOM node is
|
|
2865
|
+
* rendered.
|
|
2866
|
+
*/
|
|
2867
|
+
data-block-id?: string
|
|
2868
|
+
/**
|
|
2869
|
+
* Represents a data block group. This is similar to \`data-block-id\` but it
|
|
2870
|
+
* doesn't have to be unique just like \`class\`. This is used to group blocks
|
|
2871
|
+
* together in the DOM and in the block map. It is added as a data attribute
|
|
2872
|
+
* \`data-block-class\` to the root element of the block if a DOM node is
|
|
2873
|
+
* rendered.
|
|
2874
|
+
*/
|
|
2875
|
+
data-block-class?: string
|
|
2876
|
+
/**
|
|
2877
|
+
* The className applied to the root element of the component.
|
|
2878
|
+
*/
|
|
2879
|
+
className?: string
|
|
2880
|
+
/**
|
|
2881
|
+
* The style applied to the root element of the component.
|
|
2882
|
+
*/
|
|
2883
|
+
style?: React.CSSProperties
|
|
2884
|
+
/**
|
|
2885
|
+
* The checkbox's label.
|
|
2886
|
+
*/
|
|
2887
|
+
label?: string
|
|
2888
|
+
/**
|
|
2889
|
+
* The position of the label
|
|
2890
|
+
*
|
|
2891
|
+
* @default end
|
|
2892
|
+
*/
|
|
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
|
|
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 }}>
|
|
2900
|
+
<WithLabel labelPosition="start" />
|
|
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.
|
|
2902
|
+
|
|
2903
|
+
* Monospace font family optimized for code readability
|
|
2904
|
+
* Automatic horizontal and vertical scrolling for long code blocks
|
|
2905
|
+
* Custom scrollbar styling that matches the theme
|
|
2906
|
+
* Theme-aware styling with proper contrast and spacing
|
|
2907
|
+
|
|
2908
|
+
\`\`\`jsx
|
|
2909
|
+
import { Code } from "@baseline-ui/core";
|
|
2910
|
+
|
|
2911
|
+
<Code>{\`{ "name": "Baseline UI" }\`}</Code>;
|
|
2912
|
+
\`\`\`
|
|
2913
|
+
|
|
2914
|
+
For longer code snippets, the component automatically provides scrolling when the content exceeds the container size:
|
|
2915
|
+
|
|
2916
|
+
\`\`\`jsx
|
|
2917
|
+
import { Code } from "@baseline-ui/core";
|
|
2918
|
+
|
|
2919
|
+
<Code style={{ maxWidth: 400, maxHeight: 200 }}>
|
|
2920
|
+
{\`{
|
|
2921
|
+
"scripts": {
|
|
2922
|
+
"build": "lerna run build --stream",
|
|
2923
|
+
"test": "jest",
|
|
2924
|
+
"lint": "eslint ."
|
|
2925
|
+
}
|
|
2926
|
+
}\`}
|
|
2927
|
+
</Code>;
|
|
2928
|
+
\`\`\``,props:`interface CodeProps {
|
|
2929
|
+
/**
|
|
2930
|
+
* The code to render.
|
|
2931
|
+
*/
|
|
2932
|
+
children: React.ReactNode
|
|
2933
|
+
}`,stories:{usage:[{id:"core-content-code--basic",name:"Basic",snippet:'const Basic = () => <Code>{`{\n "name": "Baseline UI",\n}`}</Code>;'},{id:"core-content-code--with-scroll",name:"With Scroll",snippet:`const WithScroll = () => <Code
|
|
2934
|
+
style={{
|
|
2935
|
+
maxWidth: 400,
|
|
2936
|
+
maxHeight: 200,
|
|
2937
|
+
}}>{\`{
|
|
2938
|
+
"scripts": {
|
|
2939
|
+
"build": "lerna run build --stream --prefix --npm-client yarn",
|
|
2940
|
+
"ci-check": "carbon-cli ci-check",
|
|
2941
|
+
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
|
|
2942
|
+
"doctoc": "doctoc --title '## Table of Contents'",
|
|
2943
|
+
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
|
|
2944
|
+
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
|
|
2945
|
+
"lint": "eslint actions config codemods packages",
|
|
2946
|
+
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
|
|
2947
|
+
"test": "cross-env BABEL_ENV=test jest",
|
|
2948
|
+
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
|
|
2949
|
+
}
|
|
2950
|
+
}\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.",documentation:'The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
|
|
2951
|
+
/**
|
|
2952
|
+
* The unique identifier for the block. This is used to identify the block in
|
|
2953
|
+
* the DOM and in the block map. It is added as a data attribute
|
|
2954
|
+
* \`data-block-id\` to the root element of the block if a DOM node is
|
|
2955
|
+
* rendered.
|
|
2956
|
+
*/
|
|
2957
|
+
data-block-id?: string
|
|
2958
|
+
/**
|
|
2959
|
+
* Represents a data block group. This is similar to \`data-block-id\` but it
|
|
2960
|
+
* doesn't have to be unique just like \`class\`. This is used to group blocks
|
|
2961
|
+
* together in the DOM and in the block map. It is added as a data attribute
|
|
2962
|
+
* \`data-block-class\` to the root element of the block if a DOM node is
|
|
2963
|
+
* rendered.
|
|
2964
|
+
*/
|
|
2965
|
+
data-block-class?: string
|
|
2966
|
+
/**
|
|
2967
|
+
* The className applied to the root element of the component.
|
|
2968
|
+
*/
|
|
2969
|
+
className?: string
|
|
2970
|
+
/**
|
|
2971
|
+
* The style applied to the root element of the component.
|
|
2972
|
+
*/
|
|
2973
|
+
style?: React.CSSProperties
|
|
2974
|
+
/**
|
|
2975
|
+
* The list of color presets to show in the color picker. The signature of the
|
|
2976
|
+
* color presets is:
|
|
2977
|
+
*
|
|
2978
|
+
* \`\`\`ts
|
|
2979
|
+
* export interface ColorPreset {
|
|
2980
|
+
* label: string;
|
|
2981
|
+
* color: string;
|
|
2982
|
+
* }
|
|
2983
|
+
* \`\`\`
|
|
2984
|
+
*
|
|
2985
|
+
* The color can be a hex or hexa value.
|
|
2986
|
+
*/
|
|
2987
|
+
presets?: ColorPreset[]
|
|
2988
|
+
/**
|
|
2989
|
+
* Whether to include the custom color picker. If \`false\`, the color picker
|
|
2990
|
+
* will only show the color presets. The custom color picker allows the user
|
|
2991
|
+
* to pick any color. You can set the \`allowAlpha\` prop to \`false\` to disable
|
|
2992
|
+
* the alpha channel.
|
|
2993
|
+
*
|
|
2994
|
+
* @default true
|
|
2995
|
+
*/
|
|
2996
|
+
includePicker?: boolean
|
|
2997
|
+
/**
|
|
2998
|
+
* Whether to show the color label. The color label is the name of the color
|
|
2999
|
+
* that is currently selected. If boolean, the label will be shown only when
|
|
3000
|
+
* the color is not \`null\`. If a function, the function will be called with
|
|
3001
|
+
* the current color and should return a string. If \`false\`, the label will
|
|
3002
|
+
* not be shown.
|
|
3003
|
+
*
|
|
3004
|
+
* @default true
|
|
3005
|
+
*/
|
|
3006
|
+
colorLabel?: | boolean
|
|
3007
|
+
| ((
|
|
3008
|
+
color: Color | null,
|
|
3009
|
+
options: {
|
|
3010
|
+
isIndeterminate: boolean;
|
|
3011
|
+
},
|
|
3012
|
+
) => string)
|
|
3013
|
+
/**
|
|
3014
|
+
* Whether to allow alpha values in the custom color picker.
|
|
3015
|
+
*
|
|
3016
|
+
* @default true
|
|
3017
|
+
*/
|
|
3018
|
+
allowAlpha?: boolean
|
|
3019
|
+
/**
|
|
2423
3020
|
* Whether to allow the removal of the color.
|
|
2424
3021
|
*
|
|
2425
3022
|
* @default false
|
|
@@ -3701,28 +4298,97 @@ DateField supports various calendar systems used around the world. The calendar
|
|
|
3701
4298
|
</I18nProvider>
|
|
3702
4299
|
\`\`\`
|
|
3703
4300
|
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
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
|
+
|
|
4370
|
+
| Key | Function |
|
|
4371
|
+
| ----------------- | ---------------------------------------- |
|
|
4372
|
+
| \`ArrowLeft/Right\` | Navigate between date segments |
|
|
4373
|
+
| \`ArrowUp/Down\` | Increment/decrement the selected segment |`,props:`interface DateFieldProps {
|
|
4374
|
+
/**
|
|
4375
|
+
* The unique identifier for the block. This is used to identify the block in
|
|
4376
|
+
* the DOM and in the block map. It is added as a data attribute
|
|
4377
|
+
* \`data-block-id\` to the root element of the block if a DOM node is
|
|
4378
|
+
* rendered.
|
|
4379
|
+
*/
|
|
4380
|
+
data-block-id?: string
|
|
4381
|
+
/**
|
|
4382
|
+
* Represents a data block group. This is similar to \`data-block-id\` but it
|
|
4383
|
+
* doesn't have to be unique just like \`class\`. This is used to group blocks
|
|
4384
|
+
* together in the DOM and in the block map. It is added as a data attribute
|
|
4385
|
+
* \`data-block-class\` to the root element of the block if a DOM node is
|
|
4386
|
+
* rendered.
|
|
4387
|
+
*/
|
|
4388
|
+
data-block-class?: string
|
|
4389
|
+
/**
|
|
4390
|
+
* The className applied to the root element of the component.
|
|
4391
|
+
*/
|
|
3726
4392
|
className?: string
|
|
3727
4393
|
/**
|
|
3728
4394
|
* The style applied to the root element of the component.
|
|
@@ -3740,6 +4406,15 @@ errorMessage?: string
|
|
|
3740
4406
|
* The warning message to display when the input is in a warning state.
|
|
3741
4407
|
*/
|
|
3742
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"
|
|
3743
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) => (
|
|
3744
4419
|
<VariantViewer<React.ComponentProps<typeof DateField>>
|
|
3745
4420
|
cellStyle={{ minWidth: 300 }}
|
|
@@ -4057,7 +4732,50 @@ warningMessage?: string
|
|
|
4057
4732
|
onChange={fn()}
|
|
4058
4733
|
label="Label"
|
|
4059
4734
|
placeholderValue={new CalendarDate(2022, 1, 1)}
|
|
4060
|
-
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";
|
|
4061
4779
|
import React from "react";
|
|
4062
4780
|
|
|
4063
4781
|
import { DateField } from "../DateField";
|
|
@@ -6781,7 +7499,6 @@ orientation?: any
|
|
|
6781
7499
|
import { EllipseIcon } from "@baseline-ui/icons/16";
|
|
6782
7500
|
import { XIcon } from "@baseline-ui/icons/20";
|
|
6783
7501
|
import { themeVars } from "@baseline-ui/tokens";
|
|
6784
|
-
import { last } from "lodash";
|
|
6785
7502
|
import React, { useCallback, useRef, useState } from "react";
|
|
6786
7503
|
import { mergeProps, useButton, useFocusRing } from "react-aria";
|
|
6787
7504
|
import { useListData } from "react-stately";
|
|
@@ -6904,7 +7621,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
|
|
|
6904
7621
|
<ActionButton
|
|
6905
7622
|
label="Scroll to bottom"
|
|
6906
7623
|
onPress={() => {
|
|
6907
|
-
handleRef.current?.scrollIntoView(
|
|
7624
|
+
handleRef.current?.scrollIntoView(gridItems.at(-1)?.id ?? "", {
|
|
6908
7625
|
behavior: "smooth",
|
|
6909
7626
|
block: "end",
|
|
6910
7627
|
});
|
|
@@ -6914,7 +7631,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
|
|
|
6914
7631
|
<ActionButton
|
|
6915
7632
|
label="Focus Last Item"
|
|
6916
7633
|
onPress={() => {
|
|
6917
|
-
handleRef.current?.setFocusedKey(
|
|
7634
|
+
handleRef.current?.setFocusedKey(gridItems.at(-1)?.id ?? "");
|
|
6918
7635
|
}}
|
|
6919
7636
|
preventFocusOnPress={true}
|
|
6920
7637
|
/>
|
|
@@ -7211,7 +7928,11 @@ locale?: string
|
|
|
7211
7928
|
/**
|
|
7212
7929
|
* The messages to use for internationalization.
|
|
7213
7930
|
*/
|
|
7214
|
-
messages?:
|
|
7931
|
+
messages?: {
|
|
7932
|
+
[lang: string]: {
|
|
7933
|
+
[key: string]: string
|
|
7934
|
+
}
|
|
7935
|
+
}
|
|
7215
7936
|
/**
|
|
7216
7937
|
* Whether to log messages when translations in the current locale are
|
|
7217
7938
|
* missing.
|
|
@@ -16864,7 +17585,1973 @@ statusLabel?: {
|
|
|
16864
17585
|
on: "On",
|
|
16865
17586
|
off: "Off",
|
|
16866
17587
|
}}
|
|
16867
|
-
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
|
|
16868
19555
|
a tab panel by wrapping a \`TabItem\` component in a \`Tabs\` component.
|
|
16869
19556
|
|
|
16870
19557
|
* Full support for mouse, keyboard, and touch interactions
|
|
@@ -26632,7 +29319,7 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
|
|
|
26632
29319
|
formatValue={(value: number) => \`\${value} pt\`}
|
|
26633
29320
|
aria-label="Icon slider"
|
|
26634
29321
|
onTriggerPress={fn()}
|
|
26635
|
-
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var
|
|
29322
|
+
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var i={gettingStarted:`# Getting started
|
|
26636
29323
|
|
|
26637
29324
|
Install the packages required for using Baseline UI with the following command:
|
|
26638
29325
|
|
|
@@ -27857,7 +30544,7 @@ padding={[null, "lg", "xl"]}
|
|
|
27857
30544
|
|
|
27858
30545
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
27859
30546
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
27860
|
-
* [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.55.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.0"};var u=`
|
|
27861
30548
|
# Baseline UI MCP Server Guidelines
|
|
27862
30549
|
|
|
27863
30550
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -27900,7 +30587,7 @@ When recommending styling or customization approaches:
|
|
|
27900
30587
|
4. **Theming Support**: Design systems with themes enabled; use the theming guides for color scheme customization
|
|
27901
30588
|
5. **Browser Compatibility**: Ensure components are used in browser environments with required APIs
|
|
27902
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.
|
|
27903
|
-
`,
|
|
30590
|
+
`,a=`
|
|
27904
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.
|
|
27905
30592
|
|
|
27906
30593
|
A component can be imported using:
|
|
@@ -27908,7 +30595,7 @@ A component can be imported using:
|
|
|
27908
30595
|
\`\`\`tsx
|
|
27909
30596
|
import { ComponentName } from "@baseline-ui/core";
|
|
27910
30597
|
\`\`\`
|
|
27911
|
-
`,
|
|
30598
|
+
`,r=`
|
|
27912
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.
|
|
27913
30600
|
|
|
27914
30601
|
An icon can be imported using:
|
|
@@ -27924,7 +30611,7 @@ Example:
|
|
|
27924
30611
|
\`\`\`tsx
|
|
27925
30612
|
import { IconName } from "@baseline-ui/icons/12";
|
|
27926
30613
|
\`\`\`
|
|
27927
|
-
`;var
|
|
30614
|
+
`;var m=`
|
|
27928
30615
|
Detailed documentation, props, and story IDs for any Baseline UI component. This resource provides comprehensive component specifications and usage examples.
|
|
27929
30616
|
|
|
27930
30617
|
## Response Structure
|
|
@@ -27960,11 +30647,11 @@ Components can be imported using:
|
|
|
27960
30647
|
\`\`\`tsx
|
|
27961
30648
|
import { ComponentName } from "@baseline-ui/core";
|
|
27962
30649
|
\`\`\`
|
|
27963
|
-
`,
|
|
30650
|
+
`,h=`
|
|
27964
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.
|
|
27965
|
-
`,
|
|
30652
|
+
`,b=`
|
|
27966
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.
|
|
27967
|
-
`,
|
|
30654
|
+
`,l=`
|
|
27968
30655
|
Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
|
|
27969
30656
|
|
|
27970
30657
|
## Usage
|
|
@@ -27972,9 +30659,9 @@ Best practices and guidelines for using Baseline UI components, styling, and des
|
|
|
27972
30659
|
Use this resource to:
|
|
27973
30660
|
- Understand best practices for using Baseline UI components
|
|
27974
30661
|
- Understand styling guidelines for using Baseline UI components
|
|
27975
|
-
`,
|
|
30662
|
+
`,s=`
|
|
27976
30663
|
A guide for implementing styling elements in Baseline UI components or applying styling to existing components. READ THIS BEFORE DOING ANYTHING.
|
|
27977
|
-
`,
|
|
30664
|
+
`,g=`
|
|
27978
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.
|
|
27979
30666
|
|
|
27980
30667
|
## Available Resources
|
|
@@ -28012,13 +30699,13 @@ Use this tool to:
|
|
|
28012
30699
|
- Consult **list_components** to find the right component for your needs
|
|
28013
30700
|
- Reference **theming** for custom design systems
|
|
28014
30701
|
- Check **styling** for CSS and design token guidance
|
|
28015
|
-
`;var
|
|
30702
|
+
`;var I=`# List of available components in Baseline UI design system
|
|
28016
30703
|
| Name | Description | Similar To |
|
|
28017
30704
|
| --- | --- | --- |
|
|
28018
|
-
${Object.entries(
|
|
30705
|
+
${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
|
|
28019
30706
|
`)}
|
|
28020
|
-
`,
|
|
30707
|
+
`,P=Object.entries(c).map(([n,t])=>`${n}
|
|
28021
30708
|
|
|
28022
|
-
${
|
|
30709
|
+
${t.map(e=>"- "+e).join(`
|
|
28023
30710
|
`)}`).join(`
|
|
28024
|
-
`);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())();
|