flipper-ui 0.27.2 → 0.28.0

package/core/{Tabs.d.ts → Tabs/index.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DefaultProps } from './types';
-interface TabsProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface TabsProps extends DefaultProps {
     centered?: boolean;
     value: string | number;
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
@@ -9,7 +9,7 @@ interface TabsProps extends DefaultProps {
     indicatorColor?: 'primary' | 'secondary';
     onChange?: (event: object, value: number) => void;
 }
-interface IClasses {
+export interface IClasses {
     classes?: {
         default: string;
         inherit: string;

package/core/{TextField.d.ts → TextField/index.d.ts}

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { DefaultProps, HTMLElementWithDataCy } from './types';
+import { DefaultProps, HTMLElementWithDataCy } from '../types';
 export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;

package/core/{TextField.js → TextField/index.js}

@@ -18,7 +18,7 @@ var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
 var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
 var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
-var _IconButton2 = _interopRequireDefault(require("./IconButton"));
+var _IconButton2 = _interopRequireDefault(require("../IconButton"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"];
 var _templateObject, _templateObject2, _templateObject3;
@@ -53,7 +53,9 @@ var useStyles = (0, _styles.makeStyles)({
 });
 exports.useStyles = useStyles;
 var HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Helper, {
+    role: "helper-box"
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_Help["default"], {
@@ -62,27 +64,26 @@ var HelperBox = function HelperBox(props) {
 };
 exports.HelperBox = HelperBox;
 var EditBox = function EditBox(props) {
-  if (props.editing) {
-    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
-      padding: "6px 2px",
-      onClick: props.onSaveClick
-    }), /*#__PURE__*/_react["default"].createElement(_Save["default"], {
-      fontSize: "small"
-    }));
-  } else {
-    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.editButtonProps, {
-      padding: "6px 2px",
-      onClick: props.onEditClick
-    }), /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
-      fontSize: "small"
-    }));
-  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: "edit-box"
+  }, props.editing ? /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
+    padding: "6px 2px",
+    onClick: props.onSaveClick
+  }), /*#__PURE__*/_react["default"].createElement(_Save["default"], {
+    fontSize: "small"
+  })) : /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.editButtonProps, {
+    padding: "6px 2px",
+    onClick: props.onEditClick
+  }), /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+    fontSize: "small"
+  })));
 };
 exports.EditBox = EditBox;
 var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    role: "clear-button",
     onClick: onClear,
     size: "small"
   }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
@@ -147,6 +148,9 @@ var TextField = function TextField(_ref) {
       }
     }, InputLabelProps),
     InputProps: _objectSpread({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      'data-testid': 'text-field',
       classes: {
         input: variant === 'outlined' ? classes.outlinedInput : '',
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''

package/core/{Tooltip.d.ts → Tooltip/index.d.ts}

@@ -1,6 +1,6 @@
 import React, { ReactElement, CSSProperties } from 'react';
-import { DefaultProps } from './types';
-interface TooltipProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface TooltipProps extends DefaultProps {
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
     title: React.ReactNode;
     withWrapper?: boolean;
@@ -8,7 +8,7 @@ interface TooltipProps extends DefaultProps {
     onClose?: () => void;
     onOpen?: () => void;
     open?: boolean;
-    children: ReactElement<{}>;
+    children: ReactElement<Record<string, unknown>>;
     enterDelay?: number;
 }
 declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: TooltipProps) => JSX.Element;

package/core/{Tree.d.ts → Tree/index.d.ts}

@@ -3,7 +3,7 @@ export interface INode {
     name: string;
     nodes?: INode[];
 }
-interface TreeProps {
+export interface TreeProps {
     nodes?: INode[];
 }
 declare const Tree: ({ nodes, ...otherProps }: TreeProps) => JSX.Element;

package/core/{Tree.js → Tree/index.js}

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _omit = _interopRequireDefault(require("ramda/es/omit"));
 var _react = _interopRequireDefault(require("react"));
-var _Node = _interopRequireDefault(require("./Node"));
+var _Node = _interopRequireDefault(require("../Node"));
 var _excluded = ["nodes"];
 var Tree = function Tree(_ref) {
   var _ref$nodes = _ref.nodes,

package/core/{Typography.d.ts → Typography/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../types';
 import { TypographyProps } from '@material-ui/core/Typography';
 declare const Typography: ({ children, margin, padding, style, variant, ...otherProps }: TypographyProps & DefaultProps) => JSX.Element;
 export default Typography;

package/core/{Zoom.d.ts → Zoom/index.d.ts}

@@ -1,12 +1,12 @@
 import React from 'react';
-import { DefaultProps } from './types';
-interface ZoomProps extends DefaultProps {
+import { DefaultProps } from '../types';
+export interface ZoomProps extends DefaultProps {
     in: boolean;
     timeout?: number | {
         enter?: number;
         exit?: number;
     };
-    children?: React.ReactElement<{}>;
+    children?: React.ReactElement<Record<string, unknown>>;
 }
 declare const Zoom: ({ children, padding, margin, style, ...otherProps }: ZoomProps) => JSX.Element;
 export default Zoom;

package/index.d.ts

@@ -46,10 +46,10 @@ export { default as Stepper } from './core/Stepper';
 export { default as StylesProvider } from './core/StylesProvider';
 export { default as Tab } from './core/Tab';
 export { default as Table } from './core/Table';
-export { default as TableBody } from './core/TableBody';
-export { default as TableCell } from './core/TableCell';
-export { default as TableHead } from './core/TableHead';
-export { default as TableRow } from './core/TableRow';
+export { default as TableBody } from './core/Table/TableBody';
+export { default as TableCell } from './core/Table/TableCell';
+export { default as TableHead } from './core/Table/TableHead';
+export { default as TableRow } from './core/Table/TableRow';
 export { default as Tabs } from './core/Tabs';
 export { default as TextField } from './core/TextField';
 export { default as ThemeProvider } from './core/ThemeProvider';
@@ -61,6 +61,6 @@ export { default as PinInput } from './core/PinInput';
 export { default as Chapter } from './core/Chapter';
 export { default as DataTable } from './core/DataTable';
 export { default as StepCard } from './core/StepCard';
-export { default as StepCardSkeleton } from './core/StepCardSkeleton';
+export { default as StepCardSkeleton } from './core/StepCard/StepCardSkeleton';
 export * as Experimental from './Experimental';
 export * as Icons from './icons';

package/index.js

@@ -439,10 +439,10 @@ var _Stepper = _interopRequireDefault(require("./core/Stepper"));
 var _StylesProvider = _interopRequireDefault(require("./core/StylesProvider"));
 var _Tab = _interopRequireDefault(require("./core/Tab"));
 var _Table = _interopRequireDefault(require("./core/Table"));
-var _TableBody = _interopRequireDefault(require("./core/TableBody"));
-var _TableCell = _interopRequireDefault(require("./core/TableCell"));
-var _TableHead = _interopRequireDefault(require("./core/TableHead"));
-var _TableRow = _interopRequireDefault(require("./core/TableRow"));
+var _TableBody = _interopRequireDefault(require("./core/Table/TableBody"));
+var _TableCell = _interopRequireDefault(require("./core/Table/TableCell"));
+var _TableHead = _interopRequireDefault(require("./core/Table/TableHead"));
+var _TableRow = _interopRequireDefault(require("./core/Table/TableRow"));
 var _Tabs = _interopRequireDefault(require("./core/Tabs"));
 var _TextField = _interopRequireDefault(require("./core/TextField"));
 var _ThemeProvider = _interopRequireDefault(require("./core/ThemeProvider"));
@@ -454,7 +454,7 @@ var _PinInput = _interopRequireDefault(require("./core/PinInput"));
 var _Chapter = _interopRequireDefault(require("./core/Chapter"));
 var _DataTable = _interopRequireDefault(require("./core/DataTable"));
 var _StepCard = _interopRequireDefault(require("./core/StepCard"));
-var _StepCardSkeleton = _interopRequireDefault(require("./core/StepCardSkeleton"));
+var _StepCardSkeleton = _interopRequireDefault(require("./core/StepCard/StepCardSkeleton"));
 var _Experimental = _interopRequireWildcard(require("./Experimental"));
 exports.Experimental = _Experimental;
 var _Icons = _interopRequireWildcard(require("./icons"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.27.2",
+    "version": "0.28.0",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -25,9 +25,7 @@
         "docs:build": "build-storybook -o docs",
         "type-check": "tsc --noEmit",
         "deploy": "gh-pages -d docs",
-        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public",
-        "cy:run": "cypress run --component",
-        "cy:open": "cypress open --component"
+        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public"
     },
     "author": "NG Informática",
     "license": "MIT",
@@ -55,18 +53,14 @@
         "@babel/preset-env": "7.20.2",
         "@babel/preset-react": "7.18.6",
         "@babel/preset-typescript": "7.18.6",
-        "@cypress/code-coverage": "3.10.0",
-        "@cypress/react": "6.2.0",
         "@storybook/addon-actions": "6.5.13",
         "@storybook/addon-essentials": "6.5.13",
         "@storybook/addon-links": "6.5.13",
         "@storybook/builder-webpack5": "6.5.13",
         "@storybook/manager-webpack5": "6.5.13",
         "@storybook/react": "6.5.13",
-        "@testing-library/cypress": "8.0.3",
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.4.3",
-        "@types/cypress-cucumber-preprocessor": "4.0.1",
         "@types/faker": "5.5.3",
         "@types/history": "4.7.11",
         "@types/jest": "29.5.0",
@@ -84,15 +78,9 @@
         "babel-plugin-transform-class-properties": "6.24.1",
         "babel-plugin-transform-imports": "2.0.0",
         "canvas": "2.11.2",
-        "cypress": "12.0.2",
-        "cypress-cucumber-preprocessor": "4.3.1",
-        "cypress-plugin-tab": "1.0.5",
-        "cypress-real-events": "1.7.4",
-        "cypress-wait-until": "1.7.2",
         "date-fns": "2.4.1",
         "eslint": "8.28.0",
         "eslint-config-prettier": "8.5.0",
-        "eslint-plugin-cypress": "2.12.1",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-prettier": "4.2.1",
@@ -115,7 +103,7 @@
         "styled-components": "5.0.0",
         "ts-jest": "29.1.0",
         "ts-loader": "9.4.2",
-        "typescript": "^4.3.0",
+        "typescript": "4.9.5",
         "webpack": "5"
     },
     "peerDependencies": {
@@ -128,9 +116,5 @@
             "!dist/",
             "!/node_modules/"
         ]
-    },
-    "cypress-cucumber-preprocessor": {
-        "nonGlobalStepDefinitions": true,
-        "moduleResolution": "node"
     }
 }

package/test/mocks/data-table-hidden-mock.d.ts

@@ -0,0 +1,2 @@
+declare const Default: () => JSX.Element;
+export default Default;

package/test/mocks/data-table-hidden-mock.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _Button = _interopRequireDefault(require("@/core/Button"));
+var _DataTable = require("@/core/DataTable");
+var _DataTable2 = _interopRequireDefault(require("@/core/DataTable/DataTable"));
+var _types = require("@/core/DataTable/types");
+var _Typography = _interopRequireDefault(require("@/core/Typography"));
+var _icons = require("@/icons");
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Default = function Default() {
+  var controllerRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    errors = _useState2[0],
+    setErrors = _useState2[1];
+  var randomId = function randomId() {
+    return Math.random().toString(36).substr(0, 12);
+  };
+  var _useState3 = (0, _react.useState)([{
+      id: 1,
+      name: 'PowerBI',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }, {
+      id: 2,
+      name: 'External API',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }, {
+      id: 3,
+      name: 'Sass',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var handleAdd = function handleAdd() {
+    var _controllerRef$curren;
+    (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 ? void 0 : _controllerRef$curren.addRow({
+      id: randomId()
+    });
+  };
+  var handleEdit = function handleEdit(id) {
+    return function () {
+      var _controllerRef$curren2;
+      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 ? void 0 : _controllerRef$curren2.editRow(id);
+    };
+  };
+  var handleHide = function handleHide(id) {
+    return function () {
+      var _controllerRef$curren3;
+      (_controllerRef$curren3 = controllerRef.current) === null || _controllerRef$curren3 === void 0 ? void 0 : _controllerRef$curren3.hideRow(id);
+    };
+  };
+  var handleDelete = function handleDelete(id) {
+    return function () {
+      var _controllerRef$curren4;
+      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === void 0 ? void 0 : _controllerRef$curren4.pushRowView(id, 'confirmDelete');
+    };
+  };
+  var handleView = function handleView(id) {
+    return function () {
+      var _controllerRef$curren5;
+      (_controllerRef$curren5 = controllerRef.current) === null || _controllerRef$curren5 === void 0 ? void 0 : _controllerRef$curren5.viewRow(id);
+    };
+  };
+  var isNullable = function isNullable(x) {
+    return x == null;
+  };
+  var isEmpty = function isEmpty(x) {
+    return x.trim().length === 0;
+  };
+  var handleErrors = function handleErrors(id) {
+    var nextItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isPartial = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var errorFields = [{
+      field: 'name',
+      isErrorIf: [isEmpty]
+    }].filter(function (_ref) {
+      var field = _ref.field,
+        isErrorIf = _ref.isErrorIf;
+      // @ts-ignore
+      var value = nextItem[field];
+      if (isNullable(value)) {
+        if (isPartial) {
+          return false;
+        }
+        return true;
+      }
+      return isErrorIf.some(function (cond) {
+        return cond(value);
+      });
+    }).map(function (_ref2) {
+      var field = _ref2.field;
+      return field;
+    });
+    setErrors(function (errors) {
+      return _objectSpread(_objectSpread({}, errors), {}, (0, _defineProperty2["default"])({}, id, new Set(errorFields)));
+    });
+    return errorFields.length > 0;
+  };
+  var handleSave = function handleSave(id) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return function () {
+      var _controllerRef$curren6, _controllerRef$curren7;
+      var nextItem = (_controllerRef$curren6 = controllerRef.current) === null || _controllerRef$curren6 === void 0 ? void 0 : _controllerRef$curren6.getEditedRowData(id);
+      if (!nextItem) {
+        return;
+      }
+      if (handleErrors(id, nextItem, !isNew)) {
+        return;
+      }
+      if (isNew) {
+        setData(function (data) {
+          return [_objectSpread(_objectSpread({}, nextItem), {}, {
+            key: (0, _uuid.v4)(),
+            secret: (0, _uuid.v4)()
+          })].concat((0, _toConsumableArray2["default"])(data));
+        });
+      } else {
+        setData(function (data) {
+          return data.map(function (item) {
+            if (item.id === id) {
+              return _objectSpread(_objectSpread({}, item), nextItem);
+            }
+            return item;
+          });
+        });
+      }
+      (_controllerRef$curren7 = controllerRef.current) === null || _controllerRef$curren7 === void 0 ? void 0 : _controllerRef$curren7.viewRow(id);
+    };
+  };
+  var columns = [{
+    title: 'Name',
+    field: 'name',
+    type: 'text',
+    editable: true
+  }, {
+    title: 'Key',
+    field: 'key',
+    type: 'text',
+    editable: false,
+    renderCell: function renderCell(_ref3) {
+      var rowMode = _ref3.rowMode,
+        _ref3$isNew = _ref3.isNew,
+        isNew = _ref3$isNew === void 0 ? false : _ref3$isNew,
+        value = _ref3.value;
+      if (isNew) {
+        return null;
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
+      }
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
+    }
+  }, {
+    title: 'Secret',
+    field: 'secret',
+    type: 'text',
+    editable: false,
+    renderCell: function renderCell(_ref4) {
+      var rowMode = _ref4.rowMode,
+        _ref4$isNew = _ref4.isNew,
+        isNew = _ref4$isNew === void 0 ? false : _ref4$isNew,
+        value = _ref4.value;
+      if (isNew) {
+        return null;
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
+      }
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
+    }
+  }, {
+    title: 'Actions',
+    type: 'actions',
+    align: 'center',
+    cellStyle: {
+      width: '60px'
+    },
+    renderCell: function renderCell(_ref5) {
+      var id = _ref5.data.id,
+        rowMode = _ref5.rowMode,
+        _ref5$isNew = _ref5.isNew,
+        isNew = _ref5$isNew === void 0 ? false : _ref5$isNew;
+      if (rowMode === _types.RowMode.View) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Show",
+          onClick: handleView(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Visibility, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Edit, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Delete, null)));
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Show",
+          onClick: handleHide(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.VisibilityOff, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Edit, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Delete, null)));
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "Save",
+        onClick: handleSave(id, isNew)
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Save, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "Cancel",
+        onClick: handleView(id)
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Cancel, null)));
+    }
+  }];
+  var rowViews = {
+    confirmDelete: function confirmDelete(_ref6) {
+      var data = _ref6.data;
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        colSpan: 5
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          padding: '16px',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Confirm Delete \"", data.name, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "CheckIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren8;
+          (_controllerRef$curren8 = controllerRef.current) === null || _controllerRef$curren8 === void 0 ? void 0 : _controllerRef$curren8.popRowView(data.id);
+          setData(function (dataList) {
+            return dataList.filter(function (item) {
+              return item.id !== data.id;
+            });
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "CancelIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren9;
+          (_controllerRef$curren9 = controllerRef.current) === null || _controllerRef$curren9 === void 0 ? void 0 : _controllerRef$curren9.popRowView(data.id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Cancel, null)))));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleAdd
+  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTable2["default"], {
+    hidden: true,
+    data: data,
+    controllerRef: controllerRef,
+    errors: errors,
+    pagination: {
+      disabled: true
+    },
+    rowViews: rowViews,
+    columns: columns
+  }));
+};
+var _default = Default;
+exports["default"] = _default;

package/test/mocks/data-table-mock.d.ts

@@ -0,0 +1,2 @@
+declare const Default: () => JSX.Element;
+export default Default;