flipper-ui 0.36.0 → 0.36.1

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

@@ -29,9 +29,7 @@ var TableCell = function TableCell(_ref) {
     active = _useContext.active,
     direction = _useContext.direction;
   var handleSort = function handleSort() {
-    if (onSort) {
-      onSort(otherProps.name || '');
-    }
+    onSort === null || onSort === void 0 || onSort(otherProps.name || '');
   };
   return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({

package/core/data-display/table-interactive/TableDialogPreferences.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export type ITableDialogPreferences = Pick<ITableInteractive, 'open' | 'headers' | 'columnsTemporary' | 'onCancel' | 'onConfirm' | 'setColumnsTemporary'>;
+export declare const TableDialogPreferences: ({ open, headers, columnsTemporary, onCancel, onConfirm, setColumnsTemporary }: ITableDialogPreferences) => React.JSX.Element;

package/core/data-display/table-interactive/TableDialogPreferences.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableDialogPreferences = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _dialog = _interopRequireDefault(require("../../feedback/dialog"));
+var _actions = _interopRequireDefault(require("../actions"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _styles = require("./styles");
+var TableDialogPreferences = exports.TableDialogPreferences = function TableDialogPreferences(_ref) {
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    headers = _ref.headers,
+    _ref$columnsTemporary = _ref.columnsTemporary,
+    columnsTemporary = _ref$columnsTemporary === void 0 ? [] : _ref$columnsTemporary,
+    onCancel = _ref.onCancel,
+    onConfirm = _ref.onConfirm,
+    setColumnsTemporary = _ref.setColumnsTemporary;
+  var handleChangeTemporaryColumns = function handleChangeTemporaryColumns(name) {
+    setColumnsTemporary === null || setColumnsTemporary === void 0 || setColumnsTemporary(function (prev) {
+      return prev.includes(name) ? prev.filter(function (col) {
+        return col !== name;
+      }) : [].concat((0, _toConsumableArray2["default"])(prev), [name]);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
+    fullWidth: true,
+    open: open,
+    maxWidth: "sm",
+    title: "Prefer\xEAncias",
+    content: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "body1",
+      fontWeight: 500,
+      margin: "0 0 16px 0"
+    }, "Selecione o conte\xFAdo a ser exibido"), headers.map(function (it) {
+      return /*#__PURE__*/_react["default"].createElement(_styles.ContentWrapper, {
+        key: it.name
+      }, /*#__PURE__*/_react["default"].createElement(_typography["default"], null, it.label), /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        color: "primary",
+        name: it.name,
+        slotProps: {
+          input: {
+            'aria-label': it.label
+          }
+        },
+        checked: columnsTemporary.includes(it.name),
+        onChange: function onChange() {
+          return handleChangeTemporaryColumns(it.name);
+        }
+      }));
+    })),
+    actions: /*#__PURE__*/_react["default"].createElement(_actions["default"], {
+      margin: "0 16px 16px 16px",
+      onCancel: onCancel,
+      onConfirm: onConfirm !== null && onConfirm !== void 0 ? onConfirm : function () {}
+    })
+  });
+};

package/core/data-display/table-interactive/TableInteractive.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+export declare enum Direction {
+    ASCENDENT = "asc",
+    DESCENDENT = "desc"
+}
+export interface ITableInteractive {
+    name: string;
+    page?: number;
+    open?: boolean;
+    total?: number;
+    active?: string;
+    headers: {
+        name: string;
+        label: string;
+    }[];
+    paginated?: boolean;
+    rowsPerPage?: number;
+    direction?: Direction;
+    isInteractive?: boolean;
+    isCollapsible?: boolean;
+    visibleColumns?: string[];
+    columnsTemporary?: string[];
+    valuesInvoices?: Record<string, unknown>[];
+    headerActions?: React.JSX.Element | undefined;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    handleOpen?: () => void;
+    onSort?(id: string): void;
+    setPage?: Dispatch<SetStateAction<number>>;
+    setRowsPerPage?: Dispatch<SetStateAction<number>>;
+    children?: (item: Record<string, unknown>) => ReactNode;
+    setColumnsTemporary?: (value: SetStateAction<string[]>) => void;
+    rowsContent: () => React.JSX.Element | React.JSX.Element[] | undefined;
+}
+export declare const TableInteractive: (props: ITableInteractive) => React.JSX.Element;

package/core/data-display/table-interactive/TableInteractive.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractive = exports.Direction = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _table = _interopRequireDefault(require("../table"));
+var _tableBody = _interopRequireDefault(require("../table/table-body"));
+var _tableFooter = _interopRequireDefault(require("../table/table-footer"));
+var _tablePagination = _interopRequireDefault(require("../table/table-pagination"));
+var _tableRow = _interopRequireDefault(require("../table/table-row"));
+var _TableDialogPreferences = require("./TableDialogPreferences");
+var _TableInteractiveHead = require("./TableInteractiveHead");
+var _TableInteractiveHeader = require("./TableInteractiveHeader");
+var _TablePaginationActions = require("./TablePaginationActions");
+var Direction = exports.Direction = /*#__PURE__*/function (Direction) {
+  Direction["ASCENDENT"] = "asc";
+  Direction["DESCENDENT"] = "desc";
+  return Direction;
+}({});
+var TableInteractive = exports.TableInteractive = function TableInteractive(props) {
+  var _props$rowsPerPage, _props$page, _props$rowsPerPage2;
+  var handlePageCount = function handlePageCount() {
+    if (props.valuesInvoices) {
+      return Number(props.valuesInvoices.length);
+    }
+    return Number(props.total) || 0;
+  };
+  var count = handlePageCount();
+  var rowsPerPage = (_props$rowsPerPage = props.rowsPerPage) !== null && _props$rowsPerPage !== void 0 ? _props$rowsPerPage : 10;
+  var maxPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
+  var page = Math.min((_props$page = props.page) !== null && _props$page !== void 0 ? _props$page : 0, maxPage);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.isInteractive && /*#__PURE__*/_react["default"].createElement(_TableInteractiveHeader.TableInteractiveHeader, {
+    headerActions: props.headerActions,
+    handleOpen: props.handleOpen
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      width: '100%',
+      display: 'table',
+      tableLayout: 'fixed'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
+    name: props.name,
+    id: 'list-' + props.name
+  }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
+    active: props.active,
+    headers: props.headers,
+    children: props.children,
+    direction: props.direction,
+    isCollapsible: props.isCollapsible,
+    visibleColumns: props.visibleColumns || [],
+    onSort: props.onSort
+  }), /*#__PURE__*/_react["default"].createElement(_tableBody["default"], null, props.rowsContent()), props.paginated && /*#__PURE__*/_react["default"].createElement(_tableFooter["default"], null, /*#__PURE__*/_react["default"].createElement(_tableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_tablePagination["default"], {
+    page: page,
+    count: count,
+    rowsPerPage: (_props$rowsPerPage2 = props.rowsPerPage) !== null && _props$rowsPerPage2 !== void 0 ? _props$rowsPerPage2 : 10,
+    rowsPerPageOptions: [10, 25, 50, 100],
+    ActionsComponent: _TablePaginationActions.TablePaginationActions,
+    onPageChange: function onPageChange(_, page) {
+      var _props$setPage;
+      (_props$setPage = props.setPage) === null || _props$setPage === void 0 || _props$setPage.call(props, page);
+    },
+    onRowsPerPageChange: function onRowsPerPageChange(event) {
+      var _props$setPage2, _props$setRowsPerPage;
+      (_props$setPage2 = props.setPage) === null || _props$setPage2 === void 0 || _props$setPage2.call(props, 0);
+      (_props$setRowsPerPage = props.setRowsPerPage) === null || _props$setRowsPerPage === void 0 || _props$setRowsPerPage.call(props, parseInt(event.target.value, 10));
+    }
+  })))))), /*#__PURE__*/_react["default"].createElement(_TableDialogPreferences.TableDialogPreferences, {
+    open: props.open,
+    headers: props.headers,
+    columnsTemporary: props.columnsTemporary,
+    setColumnsTemporary: props.setColumnsTemporary,
+    onCancel: props.onCancel,
+    onConfirm: props.onConfirm
+  }));
+};

package/core/data-display/table-interactive/TableInteractiveHead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ITableInteractive } from './TableInteractive';
+export type ITableInteractiveHead = Pick<ITableInteractive, 'headers' | 'visibleColumns' | 'onSort' | 'active' | 'direction' | 'children' | 'isCollapsible'>;
+export declare const TableInteractiveHead: (props: ITableInteractiveHead) => React.JSX.Element;

package/core/data-display/table-interactive/TableInteractiveHead.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractiveHead = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tableCell = _interopRequireDefault(require("../table/table-cell"));
+var _tableHead = _interopRequireDefault(require("../table/table-head"));
+var _tableRow = _interopRequireDefault(require("../table/table-row"));
+var _utils = require("./utils");
+var TableInteractiveHead = exports.TableInteractiveHead = function TableInteractiveHead(props) {
+  var visibleColumns = (0, _utils.getVisibleColumns)(props.headers, props.visibleColumns);
+  var handleSort = function handleSort(name) {
+    var _props$onSort;
+    (_props$onSort = props.onSort) === null || _props$onSort === void 0 || _props$onSort.call(props, name);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_tableHead["default"], {
+    active: props.active,
+    direction: props.direction,
+    onSort: props.onSort && handleSort
+  }, /*#__PURE__*/_react["default"].createElement(_tableRow["default"], null, props.headers.map(function (header) {
+    return (0, _utils.generateHeader)(header, visibleColumns);
+  }), (props.children || props.isCollapsible) && /*#__PURE__*/_react["default"].createElement(_tableCell["default"], null)));
+};

package/core/data-display/table-interactive/TableInteractiveHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export type ITableInteractiveHeader = Pick<ITableInteractive, 'handleOpen' | 'headerActions'>;
+export declare const TableInteractiveHeader: (props: ITableInteractiveHeader) => React.JSX.Element;

package/core/data-display/table-interactive/TableInteractiveHeader.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableInteractiveHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _mui = require("../../../icons/mui");
+var _styles = require("./styles");
+var TableInteractiveHeader = exports.TableInteractiveHeader = function TableInteractiveHeader(props) {
+  return /*#__PURE__*/_react["default"].createElement(_styles.TableHeaderContent, null, /*#__PURE__*/_react["default"].createElement("div", null, props.headerActions), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    padding: "4px",
+    onClick: props.handleOpen
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconSettings, {
+    color: "primary"
+  })));
+};

package/core/data-display/table-interactive/TablePaginationActions.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+interface TablePaginationActionsProps {
+    page: number;
+    count: number;
+    rowsPerPage: number;
+    onPageChange: (event: MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+export declare const TablePaginationActions: (props: TablePaginationActionsProps) => React.JSX.Element;
+export {};

package/core/data-display/table-interactive/TablePaginationActions.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TablePaginationActions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _mui = require("../../../icons/mui");
+var TablePaginationActions = exports.TablePaginationActions = function TablePaginationActions(props) {
+  var count = props.count,
+    page = props.page,
+    rowsPerPage = props.rowsPerPage,
+    onPageChange = props.onPageChange;
+  var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
+    onPageChange(event, 0);
+  };
+  var handleBackButtonClick = function handleBackButtonClick(event) {
+    onPageChange(event, page - 1);
+  };
+  var handleNextButtonClick = function handleNextButtonClick(event) {
+    onPageChange(event, page + 1);
+  };
+  var handleLastPageButtonClick = function handleLastPageButtonClick(event) {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      flexShrink: 0,
+      margin: '0 0 0 16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "first page",
+    disabled: page === 0,
+    onClick: handleFirstPageButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconFirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "previous page",
+    disabled: page === 0,
+    onClick: handleBackButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconNavigateBefore, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "next page",
+    disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+    onClick: handleNextButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconNavigateNext, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    "aria-label": "last page",
+    disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+    onClick: handleLastPageButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_mui.IconLastPage, null)));
+};

package/core/data-display/table-interactive/index.d.ts

@@ -0,0 +1,3 @@
+export { TableInteractive } from './TableInteractive';
+export { getInitialColumns, setVisibleColumns, generateHeader, getVisibleColumns, getOrderedVisibleColumns } from './utils';
+export type { ITableInteractive } from './TableInteractive';

package/core/data-display/table-interactive/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TableInteractive", {
+  enumerable: true,
+  get: function get() {
+    return _TableInteractive.TableInteractive;
+  }
+});
+Object.defineProperty(exports, "generateHeader", {
+  enumerable: true,
+  get: function get() {
+    return _utils.generateHeader;
+  }
+});
+Object.defineProperty(exports, "getInitialColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getInitialColumns;
+  }
+});
+Object.defineProperty(exports, "getOrderedVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getOrderedVisibleColumns;
+  }
+});
+Object.defineProperty(exports, "getVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getVisibleColumns;
+  }
+});
+Object.defineProperty(exports, "setVisibleColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.setVisibleColumns;
+  }
+});
+var _TableInteractive = require("./TableInteractive");
+var _utils = require("./utils");

package/core/data-display/table-interactive/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableHeaderContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/data-display/table-interactive/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableHeaderContent = exports.ContentWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2;
+var gray = _theme.theme.colors.gray;
+var ContentWrapper = exports.ContentWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 2px solid ", ";\n"])), gray[300]);
+var TableHeaderContent = exports.TableHeaderContent = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin: 0 0 8px 0;\n\n    & > div {\n        display: flex;\n        justify-content: flex-end;\n        gap: 8px;\n    }\n"])));

package/core/data-display/table-interactive/table-interactive.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/core/data-display/table-interactive/table-interactive.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableInteractive } from '../table-interactive/TableInteractive';
+declare const meta: Meta<typeof TableInteractive>;
+export default meta;
+type Story = StoryObj<typeof TableInteractive>;
+export declare const interactiveTable: Story;

package/core/data-display/table-interactive/utils.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ITableInteractive } from './TableInteractive';
+export declare const STORAGE_KEY = "visible-columns";
+export declare const getInitialColumns: (columns: {
+    name: string;
+    label: string;
+    show: boolean;
+}[], key: string) => string[];
+export declare const setVisibleColumns: (columns: string[], key: string) => void;
+export declare const generateHeader: (header: ITableInteractive["headers"][number], visibleColumns?: string[] | undefined) => React.JSX.Element | null;
+export declare const getVisibleColumns: (headers: {
+    name: string;
+    label: string;
+}[], visibleColumns?: string[] | undefined) => string[];
+export declare const getOrderedVisibleColumns: (headers: {
+    name: string;
+    label: string;
+}[], visibleColumns?: string[] | undefined) => string[];

package/core/data-display/table-interactive/utils.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setVisibleColumns = exports.getVisibleColumns = exports.getOrderedVisibleColumns = exports.getInitialColumns = exports.generateHeader = exports.STORAGE_KEY = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tableCell = _interopRequireDefault(require("../table/table-cell"));
+var STORAGE_KEY = exports.STORAGE_KEY = 'visible-columns';
+var getInitialColumns = exports.getInitialColumns = function getInitialColumns(columns, key) {
+  var stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    var parsed = JSON.parse(stored);
+    if (parsed !== null && parsed !== void 0 && parsed[key] && Array.isArray(parsed[key])) {
+      return parsed[key];
+    }
+  }
+  return columns.filter(function (col) {
+    return col.show;
+  }).map(function (col) {
+    return col.name;
+  });
+};
+var setVisibleColumns = exports.setVisibleColumns = function setVisibleColumns(columns, key) {
+  var stored = localStorage.getItem(STORAGE_KEY);
+  var parsed = {};
+  parsed = stored ? JSON.parse(stored) : {};
+  parsed[key] = columns;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
+};
+var generateHeader = exports.generateHeader = function generateHeader(header, visibleColumns) {
+  if (!(visibleColumns !== null && visibleColumns !== void 0 && visibleColumns.includes(header.name))) return null;
+  return /*#__PURE__*/_react["default"].createElement(_tableCell["default"], {
+    key: header.name + '-header',
+    name: header.name
+  }, header.label);
+};
+var getVisibleColumns = exports.getVisibleColumns = function getVisibleColumns(headers, visibleColumns) {
+  return visibleColumns !== null && visibleColumns !== void 0 ? visibleColumns : headers.map(function (h) {
+    return h.name;
+  });
+};
+var getOrderedVisibleColumns = exports.getOrderedVisibleColumns = function getOrderedVisibleColumns(headers, visibleColumns) {
+  return headers.filter(function (header) {
+    return visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(header.name);
+  }).map(function (header) {
+    return header.name;
+  });
+};

package/core/feedback/snackbar/index.js

@@ -64,11 +64,10 @@ var SnackBar = function SnackBar(props) {
   var Icon = variants[variant].icon;
   var cursor = onClick ? 'pointer' : undefined;
   var handleClose = function handleClose(event) {
+    var _props$onClose;
     event.preventDefault();
     event.stopPropagation();
-    if (props.onClose) {
-      props.onClose();
-    }
+    (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
   };
   return /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
     id: id,

package/core/inputs/pin-input/index.js

@@ -18,8 +18,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var PIN_MIN_VALUE = 0;
-var PIN_MAX_VALUE = 9;
 var BACKSPACE_KEY = 'Backspace';
 var PinInput = function PinInput(_ref) {
   var pinLength = _ref.pinLength,
@@ -63,11 +61,11 @@ var PinInput = function PinInput(_ref) {
     changePinFocus(intValues.length - 1);
   };
   var _onChange = function onChange(event, index) {
+    var valuesArray = event.target.value.split('');
+    var value = valuesArray.pop();
     if (event.target.value.length > 1) {
       return;
     }
-    var valuesArray = event.target.value.split('');
-    var value = valuesArray.pop();
     if (!value || value === ' ' || value === '') {
       return;
     }
@@ -75,11 +73,9 @@ var PinInput = function PinInput(_ref) {
     if (isNaN(pinNumber) || value.length === 0) {
       return;
     }
-    if (pinNumber >= PIN_MIN_VALUE && pinNumber <= PIN_MAX_VALUE) {
-      onPinChanged(pinNumber, index);
-      if (index < pinLength - 1) {
-        changePinFocus(index + 1);
-      }
+    onPinChanged(pinNumber, index);
+    if (index < pinLength - 1) {
+      changePinFocus(index + 1);
     }
   };
   var _onKeyDown = function onKeyDown(event, index) {

package/core/inputs/text-field/index.js

@@ -112,9 +112,7 @@ var TextField = function TextField(_ref3) {
     endAdornment: renderEndAdornment(otherProps.disabled, onClear)
   } : {};
   var handleClick = function handleClick() {
-    if (onHelperClick) {
-      onHelperClick();
-    }
+    onHelperClick === null || onHelperClick === void 0 || onHelperClick();
   };
   var Wrapper = hasClear ? _styles.StaticTextFieldWrapper : _styles.TextFieldWrapper;
   var emojiRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;

package/core/surfaces/expansion-panel/expansion-panel.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/surfaces/expansion-panel/index.js

@@ -51,22 +51,16 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     }
   }
   var handleClick = function handleClick(event) {
-    if (onHelperClick) {
-      event.stopPropagation();
-      onHelperClick();
-    }
+    event.stopPropagation();
+    onHelperClick === null || onHelperClick === void 0 || onHelperClick();
   };
   var handleEditClick = function handleEditClick(event) {
-    if (onEditClick) {
-      event.stopPropagation();
-      onEditClick();
-    }
+    event.stopPropagation();
+    onEditClick === null || onEditClick === void 0 || onEditClick();
   };
   var handleSaveClick = function handleSaveClick(event) {
-    if (onSaveClick) {
-      event.stopPropagation();
-      onSaveClick();
-    }
+    event.stopPropagation();
+    onSaveClick === null || onSaveClick === void 0 || onSaveClick();
   };
   var renderHelper = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, onHelperClick && /*#__PURE__*/_react["default"].createElement(_textField.HelperBox, {
     helperIcon: helperIcon,

package/core/surfaces/step-card/step-card-details.js

@@ -21,11 +21,6 @@ var StepsList = function StepsList(_ref) {
   var steps = _ref.steps,
     onStepUrlClick = _ref.onStepUrlClick;
   return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
-    var handleOnClickStepUrl = function handleOnClickStepUrl() {
-      if (onStepUrlClick && step.url) {
-        onStepUrlClick(step.url);
-      }
-    };
     return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_mui.IconCheckCircle, {
@@ -43,7 +38,9 @@ var StepsList = function StepsList(_ref) {
       style: {
         backgroundColor: 'unset'
       },
-      onClick: handleOnClickStepUrl
+      onClick: function onClick() {
+        return onStepUrlClick(step.url);
+      }
     }, /*#__PURE__*/_react["default"].createElement(_mui.IconHelp, {
       fontSize: "small",
       style: {

package/icons/specific/IconWorkPermission.js

@@ -25,7 +25,7 @@ var IconWorkPermission = exports.IconWorkPermission = function IconWorkPermissio
     fillRule: "evenodd",
     clipRule: "evenodd",
     fill: color || primary.main,
-    "fill-opacity": opacity || '0.1',
+    fillOpacity: opacity || '0.1',
     d: "M24.5449 96.5662L16.2114 99.8265C14.8225 100.251 13.2435 99.8265 12.4833 98.4815L0.363138 78.1009C-0.32401 76.8729 -0.0169863 75.2208 1.12339 74.3582L13.9307 64.665C13.609 62.8229 13.4921 60.8053 13.4921 58.9047C13.4921 57.004 13.7406 54.9718 14.0622 53.1443L1.25497 43.4511C-0.00236628 42.5886 -0.265529 40.995 0.49472 39.7084L12.5417 19.3279C13.302 17.9828 14.881 17.4857 16.2699 17.9828L31.3433 23.8747C34.4281 21.6086 37.8346 19.5764 41.5628 18.0998L43.8289 2.51467C44.0774 1.03803 45.2763 0 46.7968 0H71.0224C72.5429 0 73.8003 1.03803 74.0488 2.51467L76.3149 18.0998C80.0431 19.5764 83.3765 21.5355 86.5344 23.8747L101.608 17.9828C102.997 17.5588 104.576 17.9828 105.336 19.3279L117.456 39.7084C118.143 40.9365 117.836 42.5886 116.696 43.4511L103.889 53.1443C103.962 53.5537 104.02 53.9631 104.079 54.387C103.523 54.7818 102.982 55.235 102.485 55.7467L92.865 65.4545C93.479 62.8814 93.8007 60.2059 93.8007 57.4427C93.8007 38.2756 78.274 22.749 59.107 22.749C39.9399 22.749 24.4133 38.2756 24.4133 57.4427C24.4133 66.1124 27.6005 74.0512 32.8638 80.1332C30.9193 80.718 29.1503 81.7706 27.659 83.2765C25.2759 85.6888 24.0478 88.8029 23.9601 92.1656C23.9162 93.6861 24.1209 95.1773 24.5595 96.5809L24.5449 96.5662ZM60.4813 104.344L42.63 86.3321C41.0218 84.7093 38.9604 83.9344 36.6943 83.9344C34.4135 83.9344 32.3667 84.7093 30.7585 86.3321C29.1503 87.9549 28.39 90.0164 28.3169 92.2679C28.2584 94.5633 28.9894 96.7417 30.6123 98.3791L54.5455 122.532C55.3642 123.35 56.3292 124.008 57.4257 124.403C58.4052 124.754 59.4433 124.929 60.4959 124.929C61.5339 124.929 62.572 124.754 63.5515 124.403C64.648 124.008 65.613 123.35 66.4317 122.532L117.632 70.8493C119.254 69.2119 120 67.1066 120 64.8112C120 62.5158 119.269 60.4252 117.632 58.7877C116.009 57.1502 113.918 56.39 111.623 56.39C109.327 56.39 107.237 57.1502 105.614 58.7877L60.4959 104.33L60.4813 104.344Z"
   })) : /*#__PURE__*/_react["default"].createElement("svg", {
     fill: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.36.0",
+    "version": "0.36.1",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -31,7 +31,7 @@
     },
     "dependencies": {
         "@emotion/react": "11.14.0",
-        "@emotion/styled": "11.14.0",
+        "@emotion/styled": "11.14.1",
         "@mui/icons-material": "6.4.8",
         "@mui/material": "6.4.8",
         "@mui/system": "6.4.8",
@@ -40,55 +40,55 @@
         "react-number-format": "5.4.4"
     },
     "devDependencies": {
-        "@babel/cli": "7.27.2",
-        "@babel/core": "7.27.1",
-        "@babel/plugin-transform-runtime": "7.27.1",
-        "@babel/preset-env": "7.27.2",
+        "@babel/cli": "7.28.0",
+        "@babel/core": "7.28.0",
+        "@babel/plugin-transform-runtime": "7.28.0",
+        "@babel/preset-env": "7.28.0",
         "@babel/preset-react": "7.27.1",
         "@babel/preset-typescript": "7.27.1",
-        "@faker-js/faker": "9.7.0",
+        "@faker-js/faker": "9.9.0",
         "@storybook/addon-essentials": "8.6.12",
         "@storybook/addon-webpack5-compiler-babel": "3.0.6",
         "@storybook/blocks": "8.6.12",
         "@storybook/react": "8.6.12",
         "@storybook/react-webpack5": "8.6.12",
-        "@stylistic/eslint-plugin": "4.2.0",
+        "@stylistic/eslint-plugin": "5.1.0",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
-        "@types/jest": "29.5.14",
-        "@types/node": "22.15.18",
+        "@types/jest": "30.0.0",
+        "@types/node": "24.0.10",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.32.1",
-        "@typescript-eslint/parser": "8.32.1",
+        "@typescript-eslint/eslint-plugin": "8.35.1",
+        "@typescript-eslint/parser": "8.35.1",
         "babel-loader": "10.0.0",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
-        "eslint": "9.26.0",
+        "eslint": "9.30.1",
         "eslint-config-prettier": "10.1.5",
-        "eslint-import-resolver-typescript": "4.3.4",
-        "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-prettier": "5.4.0",
+        "eslint-import-resolver-typescript": "4.4.4",
+        "eslint-plugin-import": "2.32.0",
+        "eslint-plugin-prettier": "5.5.1",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "5.2.0",
         "fs-extra": "11.3.0",
         "identity-obj-proxy": "3.0.0",
-        "jest": "29.7.0",
-        "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.5.3",
+        "jest": "30.0.4",
+        "jest-environment-jsdom": "30.0.4",
+        "prettier": "3.6.2",
         "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "8.6.12",
-        "ts-jest": "29.3.2",
+        "ts-jest": "29.4.0",
         "ts-loader": "9.5.2",
         "typescript": "5.8.3",
-        "typescript-eslint": "8.32.1",
+        "typescript-eslint": "8.35.1",
         "uuid": "11.1.0",
-        "webpack": "5.99.8"
+        "webpack": "5.99.9"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ITableInteractive } from '@/core/data-display/table-interactive/TableInteractive';
+interface TableInteractiveWrapperProps extends Partial<ITableInteractive> {
+    initialArgs?: Partial<ITableInteractive>;
+    onConfirmMock?: jest.Mock;
+    onCancelMock?: jest.Mock;
+    setPageMock?: jest.Mock;
+    setRowsPerPageMock?: jest.Mock;
+    setVisibleColumnsMock?: jest.Mock;
+}
+export declare const HEADERS: {
+    name: string;
+    label: string;
+    show: boolean;
+}[];
+export declare const TABLE_DATA: {
+    name: string;
+    email: string;
+    cel: string;
+}[];
+export declare const InteractiveTableWrapper: ({ initialArgs, onConfirmMock, onCancelMock, setVisibleColumnsMock, setPageMock, setRowsPerPageMock, ...props }: TableInteractiveWrapperProps) => React.JSX.Element;
+export {};