flipper-ui 0.26.12 → 0.26.14

package/core/DataTable/DataTable.d.ts

@@ -51,6 +51,10 @@ export declare type DataTableProps<D extends Data, V extends StackView = Record<
      * A React MutableRefObject for the row controller
      */
     controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
+    /**
+     * Initialize with hidden values
+     */
+    hidden?: boolean;
     /**
      * Custom rowViews used as a Stac
      */

package/core/DataTable/DataTable.js

@@ -69,7 +69,8 @@ var DataTable = function DataTable(props) {
     componentForEmpty = props.componentForEmpty,
     bodyStyle = props.bodyStyle,
     headStyle = props.headStyle,
-    hiddenRowHeight = props.hiddenRowHeight;
+    hiddenRowHeight = props.hiddenRowHeight,
+    hidden = props.hidden;
   var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     newRow = _useState6[0],
@@ -84,7 +85,7 @@ var DataTable = function DataTable(props) {
     }
     return sliceData(data, page, rowsPerPage);
   }, [pagination.disabled, data, rowsPerPage, page, newRow]);
-  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
+  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, hidden, newRow),
     getRowState = _useRowsState.getRowState,
     setEditableRowState = _useRowsState.setEditableRowState,
     setRowState = _useRowsState.setRowState,
@@ -104,6 +105,12 @@ var DataTable = function DataTable(props) {
         });
         setNewRow(undefined);
       },
+      hideRow: function hideRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.Hide
+        });
+        setNewRow(undefined);
+      },
       addRow: function addRow(partial) {
         setPage(0);
         setNewRow(partial);
@@ -136,7 +143,8 @@ var DataTable = function DataTable(props) {
       var rowState = getRowState(row.id);
       var lastView = (rowState === null || rowState === void 0 ? void 0 : rowState.stackView) && (0, _last["default"])(rowState.stackView);
       var view = lastView && (rowViews === null || rowViews === void 0 ? void 0 : rowViews[lastView]);
-      var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || _types.RowMode.View;
+      var primaryView = hidden ? _types.RowMode.Hide : _types.RowMode.View;
+      var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || primaryView;
       return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
         key: row.id,
         "data-id": row.id,
@@ -151,10 +159,11 @@ var DataTable = function DataTable(props) {
         data: row,
         errors: errors,
         mode: mode,
+        isHidden: hidden,
         onUpdate: setEditableRowState(row.id)
       }));
     });
-  }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns]);
+  }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns, hidden]);
   var columnsList = (0, _react.useMemo)(function () {
     return columns.map(function (column) {
       return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {

package/core/DataTable/DataTableQueryPaginated.d.ts

@@ -71,6 +71,10 @@ export declare type DataTableProps<D extends Data, V extends StackView = Record<
      * A React MutableRefObject for the row controller
      */
     controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
+    /**
+     * Initialize with hidden values
+     */
+    hidden?: boolean;
     /**
      * Custom rowViews used as a Stac
      */

package/core/DataTable/DataTableQueryPaginated.js

@@ -61,7 +61,8 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
     componentForEmpty = props.componentForEmpty,
     bodyStyle = props.bodyStyle,
     headStyle = props.headStyle,
-    hiddenRowHeight = props.hiddenRowHeight;
+    hiddenRowHeight = props.hiddenRowHeight,
+    hidden = props.hidden;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     newRow = _useState2[0],
@@ -72,7 +73,7 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
     }
     return data;
   }, [pagination.disabled, data]);
-  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
+  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, hidden, newRow),
     getRowState = _useRowsState.getRowState,
     setEditableRowState = _useRowsState.setEditableRowState,
     setRowState = _useRowsState.setRowState,
@@ -92,6 +93,11 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
         });
         setNewRow(undefined);
       },
+      hideRow: function hideRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.Hide
+        });
+      },
       addRow: function addRow(partial) {
         handleChangePerPage(0);
         setNewRow(partial);

package/core/DataTable/Rows.d.ts

@@ -4,9 +4,10 @@ declare type StatefulRowProps<D extends Data> = {
     mode: RowMode;
     errors?: Errors<D>;
     columns: ColumnSpec<D>[];
+    isHidden?: boolean;
     onUpdate?(partial: Partial<Data>): void;
 };
-export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate }: StatefulRowProps<D>) => JSX.Element;
+export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate, isHidden }: StatefulRowProps<D>) => JSX.Element;
 declare type NewRowProps<D extends Data> = {
     data: PartialData<D>;
     errors?: Errors<D>;

package/core/DataTable/Rows.js

@@ -35,6 +35,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
   var hasError = errors === null || errors === void 0 ? void 0 : (_errors$row$id = errors[row.id]) === null || _errors$row$id === void 0 ? void 0 : _errors$row$id.has(column.field);
   if (column.renderCell) {
     var _value = row[column.field];
+    console.log('renderCell', _value);
     return column.renderCell({
       data: row,
       rowMode: _types.RowMode.Edit,
@@ -87,7 +88,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
     }
   });
 };
-var renderViewMode = function renderViewMode(column, row) {
+var renderHidenMode = function renderHidenMode(column, row) {
   var _column$getValue;
   if (column.type === 'actions') {
     return column.renderCell({
@@ -99,18 +100,38 @@ var renderViewMode = function renderViewMode(column, row) {
   if (column.renderCell) {
     return column.renderCell({
       data: row,
-      rowMode: _types.RowMode.View,
+      rowMode: _types.RowMode.Hide,
       value: rawValue
     });
   }
   return ((_column$getValue = column.getValue) === null || _column$getValue === void 0 ? void 0 : _column$getValue.call(column, rawValue)) || rawValue;
 };
+var renderViewMode = function renderViewMode(column, row) {
+  var _column$getValue2;
+  var isHidden = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (column.type === 'actions') {
+    return column.renderCell({
+      data: row,
+      rowMode: isHidden ? _types.RowMode.Hide : _types.RowMode.View
+    });
+  }
+  var rawValue = row[column.field];
+  if (column.renderCell) {
+    return column.renderCell({
+      data: row,
+      rowMode: _types.RowMode.View,
+      value: rawValue
+    });
+  }
+  return ((_column$getValue2 = column.getValue) === null || _column$getValue2 === void 0 ? void 0 : _column$getValue2.call(column, rawValue)) || rawValue;
+};
 var StatefulRow = function StatefulRow(_ref) {
   var data = _ref.data,
     mode = _ref.mode,
     errors = _ref.errors,
     columns = _ref.columns,
-    onUpdate = _ref.onUpdate;
+    onUpdate = _ref.onUpdate,
+    isHidden = _ref.isHidden;
   var _useState = (0, _react.useState)(function () {
       return data;
     }),
@@ -125,12 +146,21 @@ var StatefulRow = function StatefulRow(_ref) {
     patch[field] = value;
     onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(patch);
   }, []);
+  var getCorrectViewMode = function getCorrectViewMode(column, mode, isEditable) {
+    if (mode === _types.RowMode.Edit && isEditable) {
+      return renderEditMode(column, editableState, partialUpdate, errors);
+    }
+    if (mode === _types.RowMode.View) {
+      return renderViewMode(column, data, isHidden);
+    }
+    return renderHidenMode(column, data);
+  };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, columns.map(function (column) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
       align: column.align,
       key: column.title,
       style: column.cellStyle
-    }, mode === _types.RowMode.Edit && isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors) : renderViewMode(column, data));
+    }, getCorrectViewMode(column, mode, isEditable(column)));
   }));
 };
 exports.StatefulRow = StatefulRow;

package/core/DataTable/types.d.ts

@@ -60,8 +60,9 @@ export declare type RowAction<D> = {
     data: D;
 };
 export declare enum RowMode {
-    View = 0,
-    Edit = 1
+    Hide = 0,
+    View = 1,
+    Edit = 2
 }
 export declare type RowState<D extends Data, S extends StackView> = {
     mode: RowMode;
@@ -82,6 +83,10 @@ export declare type DataTableController<D extends Data, V extends StackView> = {
      * Actives the view mode for a row
      */
     viewRow(id: Identifier): void;
+    /**
+     * Hides the view mode for a row
+     */
+    hideRow(id: Identifier): void;
     /**
      * Adds a new row on the DataTable
      */

package/core/DataTable/types.js

@@ -7,6 +7,7 @@ exports.RowMode = void 0;
 var RowMode;
 exports.RowMode = RowMode;
 (function (RowMode) {
-  RowMode[RowMode["View"] = 0] = "View";
-  RowMode[RowMode["Edit"] = 1] = "Edit";
+  RowMode[RowMode["Hide"] = 0] = "Hide";
+  RowMode[RowMode["View"] = 1] = "View";
+  RowMode[RowMode["Edit"] = 2] = "Edit";
 })(RowMode || (exports.RowMode = RowMode = {}));

package/core/DataTable/useRowsState.d.ts

@@ -1,5 +1,5 @@
 import { Data, Identifier, RowState } from './types';
-export declare const useRowsState: <D extends Data, V extends Record<string, unknown>>(rows: D[], newRow?: Partial<D> | undefined) => {
+export declare const useRowsState: <D extends Data, V extends Record<string, unknown>>(rows: D[], isHidden?: boolean, newRow?: Partial<D> | undefined) => {
     getRowState: (id: Identifier) => RowState<D, V> | undefined;
     setEditableRowState: (id: Identifier) => (patch: Partial<D>) => void;
     setRowState: (id: Identifier, partial: Partial<RowState<D, V>>) => void;

package/core/DataTable/useRowsState.js

@@ -14,7 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-var useRowsState = function useRowsState(rows, newRow) {
+var useRowsState = function useRowsState(rows) {
+  var isHidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var newRow = arguments.length > 2 ? arguments[2] : undefined;
   var _useState = (0, _react.useState)(function () {
       return {
         internal: new Map()
@@ -38,7 +40,7 @@ var useRowsState = function useRowsState(rows, newRow) {
         } else {
           nextState.set(row.id, {
             editableState: {},
-            mode: _types.RowMode.View,
+            mode: isHidden ? _types.RowMode.Hide : _types.RowMode.View,
             stackView: [],
             currentState: row
           });

package/core/ExpansionPanel.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { PaperProps } from './Paper';
-interface ExpansionPanelProps extends PaperProps {
+import { HTMLElementWithDataCy } from './types';
+export interface ExpansionPanelProps extends PaperProps {
     actions?: ReactNode;
     defaultExpanded?: boolean;
     details?: ReactNode;
@@ -11,10 +12,16 @@ interface ExpansionPanelProps extends PaperProps {
     summaryStyle?: object;
     detailsStyle?: object;
     actionsStyle?: object;
+    editStyle?: React.CSSProperties;
+    headerProps?: HTMLElementWithDataCy<HTMLDivElement>;
     helperIcon?: React.ReactNode;
+    editable?: boolean;
+    editing?: boolean;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
+    onEditClick?: () => void;
+    onSaveClick?: () => void;
     onChange?: (event?: React.ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
 }
-declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, onHelperClick, helperIcon, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => JSX.Element;
+declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => JSX.Element;
 export default ExpansionPanel;

package/core/ExpansionPanel.js

@@ -16,7 +16,7 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _TextField = require("./TextField");
-var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "onHelperClick", "helperIcon", "helperButtonPosition"];
+var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
 var _templateObject;
 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; }
@@ -32,21 +32,59 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     summaryStyle = _ref.summaryStyle,
     detailsStyle = _ref.detailsStyle,
     actionsStyle = _ref.actionsStyle,
+    editStyle = _ref.editStyle,
     onHelperClick = _ref.onHelperClick,
+    onEditClick = _ref.onEditClick,
+    onSaveClick = _ref.onSaveClick,
     helperIcon = _ref.helperIcon,
+    editable = _ref.editable,
+    editing = _ref.editing,
+    headerProps = _ref.headerProps,
     _ref$helperButtonPosi = _ref.helperButtonPosition,
     helperButtonPosition = _ref$helperButtonPosi === void 0 ? 'right' : _ref$helperButtonPosi,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (editable) {
+    if (!onSaveClick) {
+      throw new Error('onSaveClick is required when editable is true');
+    }
+    if (!onEditClick) {
+      throw new Error('onEditClick is required when editable is true');
+    }
+  }
   var handleClick = function handleClick(event) {
     if (onHelperClick) {
       event.stopPropagation();
       onHelperClick();
     }
   };
+  var handleEditClick = function handleEditClick(event) {
+    if (onEditClick) {
+      event.stopPropagation();
+      onEditClick();
+    }
+  };
+  var handleSaveClick = function handleSaveClick(event) {
+    if (onSaveClick) {
+      event.stopPropagation();
+      onSaveClick();
+    }
+  };
   var renderHelper = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, onHelperClick && /*#__PURE__*/_react["default"].createElement(_TextField.HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));
+  var renderEdit = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, editable && /*#__PURE__*/_react["default"].createElement(_TextField.EditBox, {
+    editing: !!editing,
+    style: editStyle,
+    onEditClick: handleEditClick,
+    onSaveClick: handleSaveClick,
+    saveButtonProps: {
+      'data-cy': 'save-button'
+    },
+    editButtonProps: {
+      'data-cy': 'edit-button'
+    }
+  }));
   return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       margin: margin,
@@ -55,7 +93,7 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
   }), summary && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
     expandIcon: expandIcon,
     style: summaryStyle
-  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, null, helperButtonPosition === 'left' && renderHelper, summary, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
     style: detailsStyle
   }, details), actions && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelActions["default"], {
     style: actionsStyle

package/core/TextField.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps, HTMLElementWithDataCy } from './types';
 export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
@@ -26,6 +26,7 @@ export interface TextFieldProps extends DefaultProps {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    showEdit?: boolean;
     hasClear?: boolean;
     onClear?: () => void;
     onHelperClick?: () => void;
@@ -38,9 +39,17 @@ export interface TextFieldProps extends DefaultProps {
 interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
+interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
+    editing: boolean;
+    onEditClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onSaveClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    editButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
+    saveButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
+}
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
+export declare const EditBox: (props: IEditProps) => JSX.Element;
 declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps) => JSX.Element;
 export default TextField;

package/core/TextField.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.HelperBox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
@@ -16,6 +16,8 @@ var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
 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 _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"];
@@ -59,6 +61,24 @@ 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"
+    }));
+  }
+};
+exports.EditBox = EditBox;
 var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"

package/core/types.d.ts

@@ -8,3 +8,6 @@ export interface DefaultProps {
     name?: string;
     id?: string;
 }
+export interface HTMLElementWithDataCy<T> extends React.HTMLAttributes<T> {
+    'data-cy': string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.12",
+    "version": "0.26.14",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",

package/stories/DataTable.stories.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports.Crud = void 0;
+exports["default"] = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports.CrudWithHidden = exports.Crud = 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"));
@@ -21,6 +21,9 @@ var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
 var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
 var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
+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; }
@@ -684,4 +687,278 @@ var Crud = function Crud() {
     columns: columns
   }));
 };
-exports.Crud = Crud;
+exports.Crud = Crud;
+var CrudWithHidden = function CrudWithHidden() {
+  var controllerRef = (0, _react.useRef)();
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    errors = _useState6[0],
+    setErrors = _useState6[1];
+  var randomId = function randomId() {
+    return Math.random().toString(36).substr(0, 12);
+  };
+  var _useState7 = (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'
+    }]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    data = _useState8[0],
+    setData = _useState8[1];
+  var handleAdd = function handleAdd() {
+    var _controllerRef$curren9;
+    (_controllerRef$curren9 = controllerRef.current) === null || _controllerRef$curren9 === void 0 ? void 0 : _controllerRef$curren9.addRow({
+      id: randomId()
+    });
+  };
+  var handleEdit = function handleEdit(id) {
+    return function () {
+      var _controllerRef$curren10;
+      (_controllerRef$curren10 = controllerRef.current) === null || _controllerRef$curren10 === void 0 ? void 0 : _controllerRef$curren10.editRow(id);
+    };
+  };
+  var handleHide = function handleHide(id) {
+    return function () {
+      var _controllerRef$curren11;
+      (_controllerRef$curren11 = controllerRef.current) === null || _controllerRef$curren11 === void 0 ? void 0 : _controllerRef$curren11.hideRow(id);
+    };
+  };
+  var handleDelete = function handleDelete(id) {
+    return function () {
+      var _controllerRef$curren12;
+      (_controllerRef$curren12 = controllerRef.current) === null || _controllerRef$curren12 === void 0 ? void 0 : _controllerRef$curren12.pushRowView(id, 'confirmDelete');
+    };
+  };
+  var handleView = function handleView(id) {
+    return function () {
+      var _controllerRef$curren13;
+      (_controllerRef$curren13 = controllerRef.current) === null || _controllerRef$curren13 === void 0 ? void 0 : _controllerRef$curren13.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 (_ref6) {
+      var field = _ref6.field,
+        isErrorIf = _ref6.isErrorIf;
+      var value = nextItem[field];
+      if (isNullable(value)) {
+        if (isPartial) {
+          return false;
+        }
+        return true;
+      }
+      return isErrorIf.some(function (cond) {
+        return cond(value);
+      });
+    }).map(function (_ref7) {
+      var field = _ref7.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$curren14, _controllerRef$curren15;
+      var nextItem = (_controllerRef$curren14 = controllerRef.current) === null || _controllerRef$curren14 === void 0 ? void 0 : _controllerRef$curren14.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$curren15 = controllerRef.current) === null || _controllerRef$curren15 === void 0 ? void 0 : _controllerRef$curren15.viewRow(id);
+    };
+  };
+  var columns = [{
+    title: 'Name',
+    field: 'name',
+    type: 'text',
+    editable: true
+  }, {
+    title: 'Key',
+    field: 'key',
+    type: 'text',
+    editable: false,
+    renderCell: function renderCell(_ref8) {
+      var rowMode = _ref8.rowMode,
+        _ref8$isNew = _ref8.isNew,
+        isNew = _ref8$isNew === void 0 ? false : _ref8$isNew,
+        value = _ref8.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(_ref9) {
+      var rowMode = _ref9.rowMode,
+        _ref9$isNew = _ref9.isNew,
+        isNew = _ref9$isNew === void 0 ? false : _ref9$isNew,
+        value = _ref9.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(_ref10) {
+      var id = _ref10.data.id,
+        rowMode = _ref10.rowMode,
+        _ref10$isNew = _ref10.isNew,
+        isNew = _ref10$isNew === void 0 ? false : _ref10$isNew;
+      if (rowMode === _types.RowMode.View) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Show",
+          onClick: handleView(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Visibility["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Show",
+          onClick: handleHide(id)
+        }, /*#__PURE__*/_react["default"].createElement(_VisibilityOff["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Save",
+        onClick: handleSave(id, isNew)
+      }, /*#__PURE__*/_react["default"].createElement(_Save["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Cancel",
+        onClick: handleView(id)
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)));
+    }
+  }];
+  var rowViews = {
+    confirmDelete: function confirmDelete(_ref11) {
+      var data = _ref11.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.product, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CheckIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren16;
+          (_controllerRef$curren16 = controllerRef.current) === null || _controllerRef$curren16 === void 0 ? void 0 : _controllerRef$curren16.popRowView(data.id);
+          setData(function (dataList) {
+            return dataList.filter(function (item) {
+              return item.id !== data.id;
+            });
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CancelIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren17;
+          (_controllerRef$curren17 = controllerRef.current) === null || _controllerRef$curren17 === void 0 ? void 0 : _controllerRef$curren17.popRowView(data.id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleAdd
+  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    hidden: true,
+    data: data,
+    controllerRef: controllerRef,
+    errors: errors,
+    pagination: {
+      disabled: true
+    },
+    rowViews: rowViews,
+    columns: columns
+  }));
+};
+exports.CrudWithHidden = CrudWithHidden;

package/stories/ExpansionPanel.stories.js

@@ -4,19 +4,62 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Disabled = exports.Default = void 0;
+exports["default"] = exports.WithEditable = exports.Disabled = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _ExpansionPanel = _interopRequireDefault(require("../core/ExpansionPanel"));
 var _Typography = _interopRequireDefault(require("../core/Typography"));
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _Button = _interopRequireDefault(require("../core/Button"));
+var _TextField = _interopRequireDefault(require("../core/TextField"));
 var _default = {
   title: 'ExpansionPanel',
   component: _ExpansionPanel["default"]
 };
 exports["default"] = _default;
 var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], args);
+  var _React$useState = _react["default"].useState(args.editing),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    editing = _React$useState2[0],
+    setEditing = _React$useState2[1];
+  var _React$useState3 = _react["default"].useState(args.details),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    details = _React$useState4[0],
+    setDetails = _React$useState4[1];
+  var inputRef = _react["default"].useRef(null);
+  var handleEditClick = function handleEditClick() {
+    setEditing(true);
+  };
+  var handleSaveClick = function handleSaveClick() {
+    var _inputRef$current;
+    setDetails((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value);
+    setEditing(false);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      handleSaveClick();
+    }
+    if (event.key === 'Escape') {
+      setEditing(false);
+    }
+  };
+  var renderDetails = function renderDetails() {
+    if (editing) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        inputRef: inputRef,
+        onKeyDown: handleKeyDown
+      });
+    }
+    return details;
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, args, {
+    editing: editing,
+    onEditClick: handleEditClick,
+    onSaveClick: handleSaveClick,
+    details: renderDetails()
+  }));
 };
 var Default = Template.bind({});
 exports.Default = Default;
@@ -42,4 +85,12 @@ Disabled.args = {
   summary: 'Dormammu',
   details: 'I have come to bargain',
   expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
+};
+var WithEditable = Template.bind({});
+exports.WithEditable = WithEditable;
+WithEditable.args = {
+  editable: true,
+  summary: 'Editable Expansion Panel',
+  details: 'This is an editable expansion panel',
+  expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
 };