flipper-ui 0.36.5 → 0.37.1

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { TableProps } from '@mui/material/Table';
 export declare enum Direction {
     ASCENDENT = "asc",
     DESCENDENT = "desc"
 }
-export interface ITableInteractive {
+export interface ITableInteractive extends Omit<TableProps, 'children'> {
     name: string;
     page?: number;
     open?: boolean;
@@ -15,6 +16,7 @@ export interface ITableInteractive {
         label: string;
         show: boolean;
     }[];
+    className?: string;
     paginated?: boolean;
     rowsPerPage?: number;
     direction?: Direction;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableInteractive = exports.Direction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _table = _interopRequireDefault(require("../table"));
@@ -16,6 +17,10 @@ var _TableDialogPreferences = require("./TableDialogPreferences");
 var _TableInteractiveHead = require("./TableInteractiveHead");
 var _TableInteractiveHeader = require("./TableInteractiveHeader");
 var _TablePaginationActions = require("./TablePaginationActions");
+var _theme = require("../../../theme");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var gray = _theme.theme.colors.gray;
 var Direction = exports.Direction = /*#__PURE__*/function (Direction) {
   Direction["ASCENDENT"] = "asc";
   Direction["DESCENDENT"] = "desc";
@@ -48,7 +53,12 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     }
   }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
     name: props.name,
-    id: 'list-' + props.name
+    id: 'list-' + props.name,
+    className: props.className,
+    style: {
+      border: props.isInteractive ? 'none !important' : "1px solid ".concat(gray[300])
+    },
+    sx: _objectSpread({}, props.sx)
   }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
     active: props.active,
     headers: props.headers,
@@ -57,7 +67,9 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     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"], {
+  }), /*#__PURE__*/_react["default"].createElement(_tableBody["default"], null, props.rowsContent()), props.paginated && /*#__PURE__*/_react["default"].createElement(_tableFooter["default"], null, /*#__PURE__*/_react["default"].createElement(_tableRow["default"], {
+    className: "no-hover"
+  }, /*#__PURE__*/_react["default"].createElement(_tablePagination["default"], {
     page: page,
     count: count,
     rowsPerPage: (_props$rowsPerPage2 = props.rowsPerPage) !== null && _props$rowsPerPage2 !== void 0 ? _props$rowsPerPage2 : 10,

package/core/data-display/view-mode/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+export interface Filter {
+    label: ReactNode;
+    active: boolean;
+    onClick: () => void;
+}
+export interface IProps {
+    filters?: Filter[];
+    activeMode?: boolean;
+    setActiveMode?: Dispatch<SetStateAction<boolean>>;
+}
+declare const ViewMode: (props: IProps) => React.JSX.Element;
+export default ViewMode;

package/core/data-display/view-mode/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("../../inputs/button"));
+var _mui = require("../../../icons/mui");
+var _styles = require("./styles");
+var ViewMode = function ViewMode(props) {
+  var filters = props.filters,
+    _props$activeMode = props.activeMode,
+    activeMode = _props$activeMode === void 0 ? false : _props$activeMode,
+    setActiveMode = props.setActiveMode;
+  var defaultFilters = [{
+    label: /*#__PURE__*/_react["default"].createElement(_mui.IconTableView, {
+      fontSize: "small"
+    }),
+    active: activeMode,
+    onClick: function onClick() {
+      return setActiveMode === null || setActiveMode === void 0 ? void 0 : setActiveMode(function (prev) {
+        return !prev;
+      });
+    }
+  }, {
+    label: /*#__PURE__*/_react["default"].createElement(_mui.IconGridView, {
+      fontSize: "small"
+    }),
+    active: !activeMode,
+    onClick: function onClick() {
+      return setActiveMode === null || setActiveMode === void 0 ? void 0 : setActiveMode(function (prev) {
+        return !prev;
+      });
+    }
+  }];
+  var currentFilters = filters || defaultFilters;
+  return /*#__PURE__*/_react["default"].createElement(_styles.ButtonFilterGroup, {
+    size: "small"
+  }, currentFilters.map(function (filter, i) {
+    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: i,
+      color: "primary",
+      variant: filter.active ? 'contained' : 'outlined',
+      onClick: filter.onClick
+    }, filter.label);
+  }));
+};
+var _default = exports["default"] = ViewMode;

package/core/data-display/view-mode/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const ButtonFilterGroup: import("@emotion/styled").StyledComponent<import("@mui/material/ButtonGroup").ButtonGroupOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "disabled" | "size" | "children" | "style" | "className" | "classes" | "disableRipple" | "sx" | "disableFocusRipple" | "orientation" | "variant" | "disableElevation" | "fullWidth"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const WrapperEnd: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Cards: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/data-display/view-mode/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperEnd = exports.Cards = exports.ButtonFilterGroup = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _templateObject, _templateObject2, _templateObject3;
+var ButtonFilterGroup = exports.ButtonFilterGroup = (0, _styled["default"])(_ButtonGroup["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        gap: 2px;\n    }\n"])));
+var WrapperEnd = exports.WrapperEnd = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: end;\n    margin: 0 0 24px 0;\n"])));
+var Cards = exports.Cards = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: grid;\n    gap: 16px;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n"])));

package/core/data-display/view-mode/useViewMode.d.ts

@@ -0,0 +1 @@
+export declare const useViewMode: (subKey: string) => readonly [boolean, () => void];

package/core/data-display/view-mode/useViewMode.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useViewMode = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useViewMode = exports.useViewMode = function useViewMode(subKey) {
+  var STORAGE_KEY = 'view-mode';
+  var _useState = (0, _react.useState)(function () {
+      var sessionData = sessionStorage.getItem(STORAGE_KEY);
+      if (sessionData) {
+        var parsed = JSON.parse(sessionData);
+        if (parsed[subKey] !== undefined) return parsed[subKey];
+      }
+      var localData = localStorage.getItem(STORAGE_KEY);
+      if (localData) {
+        var _parsed = JSON.parse(localData);
+        if (_parsed[subKey] !== undefined) return _parsed[subKey];
+      }
+      return false;
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeMode = _useState2[0],
+    setActiveMode = _useState2[1];
+  var toggleActiveMode = function toggleActiveMode() {
+    setActiveMode(function (prev) {
+      var newValue = !prev;
+      var sessionData = sessionStorage.getItem(STORAGE_KEY);
+      var sessionObj = sessionData ? JSON.parse(sessionData) : {};
+      sessionObj[subKey] = newValue;
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(sessionObj));
+      var localData = localStorage.getItem(STORAGE_KEY);
+      var localObj = localData ? JSON.parse(localData) : {};
+      localObj[subKey] = newValue;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(localObj));
+      return newValue;
+    });
+  };
+  return [activeMode, toggleActiveMode];
+};

package/core/data-display/view-mode/view-mode.spec.d.ts

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

package/core/data-display/view-mode/view-mode.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ViewMode from '.';
+declare const meta: Meta<typeof ViewMode>;
+export default meta;
+type Story = StoryObj<typeof ViewMode>;
+export declare const viewMode: Story;
+export declare const viewModeCustom: Story;

package/icons/mui/index.d.ts

@@ -63,6 +63,7 @@ export { default as IconFormatColorText } from '@mui/icons-material/FormatColorT
 export { default as IconFormatListBulleted } from '@mui/icons-material/FormatListBulleted';
 export { default as IconForumOutlined } from '@mui/icons-material/ForumOutlined';
 export { default as IconFullscreenRounded } from '@mui/icons-material/FullscreenRounded';
+export { default as IconGridView } from '@mui/icons-material/GridViewRounded';
 export { default as IconHeadset } from '@mui/icons-material/Headset';
 export { default as IconHelp } from '@mui/icons-material/Help';
 export { default as IconHelpOutline } from '@mui/icons-material/HelpOutline';
@@ -131,6 +132,7 @@ export { default as IconStar } from '@mui/icons-material/Star';
 export { default as IconStarBorder } from '@mui/icons-material/StarBorder';
 export { default as IconSync } from '@mui/icons-material/Sync';
 export { default as IconSyncProblem } from '@mui/icons-material/SyncProblem';
+export { default as IconTableView } from '@mui/icons-material/TableRows';
 export { default as IconTextFields } from '@mui/icons-material/TextFields';
 export { default as IconTimeline } from '@mui/icons-material/Timeline';
 export { default as IconToday } from '@mui/icons-material/Today';

package/icons/mui/index.js

@@ -394,6 +394,12 @@ Object.defineProperty(exports, "IconFullscreenRounded", {
     return _FullscreenRounded["default"];
   }
 });
+Object.defineProperty(exports, "IconGridView", {
+  enumerable: true,
+  get: function get() {
+    return _GridViewRounded["default"];
+  }
+});
 Object.defineProperty(exports, "IconHeadset", {
   enumerable: true,
   get: function get() {
@@ -796,6 +802,12 @@ Object.defineProperty(exports, "IconSyncProblem", {
     return _SyncProblem["default"];
   }
 });
+Object.defineProperty(exports, "IconTableView", {
+  enumerable: true,
+  get: function get() {
+    return _TableRows["default"];
+  }
+});
 Object.defineProperty(exports, "IconTextFields", {
   enumerable: true,
   get: function get() {
@@ -927,6 +939,7 @@ var _FormatColorText = _interopRequireDefault(require("@mui/icons-material/Forma
 var _FormatListBulleted = _interopRequireDefault(require("@mui/icons-material/FormatListBulleted"));
 var _ForumOutlined = _interopRequireDefault(require("@mui/icons-material/ForumOutlined"));
 var _FullscreenRounded = _interopRequireDefault(require("@mui/icons-material/FullscreenRounded"));
+var _GridViewRounded = _interopRequireDefault(require("@mui/icons-material/GridViewRounded"));
 var _Headset = _interopRequireDefault(require("@mui/icons-material/Headset"));
 var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
@@ -995,6 +1008,7 @@ var _Star = _interopRequireDefault(require("@mui/icons-material/Star"));
 var _StarBorder = _interopRequireDefault(require("@mui/icons-material/StarBorder"));
 var _Sync = _interopRequireDefault(require("@mui/icons-material/Sync"));
 var _SyncProblem = _interopRequireDefault(require("@mui/icons-material/SyncProblem"));
+var _TableRows = _interopRequireDefault(require("@mui/icons-material/TableRows"));
 var _TextFields = _interopRequireDefault(require("@mui/icons-material/TextFields"));
 var _Timeline = _interopRequireDefault(require("@mui/icons-material/Timeline"));
 var _Today = _interopRequireDefault(require("@mui/icons-material/Today"));

package/icons/specific/IconMicrosoftEntra.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IIconProps } from '../utils';
+export declare const IconMicrosoftEntra: ({ width, height, viewBox }: IIconProps) => React.JSX.Element;

package/icons/specific/IconMicrosoftEntra.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMicrosoftEntra = void 0;
+var _react = _interopRequireDefault(require("react"));
+var IconMicrosoftEntra = exports.IconMicrosoftEntra = function IconMicrosoftEntra(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    viewBox = _ref.viewBox;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: viewBox || '0 0 18 18',
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z",
+    fill: "#225086"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z",
+    fill: "#6df"
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199",
+    fill: "#cbf8ff"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z",
+    fill: "#074793"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z",
+    fill: "#0294e4"
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199",
+    fill: "#96bcc2"
+  })));
+};

package/index.d.ts

@@ -23,6 +23,8 @@ export { default as TableRow } from './core/data-display/table/table-row';
 export { default as TableFooter } from './core/data-display/table/table-footer';
 export { default as TablePagination } from './core/data-display/table/table-pagination';
 export { default as Typography } from './core/data-display/typography';
+export { default as ViewMode } from './core/data-display/view-mode';
+export { useViewMode } from './core/data-display/view-mode/useViewMode';
 export { default as Collapse } from './core/feedback/collapse';
 export { default as Dialog } from './core/feedback/dialog';
 export { default as Fade } from './core/feedback/fade';

package/index.js

@@ -27,6 +27,8 @@ var _exportNames = {
   TableFooter: true,
   TablePagination: true,
   Typography: true,
+  ViewMode: true,
+  useViewMode: true,
   Collapse: true,
   Dialog: true,
   Fade: true,
@@ -440,6 +442,18 @@ Object.defineProperty(exports, "ValidationDialog", {
     return _validationDialog["default"];
   }
 });
+Object.defineProperty(exports, "ViewMode", {
+  enumerable: true,
+  get: function get() {
+    return _viewMode["default"];
+  }
+});
+Object.defineProperty(exports, "useViewMode", {
+  enumerable: true,
+  get: function get() {
+    return _useViewMode.useViewMode;
+  }
+});
 var _dataTable = require("./core/data-display/data-table");
 Object.keys(_dataTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -498,6 +512,8 @@ var _tableRow = _interopRequireDefault(require("./core/data-display/table/table-
 var _tableFooter = _interopRequireDefault(require("./core/data-display/table/table-footer"));
 var _tablePagination = _interopRequireDefault(require("./core/data-display/table/table-pagination"));
 var _typography = _interopRequireDefault(require("./core/data-display/typography"));
+var _viewMode = _interopRequireDefault(require("./core/data-display/view-mode"));
+var _useViewMode = require("./core/data-display/view-mode/useViewMode");
 var _collapse = _interopRequireDefault(require("./core/feedback/collapse"));
 var _dialog = _interopRequireDefault(require("./core/feedback/dialog"));
 var _fade = _interopRequireDefault(require("./core/feedback/fade"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.36.5",
+    "version": "0.37.1",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -53,8 +53,8 @@
         "@storybook/react": "8.6.12",
         "@storybook/react-webpack5": "8.6.12",
         "@stylistic/eslint-plugin": "5.2.2",
-        "@testing-library/dom": "10.4.0",
-        "@testing-library/jest-dom": "6.6.3",
+        "@testing-library/dom": "10.4.1",
+        "@testing-library/jest-dom": "6.6.4",
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "30.0.0",
@@ -67,7 +67,7 @@
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
-        "eslint": "9.31.0",
+        "eslint": "9.32.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-import": "2.32.0",
@@ -88,7 +88,7 @@
         "typescript": "5.8.3",
         "typescript-eslint": "8.38.0",
         "uuid": "11.1.0",
-        "webpack": "5.100.2"
+        "webpack": "5.101.0"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",

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

@@ -18,5 +18,5 @@ export declare const TABLE_DATA: {
     email: string;
     cel: string;
 }[];
-export declare const InteractiveTableWrapper: ({ initialArgs, onConfirmMock, onCancelMock, setVisibleColumnsMock, setPageMock, setRowsPerPageMock, ...props }: TableInteractiveWrapperProps) => React.JSX.Element;
+export declare const InteractiveTableWrapper: ({ initialArgs, onConfirmMock, onCancelMock, setVisibleColumnsMock, setPageMock, setRowsPerPageMock, isInteractive, ...props }: TableInteractiveWrapperProps) => React.JSX.Element;
 export {};