@tecsinapse/react-web-kit 1.22.0 → 1.22.1-beta.2

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../../atoms/Button/Button.cjs');
+var reactCore = require('@tecsinapse/react-core');
+var Select = require('../../../molecules/Select/Select.cjs');
+require('../../../atoms/Table/Cell/styled.cjs');
+require('../../../atoms/Table/Container/styled.cjs');
+var TFoot = require('../../../atoms/Table/Footer/TFoot.cjs');
+require('../../../atoms/Table/Header/styled.cjs');
+var Tr = require('../../../atoms/Table/Row/Tr.cjs');
+require('../../../atoms/Table/Toolbar/styled.cjs');
+require('../../../atoms/Table/styled.cjs');
+var styled = require('./styled.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Footer = ({
+  rowsPerPage,
+  onRowsPerPageChange,
+  rowsPerPageOptions,
+  rowsPerPageLabel,
+  exportFunction,
+  exportLabel,
+  rowsCount,
+  page,
+  onPageChange,
+  pagination,
+  exportComponent
+}) => {
+  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
+    throw new Error(
+      "[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)"
+    );
+  }
+  const getPaginationSlice = () => {
+    const totalPages = Math.ceil(rowsCount / rowsPerPage);
+    if (totalPages < 4) {
+      return { start: 0, end: totalPages };
+    }
+    if (page === 0) {
+      return { start: page, end: page + 3 };
+    }
+    if (page === totalPages - 1) {
+      return { start: page - 2, end: page + 1 };
+    }
+    return { start: page - 1, end: page + 2 };
+  };
+  const handleRowsPerPage = React__default["default"].useCallback(
+    (value) => {
+      onRowsPerPageChange == null ? void 0 : onRowsPerPageChange(value);
+      onPageChange == null ? void 0 : onPageChange(0);
+    },
+    [onPageChange, onRowsPerPageChange]
+  );
+  const currentInitItem = page * rowsPerPage + 1;
+  const currentFinalItem = (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
+  return /* @__PURE__ */ React__default["default"].createElement(TFoot, null, /* @__PURE__ */ React__default["default"].createElement(Tr, null, /* @__PURE__ */ React__default["default"].createElement(styled.TdFooterStyled, {
+    colSpan: 99
+  }, /* @__PURE__ */ React__default["default"].createElement(styled.FooterContainer, null, /* @__PURE__ */ React__default["default"].createElement(styled.FooterContainerStart, null, pagination && /* @__PURE__ */ React__default["default"].createElement(styled.SelectContainer, null, /* @__PURE__ */ React__default["default"].createElement(Select, {
+    options: rowsPerPageOptions,
+    onSelect: handleRowsPerPage,
+    value: rowsPerPage,
+    type: "single",
+    keyExtractor: (value) => String(value),
+    labelExtractor: rowsPerPageLabel,
+    anchor: "top"
+  })), exportComponent && !exportFunction && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, exportComponent), exportFunction && /* @__PURE__ */ React__default["default"].createElement(styled.HoveredText, null, /* @__PURE__ */ React__default["default"].createElement(Button, {
+    variant: "outlined",
+    onPress: () => exportFunction()
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
+    fontColor: "orange",
+    fontWeight: "bold"
+  }, exportLabel)))), pagination && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(styled.TextPagination, {
+    fontWeight: "bold",
+    fontColor: "medium"
+  }, `Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`), /* @__PURE__ */ React__default["default"].createElement(styled.FooterContainerEnd, null, /* @__PURE__ */ React__default["default"].createElement(styled.NavigationButton, {
+    onPress: () => onPageChange == null ? void 0 : onPageChange(page - 1),
+    disabled: page === 0
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
+    name: "chevron-left",
+    type: "material-community",
+    fontColor: "light"
+  })), /* @__PURE__ */ React__default["default"].createElement(styled.PagesContainer, null, [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(
+    getPaginationSlice().start,
+    getPaginationSlice().end
+  ).map((value) => /* @__PURE__ */ React__default["default"].createElement(styled.HoveredText, {
+    key: `page-${value}`
+  }, /* @__PURE__ */ React__default["default"].createElement(styled.PageButton, {
+    variant: page === value ? "outlined" : "text",
+    onPress: () => onPageChange == null ? void 0 : onPageChange(value)
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
+    fontColor: "medium",
+    fontWeight: "bold"
+  }, value + 1))))), /* @__PURE__ */ React__default["default"].createElement(styled.NavigationButton, {
+    onPress: () => onPageChange == null ? void 0 : onPageChange(page + 1),
+    disabled: page === Math.ceil(rowsCount / rowsPerPage) - 1
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
+    name: "chevron-right",
+    type: "material-community",
+    fontColor: "light"
+  }))))))));
+};
+var Footer$1 = React__default["default"].memo(Footer);
+
+module.exports = Footer$1;
+//# sourceMappingURL=Footer.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../../atoms/Button';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { Select } from '../../../molecules/Select';\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"],"names":["React","TdFooterStyled","FooterContainer","FooterContainerStart","SelectContainer","HoveredText","Text","TextPagination","FooterContainerEnd","NavigationButton","Icon","PagesContainer","PageButton"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import Button from '../../../atoms/Button/Button.mjs';
+import { Text, Icon } from '@tecsinapse/react-core';
+import Select from '../../../molecules/Select/Select.mjs';
+import '../../../atoms/Table/Cell/styled.mjs';
+import '../../../atoms/Table/Container/styled.mjs';
+import TFoot from '../../../atoms/Table/Footer/TFoot.mjs';
+import '../../../atoms/Table/Header/styled.mjs';
+import Tr from '../../../atoms/Table/Row/Tr.mjs';
+import '../../../atoms/Table/Toolbar/styled.mjs';
+import '../../../atoms/Table/styled.mjs';
+import { TdFooterStyled, FooterContainer, FooterContainerStart, SelectContainer, HoveredText, TextPagination, FooterContainerEnd, NavigationButton, PagesContainer, PageButton } from './styled.mjs';
+
+const Footer = ({
+  rowsPerPage,
+  onRowsPerPageChange,
+  rowsPerPageOptions,
+  rowsPerPageLabel,
+  exportFunction,
+  exportLabel,
+  rowsCount,
+  page,
+  onPageChange,
+  pagination,
+  exportComponent
+}) => {
+  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
+    throw new Error(
+      "[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)"
+    );
+  }
+  const getPaginationSlice = () => {
+    const totalPages = Math.ceil(rowsCount / rowsPerPage);
+    if (totalPages < 4) {
+      return { start: 0, end: totalPages };
+    }
+    if (page === 0) {
+      return { start: page, end: page + 3 };
+    }
+    if (page === totalPages - 1) {
+      return { start: page - 2, end: page + 1 };
+    }
+    return { start: page - 1, end: page + 2 };
+  };
+  const handleRowsPerPage = React.useCallback(
+    (value) => {
+      onRowsPerPageChange == null ? void 0 : onRowsPerPageChange(value);
+      onPageChange == null ? void 0 : onPageChange(0);
+    },
+    [onPageChange, onRowsPerPageChange]
+  );
+  const currentInitItem = page * rowsPerPage + 1;
+  const currentFinalItem = (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
+  return /* @__PURE__ */ React.createElement(TFoot, null, /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(TdFooterStyled, {
+    colSpan: 99
+  }, /* @__PURE__ */ React.createElement(FooterContainer, null, /* @__PURE__ */ React.createElement(FooterContainerStart, null, pagination && /* @__PURE__ */ React.createElement(SelectContainer, null, /* @__PURE__ */ React.createElement(Select, {
+    options: rowsPerPageOptions,
+    onSelect: handleRowsPerPage,
+    value: rowsPerPage,
+    type: "single",
+    keyExtractor: (value) => String(value),
+    labelExtractor: rowsPerPageLabel,
+    anchor: "top"
+  })), exportComponent && !exportFunction && /* @__PURE__ */ React.createElement(React.Fragment, null, exportComponent), exportFunction && /* @__PURE__ */ React.createElement(HoveredText, null, /* @__PURE__ */ React.createElement(Button, {
+    variant: "outlined",
+    onPress: () => exportFunction()
+  }, /* @__PURE__ */ React.createElement(Text, {
+    fontColor: "orange",
+    fontWeight: "bold"
+  }, exportLabel)))), pagination && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TextPagination, {
+    fontWeight: "bold",
+    fontColor: "medium"
+  }, `Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`), /* @__PURE__ */ React.createElement(FooterContainerEnd, null, /* @__PURE__ */ React.createElement(NavigationButton, {
+    onPress: () => onPageChange == null ? void 0 : onPageChange(page - 1),
+    disabled: page === 0
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "chevron-left",
+    type: "material-community",
+    fontColor: "light"
+  })), /* @__PURE__ */ React.createElement(PagesContainer, null, [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(
+    getPaginationSlice().start,
+    getPaginationSlice().end
+  ).map((value) => /* @__PURE__ */ React.createElement(HoveredText, {
+    key: `page-${value}`
+  }, /* @__PURE__ */ React.createElement(PageButton, {
+    variant: page === value ? "outlined" : "text",
+    onPress: () => onPageChange == null ? void 0 : onPageChange(value)
+  }, /* @__PURE__ */ React.createElement(Text, {
+    fontColor: "medium",
+    fontWeight: "bold"
+  }, value + 1))))), /* @__PURE__ */ React.createElement(NavigationButton, {
+    onPress: () => onPageChange == null ? void 0 : onPageChange(page + 1),
+    disabled: page === Math.ceil(rowsCount / rowsPerPage) - 1
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "chevron-right",
+    type: "material-community",
+    fontColor: "light"
+  }))))))));
+};
+var Footer$1 = React.memo(Footer);
+
+export { Footer$1 as default };
+//# sourceMappingURL=Footer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.mjs","sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../../atoms/Button';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { Select } from '../../../molecules/Select';\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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('@emotion/styled');
+var nativeStyled = require('@emotion/native');
+var reactCore = require('@tecsinapse/react-core');
+require('react');
+var Td = require('../../../atoms/Table/Cell/Td.cjs');
+require('../../../atoms/Table/Container/styled.cjs');
+require('../../../atoms/Table/Footer/styled.cjs');
+require('../../../atoms/Table/Header/styled.cjs');
+require('../../../atoms/Table/Row/styled.cjs');
+require('../../../atoms/Table/Toolbar/styled.cjs');
+require('../../../atoms/Table/styled.cjs');
+var Button = require('../../../atoms/Button/Button.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
+
+const TdFooterStyled = styled__default["default"](Td)`
+  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;
+`;
+const FlexContainer = styled__default["default"]("div")`
+  display: flex;
+  flex-grow: 1;
+`;
+const FooterContainer = styled__default["default"](FlexContainer)`
+  justify-content: space-between;
+  align-items: center;
+`;
+const FooterContainerStart = styled__default["default"](FlexContainer)`
+  justify-content: flex-start;
+`;
+const FooterContainerEnd = styled__default["default"](FlexContainer)`
+  justify-content: flex-end;
+`;
+const SelectContainer = styled__default["default"]("div")`
+  margin-right: ${({ theme }) => theme.spacing.deca};
+`;
+const NavigationButton = nativeStyled__default["default"](Button)`    
+    border-radius: ${({ theme }) => theme.borderRadius.mili};
+    height: 44px;
+    justify-content: center;
+    padding: ${({ theme }) => theme.spacing.centi};
+    width: 44px;  
+`;
+const PageButton = nativeStyled__default["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 PagesContainer = styled__default["default"]("div")`
+  margin: 0 20px;
+  display: flex;
+`;
+const HoveredText = styled__default["default"]("div")`
+  user-select: none;
+  &:hover * {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+const TextPagination = nativeStyled__default["default"](reactCore.Text)`
+  padding-right: ${({ theme }) => theme.spacing.deca};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+
+`;
+
+exports.FlexContainer = FlexContainer;
+exports.FooterContainer = FooterContainer;
+exports.FooterContainerEnd = FooterContainerEnd;
+exports.FooterContainerStart = FooterContainerStart;
+exports.HoveredText = HoveredText;
+exports.NavigationButton = NavigationButton;
+exports.PageButton = PageButton;
+exports.PagesContainer = PagesContainer;
+exports.SelectContainer = SelectContainer;
+exports.TdFooterStyled = TdFooterStyled;
+exports.TextPagination = TextPagination;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps, Text } from '@tecsinapse/react-core';\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"],"names":["styled","nativeStyled","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMa,MAAA,cAAA,GAAiBA,2BAAO,EAAE,CAAA,CAAA;AAAA,WAAA,EAC1B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,aAAA,GAAgBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAK5B,MAAA,eAAA,GAAkBA,2BAAO,aAAa,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKtC,MAAA,oBAAA,GAAuBA,2BAAO,aAAa,CAAA,CAAA;AAAA;AAAA,EAAA;AAI3C,MAAA,kBAAA,GAAqBA,2BAAO,aAAa,CAAA,CAAA;AAAA;AAAA,EAAA;AAIzC,MAAA,eAAA,GAAkBA,2BAAO,KAAK,CAAA,CAAA;AAAA,gBAAA,EACzB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmBC,iCAAa,MAAM,CAAA,CAAA;AAAA,mBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,aAAA,EAGxC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA;AAAA,EAAA;AAK/B,MAAA,UAAA,GAAaA,iCAAa,gBAAgB,CAAA,CAAA;AAAA,mBAAA,EAClC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,kBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,iBAAA,EAEpC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,kBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGpC,MAAA,cAAA,GAAiBD,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAK7B,MAAA,WAAA,GAAcA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,WAAA,EAG1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA;AAAA,EAAA;AAIhC,MAAA,cAAA,GAAiBC,iCAAaC,cAAI,CAAA,CAAA;AAAA,iBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,gBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import nativeStyled from '@emotion/native';
+import { Text } from '@tecsinapse/react-core';
+import 'react';
+import Td from '../../../atoms/Table/Cell/Td.mjs';
+import '../../../atoms/Table/Container/styled.mjs';
+import '../../../atoms/Table/Footer/styled.mjs';
+import '../../../atoms/Table/Header/styled.mjs';
+import '../../../atoms/Table/Row/styled.mjs';
+import '../../../atoms/Table/Toolbar/styled.mjs';
+import '../../../atoms/Table/styled.mjs';
+import Button from '../../../atoms/Button/Button.mjs';
+
+const TdFooterStyled = styled(Td)`
+  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;
+`;
+const FlexContainer = styled("div")`
+  display: flex;
+  flex-grow: 1;
+`;
+const FooterContainer = styled(FlexContainer)`
+  justify-content: space-between;
+  align-items: center;
+`;
+const FooterContainerStart = styled(FlexContainer)`
+  justify-content: flex-start;
+`;
+const FooterContainerEnd = styled(FlexContainer)`
+  justify-content: flex-end;
+`;
+const SelectContainer = styled("div")`
+  margin-right: ${({ theme }) => theme.spacing.deca};
+`;
+const NavigationButton = nativeStyled(Button)`    
+    border-radius: ${({ theme }) => theme.borderRadius.mili};
+    height: 44px;
+    justify-content: center;
+    padding: ${({ theme }) => theme.spacing.centi};
+    width: 44px;  
+`;
+const PageButton = nativeStyled(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 PagesContainer = styled("div")`
+  margin: 0 20px;
+  display: flex;
+`;
+const HoveredText = styled("div")`
+  user-select: none;
+  &:hover * {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+const TextPagination = nativeStyled(Text)`
+  padding-right: ${({ theme }) => theme.spacing.deca};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+
+`;
+
+export { FlexContainer, FooterContainer, FooterContainerEnd, FooterContainerStart, HoveredText, NavigationButton, PageButton, PagesContainer, SelectContainer, TdFooterStyled, TextPagination };
+//# sourceMappingURL=styled.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.mjs","sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps, Text } from '@tecsinapse/react-core';\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"],"names":[],"mappings":";;;;;;;;;;;;;AAMa,MAAA,cAAA,GAAiB,OAAO,EAAE,CAAA,CAAA;AAAA,WAAA,EAC1B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAK5B,MAAA,eAAA,GAAkB,OAAO,aAAa,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKtC,MAAA,oBAAA,GAAuB,OAAO,aAAa,CAAA,CAAA;AAAA;AAAA,EAAA;AAI3C,MAAA,kBAAA,GAAqB,OAAO,aAAa,CAAA,CAAA;AAAA;AAAA,EAAA;AAIzC,MAAA,eAAA,GAAkB,OAAO,KAAK,CAAA,CAAA;AAAA,gBAAA,EACzB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,gBAAA,GAAmB,aAAa,MAAM,CAAA,CAAA;AAAA,mBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,aAAA,EAGxC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA;AAAA,EAAA;AAK/B,MAAA,UAAA,GAAa,aAAa,gBAAgB,CAAA,CAAA;AAAA,mBAAA,EAClC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,kBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,iBAAA,EAEpC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,kBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGpC,MAAA,cAAA,GAAiB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAK7B,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,WAAA,EAG1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA;AAAA,EAAA;AAIhC,MAAA,cAAA,GAAiB,aAAa,IAAI,CAAA,CAAA;AAAA,iBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,gBAAA,EAC9B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,84 @@
+'use strict';
+
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+require('../../../atoms/Table/Cell/styled.cjs');
+require('../../../atoms/Table/Container/styled.cjs');
+require('../../../atoms/Table/Footer/styled.cjs');
+var Th = require('../../../atoms/Table/Header/Th.cjs');
+var THead = require('../../../atoms/Table/Header/THead.cjs');
+var Tr = require('../../../atoms/Table/Row/Tr.cjs');
+require('../../../atoms/Table/Toolbar/styled.cjs');
+require('../../../atoms/Table/styled.cjs');
+var styled = require('./styled.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Header = ({
+  selectable,
+  rowsCount,
+  headers,
+  data,
+  rowKeyExtractor,
+  selectedRows,
+  onSelected
+}) => {
+  const [sortDirection, setSortDirection] = React__default["default"].useState(
+    utils.NEXT_STATE.initial
+  );
+  const handleSortDirection = (sort) => {
+    sort(utils.NEXT_STATE[sortDirection]);
+    setSortDirection(utils.NEXT_STATE[sortDirection]);
+  };
+  const handleSelectAll = (checked) => {
+    if (!checked) {
+      onSelected == null ? void 0 : onSelected([]);
+      return;
+    }
+    const currentItemsOnData = utils.findCurrentItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+    const unselectedItemsOnData = utils.findUnselectedItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+    if (checked && selectedRows.length < 1) {
+      onSelected == null ? void 0 : onSelected(data);
+      return;
+    }
+    if (checked && currentItemsOnData.length < 1) {
+      onSelected == null ? void 0 : onSelected(unselectedItemsOnData.concat(selectedRows));
+      return;
+    }
+    onSelected == null ? void 0 : onSelected(selectedRows.concat(unselectedItemsOnData));
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(THead, null, /* @__PURE__ */ React__default["default"].createElement(Tr, null, selectable && /* @__PURE__ */ React__default["default"].createElement(styled.CheckboxHeader, null, /* @__PURE__ */ React__default["default"].createElement(reactCore.Checkbox, {
+    checked: rowsCount === (selectedRows == null ? void 0 : selectedRows.length),
+    onChange: handleSelectAll
+  })), headers.map(({ label, sort, justifyContent = "flex-start" }) => /* @__PURE__ */ React__default["default"].createElement(Th, {
+    key: label
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent
+    }
+  }, label, sort && /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { marginLeft: 8 }
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.PressableSurface, {
+    onPress: () => handleSortDirection(sort)
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
+    name: `sort-alphabetical-${utils.getIconSuffix(sortDirection)}`,
+    type: "material-community",
+    fontColor: utils.getIconColor(sortDirection)
+  }))))))));
+};
+
+module.exports = Header;
+//# sourceMappingURL=Header.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.cjs","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"],"names":["React","NEXT_STATE","findCurrentItemsOnData","findUnselectedItemsOnData","CheckboxHeader","Checkbox","PressableSurface","Icon","getIconSuffix","getIconColor"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAM,SAAS,CAAQ;AAAA,EACrB,UAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AACF,CAA8C,KAAA;AAC5C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,yBAAM,CAAA,QAAA;AAAA,IAC9CC,gBAAW,CAAA,OAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,sBAAsB,CAAQ,IAAA,KAAA;AAClC,IAAA,IAAA,CAAKA,iBAAW,aAAc,CAAA,CAAA,CAAA;AAC9B,IAAA,gBAAA,CAAiBA,iBAAW,aAAc,CAAA,CAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EAAA,MAAM,kBAAkB,CAAW,OAAA,KAAA;AACjC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAa,EAAC,CAAA,CAAA;AACd,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,kBAAqB,GAAAC,4BAAA;AAAA,MACzB,YAAA;AAAA,MACA,IAAA;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,qBAAwB,GAAAC,+BAAA;AAAA,MAC5B,YAAA;AAAA,MACA,IAAA;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAI,IAAA,OAAA,IAAW,YAAa,CAAA,MAAA,GAAS,CAAG,EAAA;AACtC,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,IAAA,CAAA,CAAA;AACb,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,OAAA,IAAW,kBAAmB,CAAA,MAAA,GAAS,CAAG,EAAA;AAC5C,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,qBAAA,CAAsB,OAAO,YAAY,CAAA,CAAA,CAAA;AACtD,MAAA,OAAA;AAAA,KACF;AACA,IAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,YAAA,CAAa,OAAO,qBAAqB,CAAA,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,+DACG,KACC,EAAA,IAAA,kBAAAH,yBAAA,CAAA,aAAA,CAAC,UACE,UACC,oBAAAA,yBAAA,CAAA,aAAA,CAACI,6CACEJ,yBAAA,CAAA,aAAA,CAAAK,kBAAA,EAAA;AAAA,IACC,OAAA,EAAS,eAAc,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,MAAA,CAAA;AAAA,IACrC,QAAU,EAAA,eAAA;AAAA,GACZ,CACF,CAED,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,EAAE,KAAA,EAAO,IAAM,EAAA,cAAA,GAAiB,YAAa,EAAA,qBACxDL,yBAAA,CAAA,aAAA,CAAA,EAAA,EAAA;AAAA,IAAG,GAAK,EAAA,KAAA;AAAA,GAAA,kBACNA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAA;AAAA,KACF;AAAA,GAEC,EAAA,KAAA,EACA,wBACEA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,UAAA,EAAY,CAAE,EAAA;AAAA,GAAA,kBACzBA,yBAAA,CAAA,aAAA,CAAAM,0BAAA,EAAA;AAAA,IAAiB,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,GAAA,kBACtDN,yBAAA,CAAA,aAAA,CAAAO,cAAA,EAAA;AAAA,IACC,IAAA,EAAM,CAAqB,kBAAA,EAAAC,mBAAA,CAAc,aAAa,CAAA,CAAA,CAAA;AAAA,IACtD,IAAM,EAAA,oBAAA;AAAA,IACN,SAAA,EAAWC,mBAAa,aAAa,CAAA;AAAA,GACvC,CACF,CACF,CAEJ,CACF,CACD,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Checkbox, PressableSurface, Icon } from '@tecsinapse/react-core';
+import '../../../atoms/Table/Cell/styled.mjs';
+import '../../../atoms/Table/Container/styled.mjs';
+import '../../../atoms/Table/Footer/styled.mjs';
+import Th from '../../../atoms/Table/Header/Th.mjs';
+import THead from '../../../atoms/Table/Header/THead.mjs';
+import Tr from '../../../atoms/Table/Row/Tr.mjs';
+import '../../../atoms/Table/Toolbar/styled.mjs';
+import '../../../atoms/Table/styled.mjs';
+import { CheckboxHeader } from './styled.mjs';
+import { NEXT_STATE, getIconSuffix, getIconColor, findCurrentItemsOnData, findUnselectedItemsOnData } from './utils.mjs';
+
+const Header = ({
+  selectable,
+  rowsCount,
+  headers,
+  data,
+  rowKeyExtractor,
+  selectedRows,
+  onSelected
+}) => {
+  const [sortDirection, setSortDirection] = React.useState(
+    NEXT_STATE.initial
+  );
+  const handleSortDirection = (sort) => {
+    sort(NEXT_STATE[sortDirection]);
+    setSortDirection(NEXT_STATE[sortDirection]);
+  };
+  const handleSelectAll = (checked) => {
+    if (!checked) {
+      onSelected == null ? void 0 : onSelected([]);
+      return;
+    }
+    const currentItemsOnData = findCurrentItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+    const unselectedItemsOnData = findUnselectedItemsOnData(
+      selectedRows,
+      data,
+      rowKeyExtractor
+    );
+    if (checked && selectedRows.length < 1) {
+      onSelected == null ? void 0 : onSelected(data);
+      return;
+    }
+    if (checked && currentItemsOnData.length < 1) {
+      onSelected == null ? void 0 : onSelected(unselectedItemsOnData.concat(selectedRows));
+      return;
+    }
+    onSelected == null ? void 0 : onSelected(selectedRows.concat(unselectedItemsOnData));
+  };
+  return /* @__PURE__ */ React.createElement(THead, null, /* @__PURE__ */ React.createElement(Tr, null, selectable && /* @__PURE__ */ React.createElement(CheckboxHeader, null, /* @__PURE__ */ React.createElement(Checkbox, {
+    checked: rowsCount === (selectedRows == null ? void 0 : selectedRows.length),
+    onChange: handleSelectAll
+  })), headers.map(({ label, sort, justifyContent = "flex-start" }) => /* @__PURE__ */ React.createElement(Th, {
+    key: label
+  }, /* @__PURE__ */ React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent
+    }
+  }, label, sort && /* @__PURE__ */ React.createElement("div", {
+    style: { marginLeft: 8 }
+  }, /* @__PURE__ */ React.createElement(PressableSurface, {
+    onPress: () => handleSortDirection(sort)
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: `sort-alphabetical-${getIconSuffix(sortDirection)}`,
+    type: "material-community",
+    fontColor: getIconColor(sortDirection)
+  }))))))));
+};
+
+export { Header as default };
+//# sourceMappingURL=Header.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","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"],"names":[],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,SAAS,CAAQ;AAAA,EACrB,UAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AACF,CAA8C,KAAA;AAC5C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IAC9C,UAAW,CAAA,OAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,sBAAsB,CAAQ,IAAA,KAAA;AAClC,IAAA,IAAA,CAAK,WAAW,aAAc,CAAA,CAAA,CAAA;AAC9B,IAAA,gBAAA,CAAiB,WAAW,aAAc,CAAA,CAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EAAA,MAAM,kBAAkB,CAAW,OAAA,KAAA;AACjC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAa,EAAC,CAAA,CAAA;AACd,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,kBAAqB,GAAA,sBAAA;AAAA,MACzB,YAAA;AAAA,MACA,IAAA;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,qBAAwB,GAAA,yBAAA;AAAA,MAC5B,YAAA;AAAA,MACA,IAAA;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAI,IAAA,OAAA,IAAW,YAAa,CAAA,MAAA,GAAS,CAAG,EAAA;AACtC,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,IAAA,CAAA,CAAA;AACb,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,OAAA,IAAW,kBAAmB,CAAA,MAAA,GAAS,CAAG,EAAA;AAC5C,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,qBAAA,CAAsB,OAAO,YAAY,CAAA,CAAA,CAAA;AACtD,MAAA,OAAA;AAAA,KACF;AACA,IAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,YAAA,CAAa,OAAO,qBAAqB,CAAA,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,2CACG,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UACE,UACC,oBAAA,KAAA,CAAA,aAAA,CAAC,sCACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,OAAA,EAAS,eAAc,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,MAAA,CAAA;AAAA,IACrC,QAAU,EAAA,eAAA;AAAA,GACZ,CACF,CAED,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,EAAE,KAAA,EAAO,IAAM,EAAA,cAAA,GAAiB,YAAa,EAAA,qBACxD,KAAA,CAAA,aAAA,CAAA,EAAA,EAAA;AAAA,IAAG,GAAK,EAAA,KAAA;AAAA,GAAA,kBACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAA;AAAA,KACF;AAAA,GAEC,EAAA,KAAA,EACA,wBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,UAAA,EAAY,CAAE,EAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,GAAA,kBACtD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,IAAA,EAAM,CAAqB,kBAAA,EAAA,aAAA,CAAc,aAAa,CAAA,CAAA,CAAA;AAAA,IACtD,IAAM,EAAA,oBAAA;AAAA,IACN,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,GACvC,CACF,CACF,CAEJ,CACF,CACD,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}