flipper-ui 0.34.1 → 0.34.3

package/core/data-display/table/table-footer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DefaultProps } from '../../types';
+import type { TableFooterProps } from '@mui/material/TableFooter';
+export interface ITableFooterProps extends DefaultProps, TableFooterProps {
+}
+declare const TableFooter: ({ style, margin, padding, children }: ITableFooterProps) => React.JSX.Element;
+export default TableFooter;

package/core/data-display/table/table-footer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
+var _theme = require("../../../theme");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var grays = _theme.theme.colors.grays;
+var TableFooter = function TableFooter(_ref) {
+  var style = _ref.style,
+    margin = _ref.margin,
+    padding = _ref.padding,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], {
+    style: _objectSpread({
+      borderColor: grays.g7,
+      margin: margin,
+      padding: padding
+    }, style)
+  }, children);
+};
+var _default = exports["default"] = TableFooter;

package/core/data-display/table/table-pagination.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ChangeEvent, CSSProperties, MouseEvent } from 'react';
+import type { TablePaginationProps } from '@mui/material/TablePagination';
+interface ITablePaginationProps extends Omit<TablePaginationProps, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange'> {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    rowsPerPageOptions?: number[];
+    onPageChange: (event: MouseEvent<HTMLButtonElement> | null, page: number) => void;
+    onRowsPerPageChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    style?: CSSProperties;
+}
+declare const TablePagination: ({ count, page, rowsPerPage, rowsPerPageOptions, onPageChange, onRowsPerPageChange, style, padding, ...props }: ITablePaginationProps) => React.JSX.Element;
+export default TablePagination;

package/core/data-display/table/table-pagination.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
+var _theme = require("../../../theme");
+var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "style", "padding"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var grays = _theme.theme.colors.grays;
+var TablePagination = function TablePagination(_ref) {
+  var count = _ref.count,
+    page = _ref.page,
+    rowsPerPage = _ref.rowsPerPage,
+    rowsPerPageOptions = _ref.rowsPerPageOptions,
+    onPageChange = _ref.onPageChange,
+    onRowsPerPageChange = _ref.onRowsPerPageChange,
+    style = _ref.style,
+    padding = _ref.padding,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_TablePagination["default"], (0, _extends2["default"])({
+    count: count,
+    page: page,
+    rowsPerPage: rowsPerPage,
+    rowsPerPageOptions: rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 25],
+    labelRowsPerPage: "Linhas por p\xE1gina:",
+    labelDisplayedRows: function labelDisplayedRows(_ref2) {
+      var from = _ref2.from,
+        to = _ref2.to,
+        count = _ref2.count;
+      return "".concat(from, "-").concat(to, " de ").concat(count !== -1 ? count : "mais que ".concat(to));
+    },
+    style: _objectSpread({
+      borderColor: grays.g7,
+      padding: padding
+    }, style),
+    sx: {
+      borderBottom: "1px solid ".concat(grays.g7, " !important;")
+    },
+    onPageChange: onPageChange,
+    onRowsPerPageChange: onRowsPerPageChange
+  }, props));
+};
+var _default = exports["default"] = TablePagination;

package/core/feedback/dialog/index.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
@@ -18,6 +19,11 @@ var _styles = require("./styles");
 var _excluded = ["snippet", "style", "padding", "margin", "scroll", "PaperProps", "open", "fullScreen", "fullWidth", "maxWidth", "onClose", "titleAction", "titleWrapperStyle", "titleStyle", "titleActionStyle", "contentStyle", "contentTextStyle", "actionsStyle", "actions", "content", "text", "title", "snippetStyle", "snippetContentStyle", "aria-title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useStyles = (0, _makeStyles2["default"])({
+  root: {
+    overflowY: 'unset'
+  }
+});
 var Dialog = function Dialog(_ref) {
   var snippet = _ref.snippet,
     style = _ref.style,
@@ -45,6 +51,7 @@ var Dialog = function Dialog(_ref) {
     snippetContentStyle = _ref.snippetContentStyle,
     ariaTitle = _ref['aria-title'],
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = useStyles();
   var renderTitle = function renderTitle(title) {
     return titleAction ? /*#__PURE__*/_react["default"].createElement(_styles.TitleWrapper, {
       style: titleWrapperStyle
@@ -61,7 +68,11 @@ var Dialog = function Dialog(_ref) {
   var renderContent = function renderContent(content) {
     return /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
       style: contentStyle
-    }, content);
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '8px 0px 0px'
+      }
+    }, content));
   };
   var renderText = function renderText(text) {
     var content = /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
@@ -80,9 +91,9 @@ var Dialog = function Dialog(_ref) {
   var renderSnippet = function renderSnippet() {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Snippet, {
       style: snippetStyle
-    }, /*#__PURE__*/_react["default"].createElement(_styles.SnippetContent, {
+    }, /*#__PURE__*/_react["default"].createElement(_styles.PaperContent, null, renderPaperContent()), /*#__PURE__*/_react["default"].createElement(_styles.SnippetContent, {
       style: snippetContentStyle
-    }, snippet)), /*#__PURE__*/_react["default"].createElement(_styles.PaperContent, null, renderPaperContent()));
+    }, snippet)));
   };
   return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({}, otherProps, {
     open: open,
@@ -96,7 +107,11 @@ var Dialog = function Dialog(_ref) {
     }, style),
     PaperProps: _objectSpread(_objectSpread({}, ariaTitle ? {
       title: ariaTitle
-    } : {}), PaperProps),
+    } : {}), {}, {
+      classes: {
+        root: classes.root
+      }
+    }, PaperProps),
     onClose: onClose
   }), snippet ? renderSnippet() : renderPaperContent());
 };

package/core/feedback/dialog/styles.js

@@ -11,5 +11,5 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var PaperContent = exports.PaperContent = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 var TitleWrapper = exports.TitleWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
 var TitleAction = exports.TitleAction = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 16px 24px;\n    align-items: center;\n    display: flex;\n"])));
-var Snippet = exports.Snippet = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n    padding: 6px 6px 0px 0px;\n"])));
+var Snippet = exports.Snippet = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n"])));
 var SnippetContent = exports.SnippetContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: inherit;\n    display: flex;\n"])));

package/core/inputs/date-time/index.d.ts

@@ -12,5 +12,5 @@ export interface IProps {
     fullWidth?: boolean;
 }
 export type TDateTime = DatePickerProps<Date> & TimePickerProps<Date> & DateTimePickerProps<Date> & IProps & DefaultProps;
-declare const DateTime: ({ padding, margin, style, value, onChange, error, minDate, minDateTime, maxDate, maxDateTime, required, disabled, placeholder, fullWidth, type, ...otherProps }: TDateTime) => React.JSX.Element;
+declare const DateTime: ({ id, padding, margin, style, value, onChange, error, minDate, minDateTime, maxDate, maxDateTime, required, disabled, placeholder, fullWidth, type, ...otherProps }: TDateTime) => React.JSX.Element;
 export default DateTime;

package/core/inputs/date-time/index.js

@@ -20,7 +20,7 @@ var _format = _interopRequireDefault(require("date-fns/format"));
 var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR"));
 var _styles = require("./styles");
 var _theme = require("../../../theme");
-var _excluded = ["padding", "margin", "style", "value", "onChange", "error", "minDate", "minDateTime", "maxDate", "maxDateTime", "required", "disabled", "placeholder", "fullWidth", "type"];
+var _excluded = ["id", "padding", "margin", "style", "value", "onChange", "error", "minDate", "minDateTime", "maxDate", "maxDateTime", "required", "disabled", "placeholder", "fullWidth", "type"];
 /* eslint-disable import/no-duplicates */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -137,7 +137,8 @@ var CustomStaticDateTimePicker = function CustomStaticDateTimePicker(props) {
   }));
 };
 var DateTime = function DateTime(_ref) {
-  var padding = _ref.padding,
+  var id = _ref.id,
+    padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
     value = _ref.value,
@@ -183,6 +184,7 @@ var DateTime = function DateTime(_ref) {
         },
         slotProps: {
           textField: {
+            id: id,
             size: 'small',
             error: error,
             required: required,
@@ -229,6 +231,7 @@ var DateTime = function DateTime(_ref) {
         },
         slotProps: {
           textField: {
+            id: id,
             size: 'small',
             error: error,
             required: required,
@@ -281,6 +284,7 @@ var DateTime = function DateTime(_ref) {
       },
       slotProps: {
         textField: {
+          id: id,
           size: 'small',
           error: error,
           required: required,

package/index.d.ts

@@ -20,6 +20,8 @@ export { default as TableBody } from './core/data-display/table/table-body';
 export { default as TableCell } from './core/data-display/table/table-cell';
 export { default as TableHead } from './core/data-display/table/table-head';
 export { default as TableRow } from './core/data-display/table/table-row';
+export { default as TableFooter } from './core/data-display/table/table-footer';
+export { default as TablePagination } from './core/data-display/table/table-pagination';
 export { default as Typography } from './core/data-display/typography';
 export { default as Collapse } from './core/feedback/collapse';
 export { default as Dialog } from './core/feedback/dialog';

package/index.js

@@ -24,6 +24,8 @@ var _exportNames = {
   TableCell: true,
   TableHead: true,
   TableRow: true,
+  TableFooter: true,
+  TablePagination: true,
   Typography: true,
   Collapse: true,
   Dialog: true,
@@ -377,12 +379,24 @@ Object.defineProperty(exports, "TableCell", {
     return _tableCell["default"];
   }
 });
+Object.defineProperty(exports, "TableFooter", {
+  enumerable: true,
+  get: function get() {
+    return _tableFooter["default"];
+  }
+});
 Object.defineProperty(exports, "TableHead", {
   enumerable: true,
   get: function get() {
     return _tableHead["default"];
   }
 });
+Object.defineProperty(exports, "TablePagination", {
+  enumerable: true,
+  get: function get() {
+    return _tablePagination["default"];
+  }
+});
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function get() {
@@ -474,6 +488,8 @@ var _tableBody = _interopRequireDefault(require("./core/data-display/table/table
 var _tableCell = _interopRequireDefault(require("./core/data-display/table/table-cell"));
 var _tableHead = _interopRequireDefault(require("./core/data-display/table/table-head"));
 var _tableRow = _interopRequireDefault(require("./core/data-display/table/table-row"));
+var _tableFooter = _interopRequireDefault(require("./core/data-display/table/table-footer"));
+var _tablePagination = _interopRequireDefault(require("./core/data-display/table/table-pagination"));
 var _typography = _interopRequireDefault(require("./core/data-display/typography"));
 var _collapse = _interopRequireDefault(require("./core/feedback/collapse"));
 var _dialog = _interopRequireDefault(require("./core/feedback/dialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.1",
+    "version": "0.34.3",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -30,15 +30,15 @@
         "publish:yalc": "cd dist/ && yalc publish && cd ..",
         "release": "yarn build && node pre-publish.js && npm publish ./dist --access public",
         "test:ci": "yarn test --coverage",
-        "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand"
+        "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand --updateSnapshot"
     },
     "dependencies": {
-        "@emotion/react": "11.11.4",
-        "@emotion/styled": "11.11.5",
-        "@mui/icons-material": "5.15.21",
-        "@mui/material": "5.15.21",
-        "@mui/styles": "5.15.21",
-        "@mui/x-date-pickers": "7.8.0",
+        "@emotion/react": "11.13.0",
+        "@emotion/styled": "11.13.0",
+        "@mui/icons-material": "5.16.5",
+        "@mui/material": "5.16.5",
+        "@mui/styles": "5.16.5",
+        "@mui/x-date-pickers": "7.11.1",
         "date-fns": "2.30.0",
         "ramda": "0.25.0",
         "react-loading-skeleton": "3.4.0",
@@ -47,29 +47,29 @@
         "uuid": "10.0.0"
     },
     "devDependencies": {
-        "@babel/cli": "7.24.7",
-        "@babel/core": "7.24.7",
+        "@babel/cli": "7.24.8",
+        "@babel/core": "7.24.9",
         "@babel/plugin-transform-runtime": "7.24.7",
-        "@babel/preset-env": "7.24.7",
+        "@babel/preset-env": "7.25.0",
         "@babel/preset-typescript": "7.24.7",
         "@faker-js/faker": "8.4.1",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-styling-webpack": "1.0.0",
         "@storybook/react": "7.6.17",
         "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.3.0",
-        "@testing-library/dom": "10.3.0",
-        "@testing-library/jest-dom": "6.4.6",
+        "@stylistic/eslint-plugin": "2.4.0",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.4.8",
         "@testing-library/react": "16.0.0",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.12",
-        "@types/node": "20.14.9",
+        "@types/node": "22.0.0",
         "@types/ramda": "0.25.36",
         "@types/react": "18.3.3",
         "@types/sprintf-js": "1.1.4",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "7.15.0",
-        "@typescript-eslint/parser": "7.15.0",
+        "@typescript-eslint/eslint-plugin": "7.18.0",
+        "@typescript-eslint/parser": "7.18.0",
         "babel-loader": "9.1.3",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -77,22 +77,22 @@
         "eslint-config-prettier": "9.1.0",
         "eslint-import-resolver-typescript": "3.6.1",
         "eslint-plugin-import": "2.29.1",
-        "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-react": "7.34.3",
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-react": "7.35.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "7.6.17",
-        "styled-components": "6.1.11",
-        "ts-jest": "29.1.5",
+        "styled-components": "6.1.12",
+        "ts-jest": "29.2.3",
         "ts-loader": "9.5.1",
-        "typescript": "5.5.3",
-        "webpack": "5.92.1"
+        "typescript": "5.5.4",
+        "webpack": "5.93.0"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",