@gyramais/gyra-design 0.2.46 → 0.2.47

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 l in a)e.call(a,l)&&a[l]&&(r=n(r,l));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 l=a(n.exports);const i=({id:t,className:a,icon:r,text:n})=>e.createElement("div",{id:t,className:l("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:i=40,width:s,height:c,animated:o=!0})=>{const m=o?"":"gyramais-skeleton-static";if("text"===r)return e.createElement("div",{id:t,role:"status","aria-label":"Carregando",className:l("gyramais-skeleton-lines",a)},Array.from({length:n}).map((t,a)=>e.createElement("span",{key:a,className:l("gyramais-skeleton gyramais-skeleton-line",m),style:{width:s??(n>1&&a===n-1?"60%":"100%"),height:c}})));const y="circle"===r;return e.createElement("span",{id:t,role:"status","aria-label":"Carregando",className:l("gyramais-skeleton",`gyramais-skeleton-${r}`,m,a),style:{width:y?i:s??"100%",height:y?i:c??"100%"}})},c=({id:a,className:r,height:n,type:c="list",columns:o=[],data:m=[],empty:y={icon:void 0,text:"Tabela vazia"},headlesss:d=!1,loading:g=!1,loadingRows:u=5,onRowClick:h,rowClassName:p})=>{const f=g&&0===m.length,b=g&&m.length>0,N=t(()=>f?Array.from({length:u}).map((t,a)=>e.createElement("tr",{key:`skeleton-${a}`,className:"gyramais-table-skeleton-row"},o.map((t,r)=>e.createElement("td",{key:t.key,className:`gyramais-table-content-col gyramais-table-text-${t.align||"center"}`},e.createElement(s,{variant:"block",height:12,width:`${[68,82,56,74,62][(a+r)%5]}%`}))))):null,[f,u,o]),v=t(()=>{const t=o.reduce((e,t)=>(e[t.key]=t,e),{}),a=Object.keys(t);return m.reduce((r,n,l)=>{const i=[];a.forEach(a=>{const{render:r,align:l}=t[a]||{},s=r?.(n[a],n)||n[a],c=typeof s;i.push(e.createElement("td",{key:`${a}-${JSON.stringify(n)}`,className:`gyramais-table-content-col gyramais-table-text-${l||"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,l);return r.push(e.createElement("tr",{key:`${l}-${JSON.stringify(n)}`,className:s,onClick:e=>h?.(e,n)},i)),r},[])},[o,m,p]);return e.createElement("div",{id:a,className:l("gyramais-table-container",`gyramais-table-${c}-container`,r),style:{maxHeight:n||"fit-content"}},b&&e.createElement("div",{className:"gyramais-table-refetching-bar",role:"status","aria-label":"Atualizando"}),e.createElement("table",{className:b?"gyramais-table-refetching":void 0},e.createElement("tbody",null,N??v),!d&&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(i,{icon:y.icon,text:y.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\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","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      <tr key={`skeleton-${rowIndex}`} className=\"gyramais-table-skeleton-row\">\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              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\" role=\"status\" aria-label=\"Atualizando\" />\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","motion","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/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/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

@@ -10415,6 +10415,51 @@ 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;
+  }
+}
+
 .gyramais-tabs {
 
     width: 100%

package/package.json

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