@gyramais/gyra-design 0.2.46 → 0.2.48

package/dist/components/Skeleton/Skeleton.d.ts

@@ -25,6 +25,16 @@ type SkeletonProps = {
      * para o que de fato esta sendo processado.
      */
     animated?: boolean;
+    /**
+     * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao
+     * anuncia nada.
+     *
+     * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma
+     * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de
+     * status unico, fora deles. Sem isso, cada bloco vira uma live region e o
+     * leitor de tela repete "Carregando" uma vez por celula.
+     */
+    decorative?: boolean;
 };
 /**
  * Placeholder de carregamento no formato do conteudo que esta chegando.
@@ -36,5 +46,5 @@ type SkeletonProps = {
  * A animacao e um brilho que varre o bloco, desligado sob
  * `prefers-reduced-motion`.
  */
-declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, decorative, }: SkeletonProps) => React.JSX.Element;
 export { Skeleton };

package/dist/components/Skeleton/index.js

@@ -3,5 +3,5 @@
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/r=a,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=n(e,a(r)))}return e}function a(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var i in r)e.call(r,i)&&r[i]&&(a=n(a,i));return a}function n(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var n=t(a.exports);const i=({id:t,className:r,variant:a="text",lines:i=3,size:s=40,width:o,height:l,animated:c=!0})=>{const u=c?"":"gyramais-skeleton-static";if("text"===a)return e.createElement("div",{id:t,role:"status","aria-label":"Carregando",className:n("gyramais-skeleton-lines",r)},Array.from({length:i}).map((t,r)=>e.createElement("span",{key:r,className:n("gyramais-skeleton gyramais-skeleton-line",u),style:{width:o??(i>1&&r===i-1?"60%":"100%"),height:l}})));const f="circle"===a;return e.createElement("span",{id:t,role:"status","aria-label":"Carregando",className:n("gyramais-skeleton",`gyramais-skeleton-${a}`,u,r),style:{width:f?s:o??"100%",height:f?s:l??"100%"}})};export{i as Skeleton};
+*/r=a,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=n(e,a(r)))}return e}function a(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var i in r)e.call(r,i)&&r[i]&&(a=n(a,i));return a}function n(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var n=t(a.exports);const i=({id:t,className:r,variant:a="text",lines:i=3,size:s=40,width:o,height:l,animated:c=!0,decorative:u=!1})=>{const f=c?"":"gyramais-skeleton-static",m=u?{"aria-hidden":!0}:{role:"status","aria-label":"Carregando"};if("text"===a)return e.createElement("div",{id:t,...m,className:n("gyramais-skeleton-lines",r)},Array.from({length:i}).map((t,r)=>e.createElement("span",{key:r,className:n("gyramais-skeleton gyramais-skeleton-line",f),style:{width:o??(i>1&&r===i-1?"60%":"100%"),height:l}})));const p="circle"===a;return e.createElement("span",{id:t,...m,className:n("gyramais-skeleton",`gyramais-skeleton-${a}`,f,r),style:{width:p?s:o??"100%",height:p?s:l??"100%"}})};export{i as Skeleton};
 //# sourceMappingURL=index.js.map

package/dist/components/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\ntype SkeletonProps = {\n  id?: string;\n  className?: string;\n  /**\n   * Forma do placeholder:\n   * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)\n   * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)\n   * - `circle`: avatar, badge, icone\n   */\n  variant?: \"text\" | \"block\" | \"circle\";\n  /** Quantidade de linhas. So vale para `variant=\"text\"`. */\n  lines?: number;\n  /** Diametro do circulo. So vale para `variant=\"circle\"`. */\n  size?: number;\n  width?: number | string;\n  height?: number | string;\n  /**\n   * Liga o brilho que varre o bloco. Padrao `true`.\n   *\n   * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na\n   * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem\n   * prometer trabalho que nao esta em curso, e o movimento fica reservado\n   * para o que de fato esta sendo processado.\n   */\n  animated?: boolean;\n};\n\n/**\n * Placeholder de carregamento no formato do conteudo que esta chegando.\n *\n * Substitui o spinner: em vez de um indicador generico no meio da tela, o\n * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o\n * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).\n *\n * A animacao e um brilho que varre o bloco, desligado sob\n * `prefers-reduced-motion`.\n */\nconst Skeleton = ({\n  id,\n  className,\n  variant = \"text\",\n  lines = 3,\n  size = 40,\n  width,\n  height,\n  animated = true,\n}: SkeletonProps) => {\n  const motion = animated ? \"\" : \"gyramais-skeleton-static\";\n\n  if (variant === \"text\") {\n    return (\n      <div\n        id={id}\n        role=\"status\"\n        aria-label=\"Carregando\"\n        className={classNames(\"gyramais-skeleton-lines\", className)}\n      >\n        {Array.from({ length: lines }).map((_, index) => (\n          <span\n            key={index}\n            className={classNames(\n              \"gyramais-skeleton gyramais-skeleton-line\",\n              motion,\n            )}\n            style={{\n              // A ultima linha sai mais curta para imitar o fim de um paragrafo.\n              width: width ?? (lines > 1 && index === lines - 1 ? \"60%\" : \"100%\"),\n              height,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const isCircle = variant === \"circle\";\n\n  return (\n    <span\n      id={id}\n      role=\"status\"\n      aria-label=\"Carregando\"\n      className={classNames(\n        \"gyramais-skeleton\",\n        `gyramais-skeleton-${variant}`,\n        motion,\n        className,\n      )}\n      style={{\n        width: isCircle ? size : (width ?? \"100%\"),\n        height: isCircle ? size : (height ?? \"100%\"),\n      }}\n    />\n  );\n};\n\nexport { Skeleton };\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","Skeleton","id","className","variant","lines","size","width","height","animated","motion","React","createElement","role","from","map","_","index","style","isCircle"],"mappings":";;;;;MAOC,WAGA,IAAIA,EAAS,CAAA,EAAGC,eAEhB,SAASC,IAGR,IAFA,IAAIC,EAAU,GAELC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAC1C,IAAIG,EAAMF,UAAUD,GAChBG,IACHJ,EAAUK,EAAYL,EAASM,EAAWF,IAE9C,CAEE,OAAOJ,CACT,CAEC,SAASM,EAAYF,GACpB,GAAmB,iBAARA,GAAmC,iBAARA,EACrC,OAAOA,EAGR,GAAmB,iBAARA,EACV,MAAO,GAGR,GAAIG,MAAMC,QAAQJ,GACjB,OAAOL,EAAWU,MAAM,KAAML,GAG/B,GAAIA,EAAIM,WAAaC,OAAOC,UAAUF,WAAaN,EAAIM,SAASA,WAAWG,SAAS,iBACnF,OAAOT,EAAIM,WAGZ,IAAIV,EAAU,GAEd,IAAK,IAAIc,KAAOV,EACXP,EAAOkB,KAAKX,EAAKU,IAAQV,EAAIU,KAChCd,EAAUK,EAAYL,EAASc,IAIjC,OAAOd,CACT,CAEC,SAASK,EAAaW,EAAOC,GAC5B,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAOC,SAC3CpB,EAAWqB,QAAUrB,EACrBmB,UAAiBnB,GAOjBsB,OAAOtB,WAAaA,CAEtB,CArEA,sBCkCA,MAAMuB,EAAW,EACfC,KACAC,YACAC,UAAU,OACVC,QAAQ,EACRC,OAAO,GACPC,QACAC,SACAC,YAAW,MAEX,MAAMC,EAASD,EAAW,GAAK,2BAE/B,GAAgB,SAAZL,EACF,OACEO,EAAAC,cAAA,MAAA,CACEV,GAAIA,EACJW,KAAK,SAAQ,aACF,aACXV,UAAWzB,EAAW,0BAA2ByB,IAEhDjB,MAAM4B,KAAK,CAAEhC,OAAQuB,IAASU,IAAI,CAACC,EAAGC,IACrCN,EAAAC,cAAA,OAAA,CACEnB,IAAKwB,EACLd,UAAWzB,EACT,2CACAgC,GAEFQ,MAAO,CAELX,MAAOA,IAAUF,EAAQ,GAAKY,IAAUZ,EAAQ,EAAI,MAAQ,QAC5DG,cAQZ,MAAMW,EAAuB,WAAZf,EAEjB,OACEO,EAAAC,cAAA,OAAA,CACEV,GAAIA,EACJW,KAAK,SAAQ,aACF,aACXV,UAAWzB,EACT,oBACA,qBAAqB0B,IACrBM,EACAP,GAEFe,MAAO,CACLX,MAAOY,EAAWb,EAAQC,GAAS,OACnCC,OAAQW,EAAWb,EAAQE,GAAU","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\ntype SkeletonProps = {\n  id?: string;\n  className?: string;\n  /**\n   * Forma do placeholder:\n   * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)\n   * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)\n   * - `circle`: avatar, badge, icone\n   */\n  variant?: \"text\" | \"block\" | \"circle\";\n  /** Quantidade de linhas. So vale para `variant=\"text\"`. */\n  lines?: number;\n  /** Diametro do circulo. So vale para `variant=\"circle\"`. */\n  size?: number;\n  width?: number | string;\n  height?: number | string;\n  /**\n   * Liga o brilho que varre o bloco. Padrao `true`.\n   *\n   * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na\n   * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem\n   * prometer trabalho que nao esta em curso, e o movimento fica reservado\n   * para o que de fato esta sendo processado.\n   */\n  animated?: boolean;\n  /**\n   * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao\n   * anuncia nada.\n   *\n   * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma\n   * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de\n   * status unico, fora deles. Sem isso, cada bloco vira uma live region e o\n   * leitor de tela repete \"Carregando\" uma vez por celula.\n   */\n  decorative?: boolean;\n};\n\n/**\n * Placeholder de carregamento no formato do conteudo que esta chegando.\n *\n * Substitui o spinner: em vez de um indicador generico no meio da tela, o\n * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o\n * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).\n *\n * A animacao e um brilho que varre o bloco, desligado sob\n * `prefers-reduced-motion`.\n */\nconst Skeleton = ({\n  id,\n  className,\n  variant = \"text\",\n  lines = 3,\n  size = 40,\n  width,\n  height,\n  animated = true,\n  decorative = false,\n}: SkeletonProps) => {\n  const motion = animated ? \"\" : \"gyramais-skeleton-static\";\n  const a11y = decorative\n    ? ({ \"aria-hidden\": true } as const)\n    : ({ role: \"status\", \"aria-label\": \"Carregando\" } as const);\n\n  if (variant === \"text\") {\n    return (\n      <div\n        id={id}\n        {...a11y}\n        className={classNames(\"gyramais-skeleton-lines\", className)}\n      >\n        {Array.from({ length: lines }).map((_, index) => (\n          <span\n            key={index}\n            className={classNames(\n              \"gyramais-skeleton gyramais-skeleton-line\",\n              motion,\n            )}\n            style={{\n              // A ultima linha sai mais curta para imitar o fim de um paragrafo.\n              width: width ?? (lines > 1 && index === lines - 1 ? \"60%\" : \"100%\"),\n              height,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const isCircle = variant === \"circle\";\n\n  return (\n    <span\n      id={id}\n      {...a11y}\n      className={classNames(\n        \"gyramais-skeleton\",\n        `gyramais-skeleton-${variant}`,\n        motion,\n        className,\n      )}\n      style={{\n        width: isCircle ? size : (width ?? \"100%\"),\n        height: isCircle ? size : (height ?? \"100%\"),\n      }}\n    />\n  );\n};\n\nexport { Skeleton };\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","Skeleton","id","className","variant","lines","size","width","height","animated","decorative","motion","a11y","role","React","createElement","from","map","_","index","style","isCircle"],"mappings":";;;;;MAOC,WAGA,IAAIA,EAAS,CAAA,EAAGC,eAEhB,SAASC,IAGR,IAFA,IAAIC,EAAU,GAELC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAC1C,IAAIG,EAAMF,UAAUD,GAChBG,IACHJ,EAAUK,EAAYL,EAASM,EAAWF,IAE9C,CAEE,OAAOJ,CACT,CAEC,SAASM,EAAYF,GACpB,GAAmB,iBAARA,GAAmC,iBAARA,EACrC,OAAOA,EAGR,GAAmB,iBAARA,EACV,MAAO,GAGR,GAAIG,MAAMC,QAAQJ,GACjB,OAAOL,EAAWU,MAAM,KAAML,GAG/B,GAAIA,EAAIM,WAAaC,OAAOC,UAAUF,WAAaN,EAAIM,SAASA,WAAWG,SAAS,iBACnF,OAAOT,EAAIM,WAGZ,IAAIV,EAAU,GAEd,IAAK,IAAIc,KAAOV,EACXP,EAAOkB,KAAKX,EAAKU,IAAQV,EAAIU,KAChCd,EAAUK,EAAYL,EAASc,IAIjC,OAAOd,CACT,CAEC,SAASK,EAAaW,EAAOC,GAC5B,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAOC,SAC3CpB,EAAWqB,QAAUrB,EACrBmB,UAAiBnB,GAOjBsB,OAAOtB,WAAaA,CAEtB,CArEA,sBC4CA,MAAMuB,EAAW,EACfC,KACAC,YACAC,UAAU,OACVC,QAAQ,EACRC,OAAO,GACPC,QACAC,SACAC,YAAW,EACXC,cAAa,MAEb,MAAMC,EAASF,EAAW,GAAK,2BACzBG,EAAOF,EACR,CAAE,eAAe,GACjB,CAAEG,KAAM,SAAU,aAAc,cAErC,GAAgB,SAAZT,EACF,OACEU,EAAAC,cAAA,MAAA,CACEb,GAAIA,KACAU,EACJT,UAAWzB,EAAW,0BAA2ByB,IAEhDjB,MAAM8B,KAAK,CAAElC,OAAQuB,IAASY,IAAI,CAACC,EAAGC,IACrCL,EAAAC,cAAA,OAAA,CACEtB,IAAK0B,EACLhB,UAAWzB,EACT,2CACAiC,GAEFS,MAAO,CAELb,MAAOA,IAAUF,EAAQ,GAAKc,IAAUd,EAAQ,EAAI,MAAQ,QAC5DG,cAQZ,MAAMa,EAAuB,WAAZjB,EAEjB,OACEU,EAAAC,cAAA,OAAA,CACEb,GAAIA,KACAU,EACJT,UAAWzB,EACT,oBACA,qBAAqB0B,IACrBO,EACAR,GAEFiB,MAAO,CACLb,MAAOc,EAAWf,EAAQC,GAAS,OACnCC,OAAQa,EAAWf,EAAQE,GAAU","x_google_ignoreList":[0]}

package/dist/components/Table/Table.d.ts

@@ -19,11 +19,24 @@ type TableProps = {
         text?: string;
     };
     headlesss?: boolean;
+    /**
+     * Estado de carregamento da tabela. O desenho depende de JA existir dado:
+     *
+     * - **sem linhas** (primeira carga): linhas de skeleton na forma das
+     *   `columns`, entao a tabela nao muda de largura quando o dado chega.
+     * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas
+     *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o
+     *   que o usuario esta lendo para mostrar um placeholder e' pior do que
+     *   deixar o dado velho a vista por um instante.
+     */
+    loading?: boolean;
+    /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */
+    loadingRows?: number;
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;
     /** Optional per-row className. Receives the row's data object and its
      *  zero-based index. Useful for transient state highlights (e.g. a row
      *  that just finished processing in real-time). */
     rowClassName?: (data: any, index: number) => string | undefined;
 };
-declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
+declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, loading, loadingRows, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
 export { Table };

package/dist/components/Table/index.js

@@ -3,5 +3,5 @@
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/r=n,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=n(e,a(r)))}return e}function a(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return t.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var i in a)e.call(a,i)&&a[i]&&(r=n(r,i));return r}function n(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var i=a(n.exports);const l=({id:t,className:a,icon:r,text:n})=>e.createElement("div",{id:t,className:i("gyramais-empty",a)},r&&e.createElement("div",{className:"gyramais-empty-icon"},r),n&&e.createElement("div",{className:"gyramais-empty-text"},n)),c=({id:a,className:r,height:n,type:c="list",columns:s=[],data:o=[],empty:m={icon:void 0,text:"Tabela vazia"},headlesss:u=!1,onRowClick:d,rowClassName:y})=>{const p=t(()=>{const t=s.reduce((e,t)=>(e[t.key]=t,e),{}),a=Object.keys(t);return o.reduce((r,n,i)=>{const l=[];a.forEach(a=>{const{render:r,align:i}=t[a]||{},c=r?.(n[a],n)||n[a],s=typeof c;l.push(e.createElement("td",{key:`${a}-${JSON.stringify(n)}`,className:`gyramais-table-content-col gyramais-table-text-${i||"center"}`},["string","number","bigint"].includes(s)&&e.createElement("div",{className:"with-clamp"},c),"object"===s&&e.createElement("div",{className:"overflow-hidden"},c)))});const c=y?.(n,i);return r.push(e.createElement("tr",{key:`${i}-${JSON.stringify(n)}`,className:c,onClick:e=>d?.(e,n)},l)),r},[])},[s,o,y]);return e.createElement("div",{id:a,className:i("gyramais-table-container",`gyramais-table-${c}-container`,r),style:{maxHeight:n||"fit-content"}},e.createElement("table",null,e.createElement("tbody",null,p),!u&&e.createElement("thead",null,e.createElement("tr",null,s.map(t=>e.createElement("th",{key:t.key,className:`gyramais-table-text-${t.align||"center"}`,style:{minWidth:t.width||"auto",width:t.width||"auto",maxWidth:t.width||"auto"}},t.header))))),0===o.length&&e.createElement(l,{icon:m.icon,text:m.text}))};export{c as Table};
+*/r=n,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=n(e,a(r)))}return e}function a(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return t.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var i in a)e.call(a,i)&&a[i]&&(r=n(r,i));return r}function n(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var i=a(n.exports);const l=({id:t,className:a,icon:r,text:n})=>e.createElement("div",{id:t,className:i("gyramais-empty",a)},r&&e.createElement("div",{className:"gyramais-empty-icon"},r),n&&e.createElement("div",{className:"gyramais-empty-text"},n)),s=({id:t,className:a,variant:r="text",lines:n=3,size:l=40,width:s,height:c,animated:o=!0,decorative:m=!1})=>{const d=o?"":"gyramais-skeleton-static",y=m?{"aria-hidden":!0}:{role:"status","aria-label":"Carregando"};if("text"===r)return e.createElement("div",{id:t,...y,className:i("gyramais-skeleton-lines",a)},Array.from({length:n}).map((t,a)=>e.createElement("span",{key:a,className:i("gyramais-skeleton gyramais-skeleton-line",d),style:{width:s??(n>1&&a===n-1?"60%":"100%"),height:c}})));const g="circle"===r;return e.createElement("span",{id:t,...y,className:i("gyramais-skeleton",`gyramais-skeleton-${r}`,d,a),style:{width:g?l:s??"100%",height:g?l:c??"100%"}})},c=({id:a,className:r,height:n,type:c="list",columns:o=[],data:m=[],empty:d={icon:void 0,text:"Tabela vazia"},headlesss:y=!1,loading:g=!1,loadingRows:u=5,onRowClick:h,rowClassName:p})=>{const f=g&&0===m.length,b=g&&m.length>0,v=t(()=>f?Array.from({length:u}).map((t,a)=>e.createElement("tr",{key:`skeleton-${a}`,className:"gyramais-table-skeleton-row","aria-hidden":"true"},o.map((t,r)=>e.createElement("td",{key:t.key,className:`gyramais-table-content-col gyramais-table-text-${t.align||"center"}`},e.createElement(s,{decorative:!0,variant:"block",height:12,width:`${[68,82,56,74,62][(a+r)%5]}%`}))))):null,[f,u,o]),N=t(()=>{const t=o.reduce((e,t)=>(e[t.key]=t,e),{}),a=Object.keys(t);return m.reduce((r,n,i)=>{const l=[];a.forEach(a=>{const{render:r,align:i}=t[a]||{},s=r?.(n[a],n)||n[a],c=typeof s;l.push(e.createElement("td",{key:`${a}-${JSON.stringify(n)}`,className:`gyramais-table-content-col gyramais-table-text-${i||"center"}`},["string","number","bigint"].includes(c)&&e.createElement("div",{className:"with-clamp"},s),"object"===c&&e.createElement("div",{className:"overflow-hidden"},s)))});const s=p?.(n,i);return r.push(e.createElement("tr",{key:`${i}-${JSON.stringify(n)}`,className:s,onClick:e=>h?.(e,n)},l)),r},[])},[o,m,p]);return e.createElement("div",{id:a,className:i("gyramais-table-container",`gyramais-table-${c}-container`,r),style:{maxHeight:n||"fit-content"}},b&&e.createElement("div",{className:"gyramais-table-refetching-bar","aria-hidden":"true"}),g&&e.createElement("span",{className:"gyramais-table-status",role:"status"},f?"Carregando a tabela":"Atualizando a tabela"),e.createElement("table",{className:b?"gyramais-table-refetching":void 0},e.createElement("tbody",null,v??N),!y&&e.createElement("thead",null,e.createElement("tr",null,o.map(t=>e.createElement("th",{key:t.key,className:`gyramais-table-text-${t.align||"center"}`,style:{minWidth:t.width||"auto",width:t.width||"auto",maxWidth:t.width||"auto"}},t.header))))),0===m.length&&!g&&e.createElement(l,{icon:d.icon,text:d.text}))};export{c as Table};
 //# sourceMappingURL=index.js.map

package/dist/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Empty/Empty.tsx","../../../src/components/Table/Table.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\n\nimport \"./index.css\";\n\ntype EmptyProps = {\n  id?: string;\n  className?: string;\n  /**\n   * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do\n   * tipo \"primeiro uso, ainda nao ha nada aqui\", onde ela vem acompanhada de\n   * um titulo e de uma acao.\n   *\n   * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:\n   * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e\n   * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.\n   */\n  icon?: React.ReactNode;\n  text?: string;\n};\n\n/**\n * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.\n *\n * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o\n * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia\n * (\"nenhuma sanção encontrada\"), entao nao deve parecer erro nem falha de\n * carregamento.\n */\nconst Empty = ({ id, className, icon, text }: EmptyProps) => {\n  return (\n    <div id={id} className={classNames(\"gyramais-empty\", className)}>\n      {icon && <div className=\"gyramais-empty-icon\">{icon}</div>}\n\n      {text && <div className=\"gyramais-empty-text\">{text}</div>}\n    </div>\n  );\n};\n\nexport { Empty };\n","import React, { useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\nimport { Empty } from \"../Empty\";\n\ntype TableColumnProps = {\n  key: string;\n  header: string;\n  render?: (value: any, data: any) => React.ReactNode | string;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n}\ntype TableProps = {\n  id?: string;\n  className?: string;\n  height?: number;\n  type?: 'list' | 'card' | 'bordered';\n  columns: Array<TableColumnProps>;\n  data: Array<any>;\n  empty?: {\n    icon?: React.ReactNode;\n    text?: string;\n  };\n  headlesss?: boolean\n  onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;\n  /** Optional per-row className. Receives the row's data object and its\n   *  zero-based index. Useful for transient state highlights (e.g. a row\n   *  that just finished processing in real-time). */\n  rowClassName?: (data: any, index: number) => string | undefined;\n}\n\nconst Table = ({\n  id,\n  className,\n  height,\n  type = 'list',\n  columns = [],\n  data = [],\n  empty = {\n    icon: undefined,\n    text: 'Tabela vazia',\n  },\n  headlesss = false,\n  onRowClick,\n  rowClassName,\n}: TableProps) => {\n  const formattedData = useMemo(() => {\n    const columnsByKey = columns.reduce((acc: { [key: string]: TableColumnProps }, column) => {\n      const key = column.key;\n      acc[key] = column;\n\n      return acc;\n    }, {});\n    const keys = Object.keys(columnsByKey);\n\n    const temp = data.reduce((acc, item, index) => {\n      const cells: Array<React.ReactNode> = [];\n\n      keys.forEach((key) => {\n        const { render, align } = columnsByKey[key] || {};\n        const content = render?.(item[key], item) || item[key];\n        const contentType = typeof content;\n\n        cells.push(\n          <td key={`${key}-${JSON.stringify(item)}`} className={`gyramais-table-content-col gyramais-table-text-${align || 'center'}`}>\n            {['string', 'number', 'bigint'].includes(contentType) && (\n              <div className=\"with-clamp\">\n                {content}\n              </div>\n            )}\n\n            {contentType === 'object' && (\n              <div className=\"overflow-hidden\">\n                {content}\n              </div>\n            )}\n          </td>\n        )\n      })\n\n      const customRowClass = rowClassName?.(item, index);\n\n      acc.push(\n        <tr\n          key={`${index}-${JSON.stringify(item)}`}\n          className={customRowClass}\n          onClick={(e) => onRowClick?.(e, item)}\n        >\n          {cells}\n        </tr>\n      )\n\n      return acc;\n    }, []);\n\n    return temp\n  }, [columns, data, rowClassName]);\n\n  return (\n    <div\n      id={id}\n      className={classNames(\n        'gyramais-table-container',\n        `gyramais-table-${type}-container`,\n        className,\n      )}\n      style={{\n        maxHeight: height || 'fit-content',\n      }}\n    >\n      <table>\n        <tbody>\n          {formattedData}\n        </tbody>\n        {!headlesss && (\n          <thead>\n            <tr>\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className={`gyramais-table-text-${column.align || 'center'}`}\n                  style={{\n                    minWidth: column.width || 'auto',\n                    width: column.width || 'auto',\n                    maxWidth: column.width || 'auto',\n                  }}\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n        )}\n      </table>\n\n      {data.length === 0 && (\n        <Empty\n          icon={empty.icon}\n          text={empty.text}\n        />\n      )}\n    </div>\n  );\n};\n\nexport { Table };"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","Empty","id","className","icon","text","React","createElement","Table","height","type","columns","data","empty","undefined","headlesss","onRowClick","rowClassName","formattedData","useMemo","columnsByKey","reduce","acc","column","keys","item","index","cells","forEach","render","align","content","contentType","push","JSON","stringify","customRowClass","onClick","e","style","maxHeight","map","minWidth","width","maxWidth","header"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Empty/Empty.tsx","../../../src/components/Skeleton/Skeleton.tsx","../../../src/components/Table/Table.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\n\nimport \"./index.css\";\n\ntype EmptyProps = {\n  id?: string;\n  className?: string;\n  /**\n   * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do\n   * tipo \"primeiro uso, ainda nao ha nada aqui\", onde ela vem acompanhada de\n   * um titulo e de uma acao.\n   *\n   * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:\n   * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e\n   * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.\n   */\n  icon?: React.ReactNode;\n  text?: string;\n};\n\n/**\n * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.\n *\n * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o\n * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia\n * (\"nenhuma sanção encontrada\"), entao nao deve parecer erro nem falha de\n * carregamento.\n */\nconst Empty = ({ id, className, icon, text }: EmptyProps) => {\n  return (\n    <div id={id} className={classNames(\"gyramais-empty\", className)}>\n      {icon && <div className=\"gyramais-empty-icon\">{icon}</div>}\n\n      {text && <div className=\"gyramais-empty-text\">{text}</div>}\n    </div>\n  );\n};\n\nexport { Empty };\n","import React from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\ntype SkeletonProps = {\n  id?: string;\n  className?: string;\n  /**\n   * Forma do placeholder:\n   * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)\n   * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)\n   * - `circle`: avatar, badge, icone\n   */\n  variant?: \"text\" | \"block\" | \"circle\";\n  /** Quantidade de linhas. So vale para `variant=\"text\"`. */\n  lines?: number;\n  /** Diametro do circulo. So vale para `variant=\"circle\"`. */\n  size?: number;\n  width?: number | string;\n  height?: number | string;\n  /**\n   * Liga o brilho que varre o bloco. Padrao `true`.\n   *\n   * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na\n   * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem\n   * prometer trabalho que nao esta em curso, e o movimento fica reservado\n   * para o que de fato esta sendo processado.\n   */\n  animated?: boolean;\n  /**\n   * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao\n   * anuncia nada.\n   *\n   * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma\n   * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de\n   * status unico, fora deles. Sem isso, cada bloco vira uma live region e o\n   * leitor de tela repete \"Carregando\" uma vez por celula.\n   */\n  decorative?: boolean;\n};\n\n/**\n * Placeholder de carregamento no formato do conteudo que esta chegando.\n *\n * Substitui o spinner: em vez de um indicador generico no meio da tela, o\n * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o\n * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).\n *\n * A animacao e um brilho que varre o bloco, desligado sob\n * `prefers-reduced-motion`.\n */\nconst Skeleton = ({\n  id,\n  className,\n  variant = \"text\",\n  lines = 3,\n  size = 40,\n  width,\n  height,\n  animated = true,\n  decorative = false,\n}: SkeletonProps) => {\n  const motion = animated ? \"\" : \"gyramais-skeleton-static\";\n  const a11y = decorative\n    ? ({ \"aria-hidden\": true } as const)\n    : ({ role: \"status\", \"aria-label\": \"Carregando\" } as const);\n\n  if (variant === \"text\") {\n    return (\n      <div\n        id={id}\n        {...a11y}\n        className={classNames(\"gyramais-skeleton-lines\", className)}\n      >\n        {Array.from({ length: lines }).map((_, index) => (\n          <span\n            key={index}\n            className={classNames(\n              \"gyramais-skeleton gyramais-skeleton-line\",\n              motion,\n            )}\n            style={{\n              // A ultima linha sai mais curta para imitar o fim de um paragrafo.\n              width: width ?? (lines > 1 && index === lines - 1 ? \"60%\" : \"100%\"),\n              height,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const isCircle = variant === \"circle\";\n\n  return (\n    <span\n      id={id}\n      {...a11y}\n      className={classNames(\n        \"gyramais-skeleton\",\n        `gyramais-skeleton-${variant}`,\n        motion,\n        className,\n      )}\n      style={{\n        width: isCircle ? size : (width ?? \"100%\"),\n        height: isCircle ? size : (height ?? \"100%\"),\n      }}\n    />\n  );\n};\n\nexport { Skeleton };\n","import React, { useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\nimport { Empty } from \"../Empty\";\nimport { Skeleton } from \"../Skeleton\";\n\ntype TableColumnProps = {\n  key: string;\n  header: string;\n  render?: (value: any, data: any) => React.ReactNode | string;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n}\ntype TableProps = {\n  id?: string;\n  className?: string;\n  height?: number;\n  type?: 'list' | 'card' | 'bordered';\n  columns: Array<TableColumnProps>;\n  data: Array<any>;\n  empty?: {\n    icon?: React.ReactNode;\n    text?: string;\n  };\n  headlesss?: boolean\n  /**\n   * Estado de carregamento da tabela. O desenho depende de JA existir dado:\n   *\n   * - **sem linhas** (primeira carga): linhas de skeleton na forma das\n   *   `columns`, entao a tabela nao muda de largura quando o dado chega.\n   * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas\n   *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o\n   *   que o usuario esta lendo para mostrar um placeholder e' pior do que\n   *   deixar o dado velho a vista por um instante.\n   */\n  loading?: boolean;\n  /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */\n  loadingRows?: number;\n  onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;\n  /** Optional per-row className. Receives the row's data object and its\n   *  zero-based index. Useful for transient state highlights (e.g. a row\n   *  that just finished processing in real-time). */\n  rowClassName?: (data: any, index: number) => string | undefined;\n}\n\nconst Table = ({\n  id,\n  className,\n  height,\n  type = 'list',\n  columns = [],\n  data = [],\n  empty = {\n    icon: undefined,\n    text: 'Tabela vazia',\n  },\n  headlesss = false,\n  loading = false,\n  loadingRows = 5,\n  onRowClick,\n  rowClassName,\n}: TableProps) => {\n  // Sem nada na tela ainda: o skeleton ocupa o lugar. Com dado ja pintado, o\n  // refetch nao pode apagar nada.\n  const isFirstLoad = loading && data.length === 0;\n  const isRefetching = loading && data.length > 0;\n\n  const skeletonRows = useMemo(() => {\n    if (!isFirstLoad) {\n      return null;\n    }\n\n    return Array.from({ length: loadingRows }).map((_, rowIndex) => (\n      // `aria-hidden` na linha: sem isso cada celula expunha o proprio\n      // `role=\"status\"` do Skeleton, e a tabela anunciava \"Carregando\"\n      // `loadingRows x columns` vezes. O estado e' anunciado UMA vez, pelo\n      // elemento de status logo abaixo da tabela.\n      <tr\n        key={`skeleton-${rowIndex}`}\n        className=\"gyramais-table-skeleton-row\"\n        aria-hidden=\"true\"\n      >\n        {columns.map((column, colIndex) => (\n          <td\n            key={column.key}\n            className={`gyramais-table-content-col gyramais-table-text-${column.align || 'center'}`}\n          >\n            {/* Larguras alternadas para nao virar um paredao listrado. */}\n            <Skeleton\n              decorative\n              variant=\"block\"\n              height={12}\n              width={`${[68, 82, 56, 74, 62][(rowIndex + colIndex) % 5]}%`}\n            />\n          </td>\n        ))}\n      </tr>\n    ));\n  }, [isFirstLoad, loadingRows, columns]);\n\n  const formattedData = useMemo(() => {\n    const columnsByKey = columns.reduce((acc: { [key: string]: TableColumnProps }, column) => {\n      const key = column.key;\n      acc[key] = column;\n\n      return acc;\n    }, {});\n    const keys = Object.keys(columnsByKey);\n\n    const temp = data.reduce((acc, item, index) => {\n      const cells: Array<React.ReactNode> = [];\n\n      keys.forEach((key) => {\n        const { render, align } = columnsByKey[key] || {};\n        const content = render?.(item[key], item) || item[key];\n        const contentType = typeof content;\n\n        cells.push(\n          <td key={`${key}-${JSON.stringify(item)}`} className={`gyramais-table-content-col gyramais-table-text-${align || 'center'}`}>\n            {['string', 'number', 'bigint'].includes(contentType) && (\n              <div className=\"with-clamp\">\n                {content}\n              </div>\n            )}\n\n            {contentType === 'object' && (\n              <div className=\"overflow-hidden\">\n                {content}\n              </div>\n            )}\n          </td>\n        )\n      })\n\n      const customRowClass = rowClassName?.(item, index);\n\n      acc.push(\n        <tr\n          key={`${index}-${JSON.stringify(item)}`}\n          className={customRowClass}\n          onClick={(e) => onRowClick?.(e, item)}\n        >\n          {cells}\n        </tr>\n      )\n\n      return acc;\n    }, []);\n\n    return temp\n  }, [columns, data, rowClassName]);\n\n  return (\n    <div\n      id={id}\n      className={classNames(\n        'gyramais-table-container',\n        `gyramais-table-${type}-container`,\n        className,\n      )}\n      style={{\n        maxHeight: height || 'fit-content',\n      }}\n    >\n      {isRefetching && (\n        <div className=\"gyramais-table-refetching-bar\" aria-hidden=\"true\" />\n      )}\n\n      {loading && (\n        <span className=\"gyramais-table-status\" role=\"status\">\n          {isFirstLoad ? 'Carregando a tabela' : 'Atualizando a tabela'}\n        </span>\n      )}\n\n      <table className={isRefetching ? \"gyramais-table-refetching\" : undefined}>\n        <tbody>\n          {skeletonRows ?? formattedData}\n        </tbody>\n        {!headlesss && (\n          <thead>\n            <tr>\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className={`gyramais-table-text-${column.align || 'center'}`}\n                  style={{\n                    minWidth: column.width || 'auto',\n                    width: column.width || 'auto',\n                    maxWidth: column.width || 'auto',\n                  }}\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n        )}\n      </table>\n\n      {/* O vazio so aparece quando de fato nao ha nada A MOSTRAR: durante a\n          primeira carga quem ocupa o lugar e' o skeleton. Era por nao existir\n          essa distincao que os consumidores apagavam o texto do `empty` a mao\n          enquanto carregavam. */}\n      {data.length === 0 && !loading && (\n        <Empty\n          icon={empty.icon}\n          text={empty.text}\n        />\n      )}\n    </div>\n  );\n};\n\nexport { Table };"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","Empty","id","className","icon","text","React","createElement","Skeleton","variant","lines","size","width","height","animated","decorative","motion","a11y","role","from","map","_","index","style","isCircle","Table","type","columns","data","empty","undefined","headlesss","loading","loadingRows","onRowClick","rowClassName","isFirstLoad","isRefetching","skeletonRows","useMemo","rowIndex","column","colIndex","align","formattedData","columnsByKey","reduce","acc","keys","item","cells","forEach","render","content","contentType","push","JSON","stringify","customRowClass","onClick","e","maxHeight","minWidth","maxWidth","header"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/emails/balance-sheet-finalized/components/Skeleton/Skeleton.d.ts

@@ -25,6 +25,16 @@ type SkeletonProps = {
      * para o que de fato esta sendo processado.
      */
     animated?: boolean;
+    /**
+     * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao
+     * anuncia nada.
+     *
+     * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma
+     * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de
+     * status unico, fora deles. Sem isso, cada bloco vira uma live region e o
+     * leitor de tela repete "Carregando" uma vez por celula.
+     */
+    decorative?: boolean;
 };
 /**
  * Placeholder de carregamento no formato do conteudo que esta chegando.
@@ -36,5 +46,5 @@ type SkeletonProps = {
  * A animacao e um brilho que varre o bloco, desligado sob
  * `prefers-reduced-motion`.
  */
-declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, decorative, }: SkeletonProps) => React.JSX.Element;
 export { Skeleton };

package/dist/emails/balance-sheet-finalized/components/Table/Table.d.ts

@@ -19,11 +19,24 @@ type TableProps = {
         text?: string;
     };
     headlesss?: boolean;
+    /**
+     * Estado de carregamento da tabela. O desenho depende de JA existir dado:
+     *
+     * - **sem linhas** (primeira carga): linhas de skeleton na forma das
+     *   `columns`, entao a tabela nao muda de largura quando o dado chega.
+     * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas
+     *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o
+     *   que o usuario esta lendo para mostrar um placeholder e' pior do que
+     *   deixar o dado velho a vista por um instante.
+     */
+    loading?: boolean;
+    /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */
+    loadingRows?: number;
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;
     /** Optional per-row className. Receives the row's data object and its
      *  zero-based index. Useful for transient state highlights (e.g. a row
      *  that just finished processing in real-time). */
     rowClassName?: (data: any, index: number) => string | undefined;
 };
-declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
+declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, loading, loadingRows, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
 export { Table };

package/dist/emails/email/components/Skeleton/Skeleton.d.ts

@@ -25,6 +25,16 @@ type SkeletonProps = {
      * para o que de fato esta sendo processado.
      */
     animated?: boolean;
+    /**
+     * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao
+     * anuncia nada.
+     *
+     * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma
+     * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de
+     * status unico, fora deles. Sem isso, cada bloco vira uma live region e o
+     * leitor de tela repete "Carregando" uma vez por celula.
+     */
+    decorative?: boolean;
 };
 /**
  * Placeholder de carregamento no formato do conteudo que esta chegando.
@@ -36,5 +46,5 @@ type SkeletonProps = {
  * A animacao e um brilho que varre o bloco, desligado sob
  * `prefers-reduced-motion`.
  */
-declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, decorative, }: SkeletonProps) => React.JSX.Element;
 export { Skeleton };

package/dist/emails/email/components/Table/Table.d.ts

@@ -19,11 +19,24 @@ type TableProps = {
         text?: string;
     };
     headlesss?: boolean;
+    /**
+     * Estado de carregamento da tabela. O desenho depende de JA existir dado:
+     *
+     * - **sem linhas** (primeira carga): linhas de skeleton na forma das
+     *   `columns`, entao a tabela nao muda de largura quando o dado chega.
+     * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas
+     *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o
+     *   que o usuario esta lendo para mostrar um placeholder e' pior do que
+     *   deixar o dado velho a vista por um instante.
+     */
+    loading?: boolean;
+    /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */
+    loadingRows?: number;
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;
     /** Optional per-row className. Receives the row's data object and its
      *  zero-based index. Useful for transient state highlights (e.g. a row
      *  that just finished processing in real-time). */
     rowClassName?: (data: any, index: number) => string | undefined;
 };
-declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
+declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, loading, loadingRows, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
 export { Table };

package/dist/index.css

@@ -4411,6 +4411,12 @@ h6 {
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
   min-height: 6rem;
+  /* A regra de esconder abaixo usa `> *`, que casa so ELEMENTO. Um children
+     que seja string/numero solto (ou vindo de fragmento) escaparia e
+     apareceria ao lado do skeleton. Zerar a tipografia aqui colapsa esse texto;
+     o placeholder restaura a sua logo em seguida. */
+  font-size: 0;
+  line-height: 0;
 }
 
 /* `gyramais-card-loading` (modificador da RAIZ) e `gyramais-card-placeholder`
@@ -4430,6 +4436,8 @@ h6 {
   flex-direction: column;
   align-items: stretch;
   background-color: var(--color-surface-primary);
+  font-size: var(--fs-body);
+  line-height: var(--lh-normal);
 }
 
 .gyramais-card.gyramais-card-loading
@@ -5772,7 +5780,13 @@ h6 {
 
 .gyramais-empty .gyramais-empty-icon {
   display: flex;
-  justify-content: center;
+  justify-content: center
+}
+
+/* O tamanho vai no SVG, nao no wrapper: icone do MUI declara o proprio
+   `font-size`, entao `text-[40px]` no pai nao chega nele e ele encolhe para o
+   padrao do MUI. */
+.gyramais-empty .gyramais-empty-icon svg {
   font-size: 40px;
   color: var(--color-text-quaternary)
 }
@@ -10415,6 +10429,65 @@ h6 {
   }
 }
 
+/* GYR-1646: refetch (troca de filtro, busca, acao de linha) NAO apaga as
+   linhas. Elas ficam esmaecidas enquanto a barra fina no topo indica que algo
+   esta vindo. Trocar dado visivel por placeholder e' regressao de UX: o
+   usuario perde o que estava lendo por causa de uma acao dele mesmo. */
+.gyramais-table-container .gyramais-table-refetching {
+  opacity: 0.45;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.gyramais-table-container .gyramais-table-refetching-bar {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  background-color: var(--color-gray-100);
+}
+
+.gyramais-table-container .gyramais-table-refetching-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  background-color: var(--gyra-blue);
+  animation: gyramais-table-refetching-slide 1.1s ease-in-out infinite;
+}
+
+@keyframes gyramais-table-refetching-slide {
+  0% {
+    left: -35%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Sem movimento para quem pediu menos: a barra continua marcando o estado. */
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-table-container .gyramais-table-refetching-bar::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.4;
+  }
+}
+
+/* Estado anunciado uma vez para leitor de tela, invisivel na tela. As celulas
+   de skeleton sao decorativas (`aria-hidden`), entao nao repetem o anuncio. */
+.gyramais-table-container .gyramais-table-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .gyramais-tabs {
 
     width: 100%

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",