@tecsinapse/react-web-kit 1.20.1 → 1.21.1

package/dist/components/molecules/TextArea/styled.js

@@ -9,18 +9,24 @@ var _native = _interopRequireDefault(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledWebInput = (0, _native.default)(_reactCore.TextAreaInputBase)`
-  font-weight: ${({
-  theme,
-  fontWeight = 'regular'
-}) => theme.font.weight[fontWeight]};
-  font-family: ${({
-  theme,
-  fontStack = 'default'
-}) => `'${theme.font.stack[fontStack]}'`};
-  outline-width: 0;
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledWebInput = (0, _native.default)(_reactCore.TextAreaInputBase)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-family: ", ";\n  outline-width: 0;\n"])), _ref => {
+  let {
+    theme,
+    fontWeight = 'regular'
+  } = _ref;
+  return theme.font.weight[fontWeight];
+}, _ref2 => {
+  let {
+    theme,
+    fontStack = 'default'
+  } = _ref2;
+  return "'".concat(theme.font.stack[fontStack], "'");
+});
 exports.StyledWebInput = StyledWebInput;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/TextArea/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledWebInput","styled","TextAreaInputBase","theme","fontWeight","font","weight","fontStack","stack"],"sources":["../../../../src/components/molecules/TextArea/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport {\n  FontStackType,\n  FontWeightType,\n  StyleProps,\n  TextAreaInputBase,\n} from '@tecsinapse/react-core';\nimport { TextAreaProps } from './TextArea';\n\ninterface Font {\n  fontStack?: FontStackType;\n  fontWeight?: FontWeightType;\n}\n\nexport const StyledWebInput = styled(TextAreaInputBase)<\n  Font & Partial<TextAreaProps> & Partial<StyleProps>\n>`\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n  outline-width: 0;\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAaO,MAAMA,cAAc,GAAG,IAAAC,eAAA,EAAOC,4BAAP,CAE5B;AACF,iBAAiB,CAAC;EAAEC,KAAF;EAASC,UAAU,GAAG;AAAtB,CAAD,KACbD,KAAK,CAACE,IAAN,CAAWC,MAAX,CAAkBF,UAAlB,CAA8B;AAClC,iBAAiB,CAAC;EAAED,KAAF;EAASI,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGJ,KAAK,CAACE,IAAN,CAAWG,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC;AACA,CARO"}
+{"version":3,"file":"styled.js","names":["StyledWebInput","styled","TextAreaInputBase","theme","fontWeight","font","weight","fontStack","stack"],"sources":["../../../../src/components/molecules/TextArea/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport {\n  FontStackType,\n  FontWeightType,\n  StyleProps,\n  TextAreaInputBase,\n} from '@tecsinapse/react-core';\nimport { TextAreaProps } from './TextArea';\n\ninterface Font {\n  fontStack?: FontStackType;\n  fontWeight?: FontWeightType;\n}\n\nexport const StyledWebInput = styled(TextAreaInputBase)<\n  Font & Partial<TextAreaProps> & Partial<StyleProps>\n>`\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n  outline-width: 0;\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAaO,MAAMA,cAAc,GAAG,IAAAC,eAAA,EAAOC,4BAAP,CAAH,yIAGV;EAAA,IAAC;IAAEC,KAAF;IAASC,UAAU,GAAG;EAAtB,CAAD;EAAA,OACbD,KAAK,CAACE,IAAN,CAAWC,MAAX,CAAkBF,UAAlB,CADa;AAAA,CAHU,EAKV;EAAA,IAAC;IAAED,KAAF;IAASI,SAAS,GAAG;EAArB,CAAD;EAAA,kBACTJ,KAAK,CAACE,IAAN,CAAWG,KAAX,CAAiBD,SAAjB,CADS;AAAA,CALU,CAApB"}

package/dist/components/organisms/DataGrid/DataGrid.js

@@ -21,39 +21,41 @@ var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DataGrid = ({
-  headers,
-  data,
-  rowKeyExtractor,
-  toolbarTitle,
-  toolbarFooter,
-  toolbarRightIcons,
-  selectable = false,
-  selectedRows = [],
-  onSelectedRows,
-  pagination = false,
-  rowsPerPage = 10,
-  onRowsPerPageChange,
-  rowsPerPageOptions: _rowsPerPageOptions,
-  rowsPerPageLabel: _rowsPerPageLabel,
-  exportLabel = 'Exportar',
-  exportFunction,
-  rowsCount,
-  page = 0,
-  onPageChange,
-  loading = false,
-  skeletonComponent,
-  emptyPlaceholder,
-  exportComponent,
-  ...rest
-}) => {
+const DataGrid = _ref => {
+  let {
+    headers,
+    data,
+    rowKeyExtractor,
+    toolbarTitle,
+    toolbarFooter,
+    toolbarRightIcons,
+    selectable = false,
+    selectedRows = [],
+    onSelectedRows,
+    pagination = false,
+    rowsPerPage = 10,
+    onRowsPerPageChange,
+    rowsPerPageOptions: _rowsPerPageOptions,
+    rowsPerPageLabel: _rowsPerPageLabel,
+    exportLabel = 'Exportar',
+    exportFunction,
+    rowsCount,
+    page = 0,
+    onPageChange,
+    loading = false,
+    skeletonComponent,
+    emptyPlaceholder,
+    exportComponent,
+    ...rest
+  } = _ref;
+
   if (selectable && (!selectedRows || !onSelectedRows)) {
     throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
   }
 
-  const rowsPerPageLabel = _react.default.useCallback(value => _rowsPerPageLabel ? _rowsPerPageLabel(value) : `Exibir por página: ${value} itens`, [_rowsPerPageLabel]);
+  const rowsPerPageLabel = _react.default.useCallback(value => _rowsPerPageLabel ? _rowsPerPageLabel(value) : "Exibir por p\xE1gina: ".concat(value, " itens"), [_rowsPerPageLabel]);
 
-  const rowsPerPageOptions = _react.default.useMemo(() => _rowsPerPageOptions ?? [10, 25, 50], [_rowsPerPageOptions]);
+  const rowsPerPageOptions = _react.default.useMemo(() => _rowsPerPageOptions !== null && _rowsPerPageOptions !== void 0 ? _rowsPerPageOptions : [10, 25, 50], [_rowsPerPageOptions]);
 
   const handleSelect = _react.default.useCallback((current, checked) => {
     if (checked) {
@@ -75,7 +77,7 @@ const DataGrid = ({
     selectable: selectable,
     headers: headers,
     data: data,
-    rowsCount: rowsCount ?? data.length,
+    rowsCount: rowsCount !== null && rowsCount !== void 0 ? rowsCount : data.length,
     rowKeyExtractor: rowKeyExtractor,
     selectedRows: selectedRows,
     onSelected: onSelectedRows
@@ -90,13 +92,13 @@ const DataGrid = ({
   })) : _react.default.createElement("tr", null, _react.default.createElement("td", {
     colSpan: 99
   }, emptyPlaceholder))) : _react.default.createElement(_Table.TBody, null, [...Array(rowsPerPage).keys()].map(idx => _react.default.createElement(_Table.Tr, {
-    key: `skeleton-${idx}`
+    key: "skeleton-".concat(idx)
   }, _react.default.createElement(_Table.Td, {
     colSpan: 99,
     style: {
       padding: 0
     }
-  }, skeletonComponent ?? _react.default.createElement(_Skeleton.Skeleton, {
+  }, skeletonComponent !== null && skeletonComponent !== void 0 ? skeletonComponent : _react.default.createElement(_Skeleton.Skeleton, {
     height: 55,
     radius: "mili",
     animation: "wave"
@@ -111,7 +113,7 @@ const DataGrid = ({
     rowsPerPage: rowsPerPage,
     onRowsPerPageChange: onRowsPerPageChange,
     rowsPerPageOptions: rowsPerPageOptions,
-    rowsCount: rowsCount ?? data.length,
+    rowsCount: rowsCount !== null && rowsCount !== void 0 ? rowsCount : data.length,
     page: page,
     onPageChange: onPageChange,
     pagination: pagination,

package/dist/components/organisms/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","exportComponent","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","removeElement","length","getData","map","item","some","sel","Array","keys","padding","width","Number"],"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n  /** Export component, use if default button with label is not ideal. This prop, not receive \"exportLabel\" and \"exportFunction\" */\n  exportComponent?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data,>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  emptyPlaceholder,\n  exportComponent,\n  ...rest\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer {...rest}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(data, rowsCount, page, rowsPerPage, pagination).map(\n                item => (\n                  <Row\n                    key={rowKeyExtractor(item)}\n                    rowKeyExtractor={rowKeyExtractor}\n                    handleSelect={handleSelect}\n                    selectable={selectable}\n                    headers={headers}\n                    data={item}\n                    checked={selectedRows?.some(\n                      sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                    )}\n                  />\n                )\n              )\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        {(Number(rowsCount) > 0 || data.length > 0) && (\n          <Footer\n            exportFunction={exportFunction}\n            exportLabel={exportLabel}\n            rowsPerPageLabel={rowsPerPageLabel}\n            rowsPerPage={rowsPerPage}\n            onRowsPerPageChange={onRowsPerPageChange}\n            rowsPerPageOptions={rowsPerPageOptions}\n            rowsCount={rowsCount ?? data.length}\n            page={page}\n            onPageChange={onPageChange}\n            pagination={pagination}\n            exportComponent={exportComponent}\n          />\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","exportComponent","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","removeElement","length","getData","map","item","some","sel","Array","keys","padding","width","Number"],"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n  /** Export component, use if default button with label is not ideal. This prop, not receive \"exportLabel\" and \"exportFunction\" */\n  exportComponent?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data,>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  emptyPlaceholder,\n  exportComponent,\n  ...rest\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer {...rest}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(data, rowsCount, page, rowsPerPage, pagination).map(\n                item => (\n                  <Row\n                    key={rowKeyExtractor(item)}\n                    rowKeyExtractor={rowKeyExtractor}\n                    handleSelect={handleSelect}\n                    selectable={selectable}\n                    headers={headers}\n                    data={item}\n                    checked={selectedRows?.some(\n                      sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                    )}\n                  />\n                )\n              )\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        {(Number(rowsCount) > 0 || data.length > 0) && (\n          <Footer\n            exportFunction={exportFunction}\n            exportLabel={exportLabel}\n            rowsPerPageLabel={rowsPerPageLabel}\n            rowsPerPage={rowsPerPage}\n            onRowsPerPageChange={onRowsPerPageChange}\n            rowsPerPageOptions={rowsPerPageOptions}\n            rowsCount={rowsCount ?? data.length}\n            page={page}\n            onPageChange={onPageChange}\n            pagination={pagination}\n            exportComponent={exportComponent}\n          />\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"mappings":"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"}

package/dist/components/organisms/DataGrid/Footer/Footer.js

@@ -15,19 +15,21 @@ var _styled = require("./styled");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Footer = ({
-  rowsPerPage,
-  onRowsPerPageChange,
-  rowsPerPageOptions,
-  rowsPerPageLabel,
-  exportFunction,
-  exportLabel,
-  rowsCount,
-  page,
-  onPageChange,
-  pagination,
-  exportComponent
-}) => {
+const Footer = _ref => {
+  let {
+    rowsPerPage,
+    onRowsPerPageChange,
+    rowsPerPageOptions,
+    rowsPerPageLabel,
+    exportFunction,
+    exportLabel,
+    rowsCount,
+    page,
+    onPageChange,
+    pagination,
+    exportComponent
+  } = _ref;
+
   if (pagination && (!onPageChange || !onRowsPerPageChange)) {
     throw new Error('[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)');
   }
@@ -88,7 +90,7 @@ const Footer = ({
   }, exportLabel)))), pagination && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.TextPagination, {
     fontWeight: 'bold',
     fontColor: 'medium'
-  }, `Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`), _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
+  }, "Exibindo ".concat(currentInitItem, " a ").concat(currentFinalItem, " de ").concat(rowsCount, " registros")), _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
     onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1),
     disabled: page === 0
   }, _react.default.createElement(_reactWebKit.Icon, {
@@ -96,7 +98,7 @@ const Footer = ({
     type: 'material-community',
     fontColor: 'light'
   })), _react.default.createElement(_styled.PagesContainer, null, [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(getPaginationSlice().start, getPaginationSlice().end).map(value => _react.default.createElement(_styled.HoveredText, {
-    key: `page-${value}`
+    key: "page-".concat(value)
   }, _react.default.createElement(_styled.PageButton, {
     variant: page === value ? 'outlined' : 'text',
     onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(value)

package/dist/components/organisms/DataGrid/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","exportComponent","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","currentInitItem","currentFinalItem","String","Array","keys","slice","map","memo"],"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';\nimport { TFoot, Tr } from '../../../atoms/Table';\nimport {\n  FooterContainer,\n  FooterContainerEnd,\n  FooterContainerStart,\n  HoveredText,\n  NavigationButton,\n  PageButton,\n  PagesContainer,\n  SelectContainer,\n  TdFooterStyled,\n  TextPagination,\n} from './styled';\n\ninterface DataGridFooterProps {\n  rowsPerPage: number;\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions: number[];\n  rowsPerPageLabel: (value: number) => string;\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements */\n  rowsCount: number;\n  page: number;\n  onPageChange?: (page: number) => void;\n  pagination: boolean;\n  exportComponent?: React.ReactNode;\n}\n\nconst Footer: React.FC<DataGridFooterProps> = ({\n  rowsPerPage,\n  onRowsPerPageChange,\n  rowsPerPageOptions,\n  rowsPerPageLabel,\n  exportFunction,\n  exportLabel,\n  rowsCount,\n  page,\n  onPageChange,\n  pagination,\n  exportComponent,\n}) => {\n  if (pagination && (!onPageChange || !onRowsPerPageChange)) {\n    throw new Error(\n      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'\n    );\n  }\n\n  const getPaginationSlice = (): { start: number; end: number } => {\n    const totalPages = Math.ceil(rowsCount / rowsPerPage);\n    if (totalPages < 4) {\n      return { start: 0, end: totalPages };\n    }\n    if (page === 0) {\n      return { start: page, end: page + 3 };\n    }\n    if (page === totalPages - 1) {\n      return { start: page - 2, end: page + 1 };\n    }\n    return { start: page - 1, end: page + 2 };\n  };\n\n  const handleRowsPerPage = React.useCallback(\n    value => {\n      onRowsPerPageChange?.(value as number);\n      onPageChange?.(0);\n    },\n    [onPageChange, onRowsPerPageChange]\n  );\n  const currentInitItem = page * rowsPerPage + 1;\n  const currentFinalItem =\n    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;\n\n  return (\n    <TFoot>\n      <Tr>\n        <TdFooterStyled colSpan={99}>\n          <FooterContainer>\n            <FooterContainerStart>\n              {pagination && (\n                <SelectContainer>\n                  <Select\n                    options={rowsPerPageOptions}\n                    onSelect={handleRowsPerPage}\n                    value={rowsPerPage}\n                    type={'single'}\n                    keyExtractor={value => String(value)}\n                    labelExtractor={rowsPerPageLabel}\n                    anchor=\"top\"\n                  />\n                </SelectContainer>\n              )}\n              {exportComponent && !exportFunction && <>{exportComponent}</>}\n              {exportFunction && (\n                <HoveredText>\n                  <Button variant=\"outlined\" onPress={() => exportFunction()}>\n                    <Text fontColor=\"orange\" fontWeight=\"bold\">\n                      {exportLabel}\n                    </Text>\n                  </Button>\n                </HoveredText>\n              )}\n            </FooterContainerStart>\n            {pagination && (\n              <>\n                <TextPagination\n                  fontWeight={'bold'}\n                  fontColor={'medium'}\n                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>\n                <FooterContainerEnd>\n                  <NavigationButton\n                    onPress={() => onPageChange?.(page - 1)}\n                    disabled={page === 0}\n                  >\n                    <Icon\n                      name={'chevron-left'}\n                      type={'material-community'}\n                      fontColor={'light'}\n                    />\n                  </NavigationButton>\n                  <PagesContainer>\n                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]\n                      .slice(\n                        getPaginationSlice().start,\n                        getPaginationSlice().end\n                      )\n                      .map(value => (\n                        <HoveredText key={`page-${value}`}>\n                          <PageButton\n                            variant={page === value ? 'outlined' : 'text'}\n                            onPress={() => onPageChange?.(value)}\n                          >\n                            <Text fontColor=\"medium\" fontWeight=\"bold\">\n                              {value + 1}\n                            </Text>\n                          </PageButton>\n                        </HoveredText>\n                      ))}\n                  </PagesContainer>\n                  <NavigationButton\n                    onPress={() => onPageChange?.(page + 1)}\n                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}\n                  >\n                    <Icon\n                      name={'chevron-right'}\n                      type={'material-community'}\n                      fontColor={'light'}\n                    />\n                  </NavigationButton>\n                </FooterContainerEnd>\n              </>\n            )}\n          </FooterContainer>\n        </TdFooterStyled>\n      </Tr>\n    </TFoot>\n  );\n};\n\nexport default React.memo(Footer);\n"],"mappings":"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"}
+{"version":3,"file":"Footer.js","names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","exportComponent","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","currentInitItem","currentFinalItem","String","Array","keys","slice","map","memo"],"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';\nimport { TFoot, Tr } from '../../../atoms/Table';\nimport {\n  FooterContainer,\n  FooterContainerEnd,\n  FooterContainerStart,\n  HoveredText,\n  NavigationButton,\n  PageButton,\n  PagesContainer,\n  SelectContainer,\n  TdFooterStyled,\n  TextPagination,\n} from './styled';\n\ninterface DataGridFooterProps {\n  rowsPerPage: number;\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions: number[];\n  rowsPerPageLabel: (value: number) => string;\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements */\n  rowsCount: number;\n  page: number;\n  onPageChange?: (page: number) => void;\n  pagination: boolean;\n  exportComponent?: React.ReactNode;\n}\n\nconst Footer: React.FC<DataGridFooterProps> = ({\n  rowsPerPage,\n  onRowsPerPageChange,\n  rowsPerPageOptions,\n  rowsPerPageLabel,\n  exportFunction,\n  exportLabel,\n  rowsCount,\n  page,\n  onPageChange,\n  pagination,\n  exportComponent,\n}) => {\n  if (pagination && (!onPageChange || !onRowsPerPageChange)) {\n    throw new Error(\n      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'\n    );\n  }\n\n  const getPaginationSlice = (): { start: number; end: number } => {\n    const totalPages = Math.ceil(rowsCount / rowsPerPage);\n    if (totalPages < 4) {\n      return { start: 0, end: totalPages };\n    }\n    if (page === 0) {\n      return { start: page, end: page + 3 };\n    }\n    if (page === totalPages - 1) {\n      return { start: page - 2, end: page + 1 };\n    }\n    return { start: page - 1, end: page + 2 };\n  };\n\n  const handleRowsPerPage = React.useCallback(\n    value => {\n      onRowsPerPageChange?.(value as number);\n      onPageChange?.(0);\n    },\n    [onPageChange, onRowsPerPageChange]\n  );\n  const currentInitItem = page * rowsPerPage + 1;\n  const currentFinalItem =\n    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;\n\n  return (\n    <TFoot>\n      <Tr>\n        <TdFooterStyled colSpan={99}>\n          <FooterContainer>\n            <FooterContainerStart>\n              {pagination && (\n                <SelectContainer>\n                  <Select\n                    options={rowsPerPageOptions}\n                    onSelect={handleRowsPerPage}\n                    value={rowsPerPage}\n                    type={'single'}\n                    keyExtractor={value => String(value)}\n                    labelExtractor={rowsPerPageLabel}\n                    anchor=\"top\"\n                  />\n                </SelectContainer>\n              )}\n              {exportComponent && !exportFunction && <>{exportComponent}</>}\n              {exportFunction && (\n                <HoveredText>\n                  <Button variant=\"outlined\" onPress={() => exportFunction()}>\n                    <Text fontColor=\"orange\" fontWeight=\"bold\">\n                      {exportLabel}\n                    </Text>\n                  </Button>\n                </HoveredText>\n              )}\n            </FooterContainerStart>\n            {pagination && (\n              <>\n                <TextPagination\n                  fontWeight={'bold'}\n                  fontColor={'medium'}\n                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>\n                <FooterContainerEnd>\n                  <NavigationButton\n                    onPress={() => onPageChange?.(page - 1)}\n                    disabled={page === 0}\n                  >\n                    <Icon\n                      name={'chevron-left'}\n                      type={'material-community'}\n                      fontColor={'light'}\n                    />\n                  </NavigationButton>\n                  <PagesContainer>\n                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]\n                      .slice(\n                        getPaginationSlice().start,\n                        getPaginationSlice().end\n                      )\n                      .map(value => (\n                        <HoveredText key={`page-${value}`}>\n                          <PageButton\n                            variant={page === value ? 'outlined' : 'text'}\n                            onPress={() => onPageChange?.(value)}\n                          >\n                            <Text fontColor=\"medium\" fontWeight=\"bold\">\n                              {value + 1}\n                            </Text>\n                          </PageButton>\n                        </HoveredText>\n                      ))}\n                  </PagesContainer>\n                  <NavigationButton\n                    onPress={() => onPageChange?.(page + 1)}\n                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}\n                  >\n                    <Icon\n                      name={'chevron-right'}\n                      type={'material-community'}\n                      fontColor={'light'}\n                    />\n                  </NavigationButton>\n                </FooterContainerEnd>\n              </>\n            )}\n          </FooterContainer>\n        </TdFooterStyled>\n      </Tr>\n    </TFoot>\n  );\n};\n\nexport default React.memo(Footer);\n"],"mappings":"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"}

package/dist/components/organisms/DataGrid/Footer/styled.js

@@ -15,91 +15,92 @@ var _Table = require("../../../atoms/Table");
 
 var _Button = require("../../../atoms/Button");
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const TdFooterStyled = (0, _styled.default)(_Table.Td)`
-  padding: ${({
-  theme
-}) => theme.spacing.centi} 0 0 0;
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const TdFooterStyled = (0, _styled.default)(_Table.Td)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", " 0 0 0;\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.spacing.centi;
+});
 exports.TdFooterStyled = TdFooterStyled;
-const FlexContainer = (0, _styled.default)('div')`
-  display: flex;
-  flex-grow: 1;
-`;
+const FlexContainer = (0, _styled.default)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n"])));
 exports.FlexContainer = FlexContainer;
-const FooterContainer = (0, _styled.default)(FlexContainer)`
-  justify-content: space-between;
-  align-items: center;
-`;
+const FooterContainer = (0, _styled.default)(FlexContainer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: space-between;\n  align-items: center;\n"])));
 exports.FooterContainer = FooterContainer;
-const FooterContainerStart = (0, _styled.default)(FlexContainer)`
-  justify-content: flex-start;
-`;
+const FooterContainerStart = (0, _styled.default)(FlexContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  justify-content: flex-start;\n"])));
 exports.FooterContainerStart = FooterContainerStart;
-const FooterContainerEnd = (0, _styled.default)(FlexContainer)`
-  justify-content: flex-end;
-`;
+const FooterContainerEnd = (0, _styled.default)(FlexContainer)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n"])));
 exports.FooterContainerEnd = FooterContainerEnd;
-const SelectContainer = (0, _styled.default)('div')`
-  margin-right: ${({
-  theme
-}) => theme.spacing.deca};
-`;
+const SelectContainer = (0, _styled.default)('div')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing.deca;
+});
 exports.SelectContainer = SelectContainer;
-const NavigationButton = (0, _native.default)(_Button.Button)`    
-    border-radius: ${({
-  theme
-}) => theme.borderRadius.mili};
-    height: 44px;
-    justify-content: center;
-    padding: ${({
-  theme
-}) => theme.spacing.centi};
-    width: 44px;  
-`;
+const NavigationButton = (0, _native.default)(_Button.Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["    \n    border-radius: ", ";\n    height: 44px;\n    justify-content: center;\n    padding: ", ";\n    width: 44px;  \n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.borderRadius.mili;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.spacing.centi;
+});
 exports.NavigationButton = NavigationButton;
-const PageButton = (0, _native.default)(NavigationButton)`
-    padding-right: ${({
-  theme
-}) => theme.spacing.deca};
-    padding-left: ${({
-  theme
-}) => theme.spacing.deca};
-    border-radius: ${({
-  theme
-}) => theme.borderRadius.mili};
-    justify-content: center;
-    margin-left: ${({
-  theme
-}) => theme.spacing.micro};
-    margin-right: ${({
-  theme
-}) => theme.spacing.micro};
-`;
+const PageButton = (0, _native.default)(NavigationButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    justify-content: center;\n    margin-left: ", ";\n    margin-right: ", ";\n"])), _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.spacing.deca;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.spacing.deca;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.borderRadius.mili;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.spacing.micro;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.spacing.micro;
+});
 exports.PageButton = PageButton;
-const PagesContainer = (0, _styled.default)('div')`
-  margin: 0 20px;
-  display: flex;
-`;
+const PagesContainer = (0, _styled.default)('div')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 0 20px;\n  display: flex;\n"])));
 exports.PagesContainer = PagesContainer;
-const HoveredText = (0, _styled.default)('div')`
-  user-select: none;
-  &:hover * {
-    color: ${({
-  theme
-}) => theme.font.color.light};
-  }
-`;
+const HoveredText = (0, _styled.default)('div')(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  user-select: none;\n  &:hover * {\n    color: ", ";\n  }\n"])), _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.font.color.light;
+});
 exports.HoveredText = HoveredText;
-const TextPagination = (0, _native.default)(_reactWebKit.Text)`
-  padding-right: ${({
-  theme
-}) => theme.spacing.deca};
-  padding-left: ${({
-  theme
-}) => theme.spacing.deca};
-
-`;
+const TextPagination = (0, _native.default)(_reactWebKit.Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n  padding-left: ", ";\n\n"])), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.spacing.deca;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.spacing.deca;
+});
 exports.TextPagination = TextPagination;
 //# sourceMappingURL=styled.js.map

package/dist/components/organisms/DataGrid/Footer/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["TdFooterStyled","styled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","nativeStyled","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light","TextPagination","Text"],"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Text } from '@tecsinapse/react-web-kit';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    \n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    height: 44px;\n    justify-content: center;\n    padding: ${({ theme }) => theme.spacing.centi};\n    width: 44px;  \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\n\nexport const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`\n  padding-right: ${({ theme }) => theme.spacing.deca};\n  padding-left: ${({ theme }) => theme.spacing.deca};\n\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,IAAAC,eAAA,EAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,IAAAL,eAAA,EAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMM,eAAe,GAAG,IAAAN,eAAA,EAAOK,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,IAAAP,eAAA,EAAOK,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,IAAAR,eAAA,EAAOK,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,IAAAT,eAAA,EAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;EAAEE;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,IAAAC,eAAA,EAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;EAAEX;AAAF,CAAD,KAAeA,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;EAAEb;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMY,UAAU,GAAG,IAAAJ,eAAA,EAAaD,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;EAAET;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACY,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;EAAEb;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcc,KAAM;AACtD,oBAAoB,CAAC;EAAEf;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcc,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,IAAAlB,eAAA,EAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMmB,WAAW,GAAG,IAAAnB,eAAA,EAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;EAAEE;AAAF,CAAD,KAAeA,KAAK,CAACkB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO;;AAOA,MAAMC,cAAc,GAAG,IAAAX,eAAA,EAAaY,iBAAb,CAAwC;AACtE,mBAAmB,CAAC;EAAEtB;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACrD,kBAAkB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD;AACA,CAJO"}
+{"version":3,"file":"styled.js","names":["TdFooterStyled","styled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","nativeStyled","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light","TextPagination","Text"],"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Text } from '@tecsinapse/react-web-kit';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    \n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    height: 44px;\n    justify-content: center;\n    padding: ${({ theme }) => theme.spacing.centi};\n    width: 44px;  \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\n\nexport const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`\n  padding-right: ${({ theme }) => theme.spacing.deca};\n  padding-left: ${({ theme }) => theme.spacing.deca};\n\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,cAAc,GAAG,IAAAC,eAAA,EAAOC,SAAP,CAAH,gGACd;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,KAA7B;AAAA,CADc,CAApB;;AAIA,MAAMC,aAAa,GAAG,IAAAL,eAAA,EAAO,KAAP,CAAH,4GAAnB;;AAKA,MAAMM,eAAe,GAAG,IAAAN,eAAA,EAAOK,aAAP,CAAH,oIAArB;;AAKA,MAAME,oBAAoB,GAAG,IAAAP,eAAA,EAAOK,aAAP,CAAH,yGAA1B;;AAIA,MAAMG,kBAAkB,GAAG,IAAAR,eAAA,EAAOK,aAAP,CAAH,uGAAxB;;AAIA,MAAMI,eAAe,GAAG,IAAAT,eAAA,EAAO,KAAP,CAAH,iGACV;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CADU,CAArB;;AAIA,MAAMC,gBAAgB,GAAG,IAAAC,eAAA,EAAaC,cAAb,CAAH,iMACR;EAAA,IAAC;IAAEX;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACY,YAAN,CAAmBC,IAAlC;AAAA,CADQ,EAId;EAAA,IAAC;IAAEb;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,KAA7B;AAAA,CAJc,CAAtB;;AASA,MAAMY,UAAU,GAAG,IAAAJ,eAAA,EAAaD,gBAAb,CAAH,sOACF;EAAA,IAAC;IAAET;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CADE,EAEH;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CAFG,EAGF;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACY,YAAN,CAAmBC,IAAlC;AAAA,CAHE,EAKJ;EAAA,IAAC;IAAEb;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcc,KAA7B;AAAA,CALI,EAMH;EAAA,IAAC;IAAEf;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcc,KAA7B;AAAA,CANG,CAAhB;;AASA,MAAMC,cAAc,GAAG,IAAAlB,eAAA,EAAO,KAAP,CAAH,8GAApB;;AAKA,MAAMmB,WAAW,GAAG,IAAAnB,eAAA,EAAO,KAAP,CAAH,wIAGX;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACkB,IAAN,CAAWC,KAAX,CAAiBC,KAAhC;AAAA,CAHW,CAAjB;;AAOA,MAAMC,cAAc,GAAG,IAAAX,eAAA,EAAaY,iBAAb,CAAH,6HACR;EAAA,IAAC;IAAEtB;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CADQ,EAET;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CAFS,CAApB"}

package/dist/components/organisms/DataGrid/Header/Header.js

@@ -17,15 +17,17 @@ var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Header = ({
-  selectable,
-  rowsCount,
-  headers,
-  data,
-  rowKeyExtractor,
-  selectedRows,
-  onSelected
-}) => {
+const Header = _ref => {
+  let {
+    selectable,
+    rowsCount,
+    headers,
+    data,
+    rowKeyExtractor,
+    selectedRows,
+    onSelected
+  } = _ref;
+
   const [sortDirection, setSortDirection] = _react.default.useState(_utils.NEXT_STATE.initial);
 
   const handleSortDirection = sort => {
@@ -58,29 +60,32 @@ const Header = ({
   return _react.default.createElement(_Table.THead, null, _react.default.createElement(_Table.Tr, null, selectable && _react.default.createElement(_styled.CheckboxHeader, null, _react.default.createElement(_reactCore.Checkbox, {
     checked: rowsCount === (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length),
     onChange: handleSelectAll
-  })), headers.map(({
-    label,
-    sort,
-    justifyContent = 'flex-start'
-  }) => _react.default.createElement(_Table.Th, {
-    key: label
-  }, _react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent
-    }
-  }, label, sort && _react.default.createElement("div", {
-    style: {
-      marginLeft: 8
-    }
-  }, _react.default.createElement(_reactCore.PressableSurface, {
-    onPress: () => handleSortDirection(sort)
-  }, _react.default.createElement(_reactCore.Icon, {
-    name: `sort-alphabetical-${(0, _utils.getIconSuffix)(sortDirection)}`,
-    type: 'material-community',
-    fontColor: (0, _utils.getIconColor)(sortDirection)
-  }))))))));
+  })), headers.map(_ref2 => {
+    let {
+      label,
+      sort,
+      justifyContent = 'flex-start'
+    } = _ref2;
+    return _react.default.createElement(_Table.Th, {
+      key: label
+    }, _react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent
+      }
+    }, label, sort && _react.default.createElement("div", {
+      style: {
+        marginLeft: 8
+      }
+    }, _react.default.createElement(_reactCore.PressableSurface, {
+      onPress: () => handleSortDirection(sort)
+    }, _react.default.createElement(_reactCore.Icon, {
+      name: "sort-alphabetical-".concat((0, _utils.getIconSuffix)(sortDirection)),
+      type: 'material-community',
+      fontColor: (0, _utils.getIconColor)(sortDirection)
+    })))));
+  })));
 };
 
 var _default = Header;

package/dist/components/organisms/DataGrid/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["Header","selectable","rowsCount","headers","data","rowKeyExtractor","selectedRows","onSelected","sortDirection","setSortDirection","React","useState","NEXT_STATE","initial","handleSortDirection","sort","handleSelectAll","checked","currentItemsOnData","findCurrentItemsOnData","unselectedItemsOnData","findUnselectedItemsOnData","length","concat","map","label","justifyContent","display","alignItems","marginLeft","getIconSuffix","getIconColor"],"sources":["../../../../../src/components/organisms/DataGrid/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';\nimport { Th, THead, Tr } from '../../../atoms/Table';\nimport { CheckboxHeader } from './styled';\nimport { HeadersType, SortState } from '../types';\nimport {\n  findCurrentItemsOnData,\n  findUnselectedItemsOnData,\n  getIconColor,\n  getIconSuffix,\n  NEXT_STATE,\n} from './utils';\n\nexport interface DataGridHeaderProps<Data> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  selectedRows: Data[];\n  onSelected?: (data: Data[]) => void;\n  rowKeyExtractor: (data: Data) => string;\n  rowsCount: number;\n  selectable?: boolean;\n}\n\nconst Header = <Data,>({\n  selectable,\n  rowsCount,\n  headers,\n  data,\n  rowKeyExtractor,\n  selectedRows,\n  onSelected,\n}: DataGridHeaderProps<Data>): JSX.Element => {\n  const [sortDirection, setSortDirection] = React.useState<SortState>(\n    NEXT_STATE.initial\n  );\n\n  const handleSortDirection = sort => {\n    sort(NEXT_STATE[sortDirection]);\n    setSortDirection(NEXT_STATE[sortDirection]);\n  };\n\n  const handleSelectAll = checked => {\n    if (!checked) {\n      onSelected?.([]);\n      return;\n    }\n\n    const currentItemsOnData = findCurrentItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    const unselectedItemsOnData = findUnselectedItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    if (checked && selectedRows.length < 1) {\n      onSelected?.(data);\n      return;\n    }\n    if (checked && currentItemsOnData.length < 1) {\n      onSelected?.(unselectedItemsOnData.concat(selectedRows));\n      return;\n    }\n    onSelected?.(selectedRows.concat(unselectedItemsOnData));\n  };\n\n  return (\n    <THead>\n      <Tr>\n        {selectable && (\n          <CheckboxHeader>\n            <Checkbox\n              checked={rowsCount === selectedRows?.length}\n              onChange={handleSelectAll}\n            />\n          </CheckboxHeader>\n        )}\n        {headers.map(({ label, sort, justifyContent = 'flex-start' }) => (\n          <Th key={label}>\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent,\n              }}\n            >\n              {label}\n              {sort && (\n                <div style={{ marginLeft: 8 }}>\n                  <PressableSurface onPress={() => handleSortDirection(sort)}>\n                    <Icon\n                      name={`sort-alphabetical-${getIconSuffix(sortDirection)}`}\n                      type={'material-community'}\n                      fontColor={getIconColor(sortDirection)}\n                    />\n                  </PressableSurface>\n                </div>\n              )}\n            </div>\n          </Th>\n        ))}\n      </Tr>\n    </THead>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;AAkBA,MAAMA,MAAM,GAAG,CAAQ;EACrBC,UADqB;EAErBC,SAFqB;EAGrBC,OAHqB;EAIrBC,IAJqB;EAKrBC,eALqB;EAMrBC,YANqB;EAOrBC;AAPqB,CAAR,KAQ+B;EAC5C,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,cAAA,CAAMC,QAAN,CACxCC,iBAAA,CAAWC,OAD6B,CAA1C;;EAIA,MAAMC,mBAAmB,GAAGC,IAAI,IAAI;IAClCA,IAAI,CAACH,iBAAA,CAAWJ,aAAX,CAAD,CAAJ;IACAC,gBAAgB,CAACG,iBAAA,CAAWJ,aAAX,CAAD,CAAhB;EACD,CAHD;;EAKA,MAAMQ,eAAe,GAAGC,OAAO,IAAI;IACjC,IAAI,CAACA,OAAL,EAAc;MACZV,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAG,EAAH,CAAV;MACA;IACD;;IAED,MAAMW,kBAAkB,GAAG,IAAAC,6BAAA,EACzBb,YADyB,EAEzBF,IAFyB,EAGzBC,eAHyB,CAA3B;IAMA,MAAMe,qBAAqB,GAAG,IAAAC,gCAAA,EAC5Bf,YAD4B,EAE5BF,IAF4B,EAG5BC,eAH4B,CAA9B;;IAMA,IAAIY,OAAO,IAAIX,YAAY,CAACgB,MAAb,GAAsB,CAArC,EAAwC;MACtCf,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGH,IAAH,CAAV;MACA;IACD;;IACD,IAAIa,OAAO,IAAIC,kBAAkB,CAACI,MAAnB,GAA4B,CAA3C,EAA8C;MAC5Cf,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGa,qBAAqB,CAACG,MAAtB,CAA6BjB,YAA7B,CAAH,CAAV;MACA;IACD;;IACDC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGD,YAAY,CAACiB,MAAb,CAAoBH,qBAApB,CAAH,CAAV;EACD,CA3BD;;EA6BA,OACE,6BAAC,YAAD,QACE,6BAAC,SAAD,QACGnB,UAAU,IACT,6BAAC,sBAAD,QACE,6BAAC,mBAAD;IACE,OAAO,EAAEC,SAAS,MAAKI,YAAL,aAAKA,YAAL,uBAAKA,YAAY,CAAEgB,MAAnB,CADpB;IAEE,QAAQ,EAAEN;EAFZ,EADF,CAFJ,EASGb,OAAO,CAACqB,GAAR,CAAY,CAAC;IAAEC,KAAF;IAASV,IAAT;IAAeW,cAAc,GAAG;EAAhC,CAAD,KACX,6BAAC,SAAD;IAAI,GAAG,EAAED;EAAT,GACE;IACE,KAAK,EAAE;MACLE,OAAO,EAAE,MADJ;MAELC,UAAU,EAAE,QAFP;MAGLF;IAHK;EADT,GAOGD,KAPH,EAQGV,IAAI,IACH;IAAK,KAAK,EAAE;MAAEc,UAAU,EAAE;IAAd;EAAZ,GACE,6BAAC,2BAAD;IAAkB,OAAO,EAAE,MAAMf,mBAAmB,CAACC,IAAD;EAApD,GACE,6BAAC,eAAD;IACE,IAAI,EAAG,qBAAoB,IAAAe,oBAAA,EAActB,aAAd,CAA6B,EAD1D;IAEE,IAAI,EAAE,oBAFR;IAGE,SAAS,EAAE,IAAAuB,mBAAA,EAAavB,aAAb;EAHb,EADF,CADF,CATJ,CADF,CADD,CATH,CADF,CADF;AAsCD,CArFD;;eAuFeR,M"}
+{"version":3,"file":"Header.js","names":["Header","selectable","rowsCount","headers","data","rowKeyExtractor","selectedRows","onSelected","sortDirection","setSortDirection","React","useState","NEXT_STATE","initial","handleSortDirection","sort","handleSelectAll","checked","currentItemsOnData","findCurrentItemsOnData","unselectedItemsOnData","findUnselectedItemsOnData","length","concat","map","label","justifyContent","display","alignItems","marginLeft","getIconSuffix","getIconColor"],"sources":["../../../../../src/components/organisms/DataGrid/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';\nimport { Th, THead, Tr } from '../../../atoms/Table';\nimport { CheckboxHeader } from './styled';\nimport { HeadersType, SortState } from '../types';\nimport {\n  findCurrentItemsOnData,\n  findUnselectedItemsOnData,\n  getIconColor,\n  getIconSuffix,\n  NEXT_STATE,\n} from './utils';\n\nexport interface DataGridHeaderProps<Data> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  selectedRows: Data[];\n  onSelected?: (data: Data[]) => void;\n  rowKeyExtractor: (data: Data) => string;\n  rowsCount: number;\n  selectable?: boolean;\n}\n\nconst Header = <Data,>({\n  selectable,\n  rowsCount,\n  headers,\n  data,\n  rowKeyExtractor,\n  selectedRows,\n  onSelected,\n}: DataGridHeaderProps<Data>): JSX.Element => {\n  const [sortDirection, setSortDirection] = React.useState<SortState>(\n    NEXT_STATE.initial\n  );\n\n  const handleSortDirection = sort => {\n    sort(NEXT_STATE[sortDirection]);\n    setSortDirection(NEXT_STATE[sortDirection]);\n  };\n\n  const handleSelectAll = checked => {\n    if (!checked) {\n      onSelected?.([]);\n      return;\n    }\n\n    const currentItemsOnData = findCurrentItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    const unselectedItemsOnData = findUnselectedItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    if (checked && selectedRows.length < 1) {\n      onSelected?.(data);\n      return;\n    }\n    if (checked && currentItemsOnData.length < 1) {\n      onSelected?.(unselectedItemsOnData.concat(selectedRows));\n      return;\n    }\n    onSelected?.(selectedRows.concat(unselectedItemsOnData));\n  };\n\n  return (\n    <THead>\n      <Tr>\n        {selectable && (\n          <CheckboxHeader>\n            <Checkbox\n              checked={rowsCount === selectedRows?.length}\n              onChange={handleSelectAll}\n            />\n          </CheckboxHeader>\n        )}\n        {headers.map(({ label, sort, justifyContent = 'flex-start' }) => (\n          <Th key={label}>\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent,\n              }}\n            >\n              {label}\n              {sort && (\n                <div style={{ marginLeft: 8 }}>\n                  <PressableSurface onPress={() => handleSortDirection(sort)}>\n                    <Icon\n                      name={`sort-alphabetical-${getIconSuffix(sortDirection)}`}\n                      type={'material-community'}\n                      fontColor={getIconColor(sortDirection)}\n                    />\n                  </PressableSurface>\n                </div>\n              )}\n            </div>\n          </Th>\n        ))}\n      </Tr>\n    </THead>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;AAkBA,MAAMA,MAAM,GAAG,QAQ+B;EAAA,IARvB;IACrBC,UADqB;IAErBC,SAFqB;IAGrBC,OAHqB;IAIrBC,IAJqB;IAKrBC,eALqB;IAMrBC,YANqB;IAOrBC;EAPqB,CAQuB;;EAC5C,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,cAAA,CAAMC,QAAN,CACxCC,iBAAA,CAAWC,OAD6B,CAA1C;;EAIA,MAAMC,mBAAmB,GAAGC,IAAI,IAAI;IAClCA,IAAI,CAACH,iBAAA,CAAWJ,aAAX,CAAD,CAAJ;IACAC,gBAAgB,CAACG,iBAAA,CAAWJ,aAAX,CAAD,CAAhB;EACD,CAHD;;EAKA,MAAMQ,eAAe,GAAGC,OAAO,IAAI;IACjC,IAAI,CAACA,OAAL,EAAc;MACZV,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAG,EAAH,CAAV;MACA;IACD;;IAED,MAAMW,kBAAkB,GAAG,IAAAC,6BAAA,EACzBb,YADyB,EAEzBF,IAFyB,EAGzBC,eAHyB,CAA3B;IAMA,MAAMe,qBAAqB,GAAG,IAAAC,gCAAA,EAC5Bf,YAD4B,EAE5BF,IAF4B,EAG5BC,eAH4B,CAA9B;;IAMA,IAAIY,OAAO,IAAIX,YAAY,CAACgB,MAAb,GAAsB,CAArC,EAAwC;MACtCf,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGH,IAAH,CAAV;MACA;IACD;;IACD,IAAIa,OAAO,IAAIC,kBAAkB,CAACI,MAAnB,GAA4B,CAA3C,EAA8C;MAC5Cf,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGa,qBAAqB,CAACG,MAAtB,CAA6BjB,YAA7B,CAAH,CAAV;MACA;IACD;;IACDC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAGD,YAAY,CAACiB,MAAb,CAAoBH,qBAApB,CAAH,CAAV;EACD,CA3BD;;EA6BA,OACE,6BAAC,YAAD,QACE,6BAAC,SAAD,QACGnB,UAAU,IACT,6BAAC,sBAAD,QACE,6BAAC,mBAAD;IACE,OAAO,EAAEC,SAAS,MAAKI,YAAL,aAAKA,YAAL,uBAAKA,YAAY,CAAEgB,MAAnB,CADpB;IAEE,QAAQ,EAAEN;EAFZ,EADF,CAFJ,EASGb,OAAO,CAACqB,GAAR,CAAY;IAAA,IAAC;MAAEC,KAAF;MAASV,IAAT;MAAeW,cAAc,GAAG;IAAhC,CAAD;IAAA,OACX,6BAAC,SAAD;MAAI,GAAG,EAAED;IAAT,GACE;MACE,KAAK,EAAE;QACLE,OAAO,EAAE,MADJ;QAELC,UAAU,EAAE,QAFP;QAGLF;MAHK;IADT,GAOGD,KAPH,EAQGV,IAAI,IACH;MAAK,KAAK,EAAE;QAAEc,UAAU,EAAE;MAAd;IAAZ,GACE,6BAAC,2BAAD;MAAkB,OAAO,EAAE,MAAMf,mBAAmB,CAACC,IAAD;IAApD,GACE,6BAAC,eAAD;MACE,IAAI,8BAAuB,IAAAe,oBAAA,EAActB,aAAd,CAAvB,CADN;MAEE,IAAI,EAAE,oBAFR;MAGE,SAAS,EAAE,IAAAuB,mBAAA,EAAavB,aAAb;IAHb,EADF,CADF,CATJ,CADF,CADW;EAAA,CAAZ,CATH,CADF,CADF;AAsCD,CArFD;;eAuFeR,M"}