flipper-ui 0.37.4 → 0.37.5

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

@@ -3,10 +3,11 @@ import type { DefaultProps } from '../../types';
 import type { TableCellProps } from '@mui/material/TableCell';
 export interface ITableCellProps extends DefaultProps, Omit<TableCellProps, 'padding'> {
     numeric?: boolean;
+    sortable?: boolean;
+    padding?: number | string;
     variant?: 'head' | 'body' | 'footer';
     spacing?: 'normal' | 'checkbox' | 'none';
-    padding?: number | string;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
 }
-declare const TableCell: ({ style, margin, padding, children, spacing, ...otherProps }: ITableCellProps) => React.JSX.Element;
+declare const TableCell: ({ style, margin, padding, children, spacing, sortable, ...otherProps }: ITableCellProps) => React.JSX.Element;
 export default TableCell;

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

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 var _tableHead = require("./table-head");
-var _excluded = ["style", "margin", "padding", "children", "spacing"];
+var _excluded = ["style", "margin", "padding", "children", "spacing", "sortable"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -23,6 +23,7 @@ var TableCell = function TableCell(_ref) {
     padding = _ref.padding,
     children = _ref.children,
     spacing = _ref.spacing,
+    sortable = _ref.sortable,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_tableHead.SortContext),
     onSort = _useContext.onSort,
@@ -32,14 +33,14 @@ var TableCell = function TableCell(_ref) {
     onSort === null || onSort === void 0 || onSort(otherProps.name || '');
   };
   return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], (0, _extends2["default"])({}, otherProps, {
+    padding: spacing,
     style: _objectSpread({
       padding: padding,
       margin: margin
-    }, style),
-    padding: spacing
-  }), onSort ? /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
-    active: otherProps.name === active,
+    }, style)
+  }), (sortable !== null && sortable !== void 0 ? sortable : onSort) ? /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
     direction: direction,
+    active: otherProps.name === active,
     onClick: handleSort
   }, children) : children);
 };

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

@@ -10,12 +10,14 @@ export interface ITableInteractive extends Omit<TableProps, 'children'> {
     page?: number;
     open?: boolean;
     total?: number;
+    fixed?: boolean;
     active?: string;
     headers: {
         name: string;
         label: string;
         show: boolean;
         width?: string;
+        sortable?: boolean;
     }[];
     className?: string;
     paginated?: boolean;

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

@@ -60,6 +60,7 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     },
     sx: _objectSpread({}, props.sx)
   }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
+    fixed: props.fixed,
     active: props.active,
     headers: props.headers,
     children: props.children,

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

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

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

@@ -21,6 +21,11 @@ var TableInteractiveHead = exports.TableInteractiveHead = function TableInteract
     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)));
+    return (0, _utils.generateHeader)(header, visibleColumns, header.sortable, props.fixed);
+  }), (props.children || props.isCollapsible) && /*#__PURE__*/_react["default"].createElement(_tableCell["default"], {
+    sortable: false,
+    sx: {
+      width: '50px'
+    }
+  })));
 };

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

@@ -14,4 +14,5 @@ export declare const TableCellInteractive: import("@emotion/styled").StyledCompo
     theme?: import("@emotion/react").Theme;
 } & {
     width?: string;
+    fixed?: boolean;
 }, {}, {}>;

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

@@ -14,4 +14,8 @@ 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"])));
 var ActionsWrapper = exports.ActionsWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n"])));
-var TableCellInteractive = exports.TableCellInteractive = (0, _styled["default"])(_tableCell["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        @media (max-width: 1440px) {\n            padding: 16px 8px;\n        }\n    }\n"])));
+var TableCellInteractive = exports.TableCellInteractive = (0, _styled["default"])(_tableCell["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        min-width: 60px;\n        max-width: ", ";\n\n        @media (max-width: 1440px) {\n            padding: 16px 8px;\n        }\n    }\n"])), function (props) {
+  return props.fixed ? function (props) {
+    return props.width;
+  } : 'none';
+});

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

@@ -7,7 +7,7 @@ export declare const getInitialColumns: (columns: {
     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 generateHeader: (header: ITableInteractive["headers"][number], visibleColumns?: string[] | undefined, sortable?: boolean, fixed?: boolean) => React.JSX.Element | null;
 export declare const getVisibleColumns: (headers: {
     name: string;
     label: string;

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

@@ -29,11 +29,14 @@ var setVisibleColumns = exports.setVisibleColumns = function setVisibleColumns(c
   parsed[key] = columns;
   localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
 };
-var generateHeader = exports.generateHeader = function generateHeader(header, visibleColumns) {
+var generateHeader = exports.generateHeader = function generateHeader(header, visibleColumns, sortable, fixed) {
   if (!(visibleColumns !== null && visibleColumns !== void 0 && visibleColumns.includes(header.name))) return null;
   return /*#__PURE__*/_react["default"].createElement(_styles.TableCellInteractive, {
-    key: header.name + '-header',
-    name: header.name
+    fixed: fixed,
+    name: header.name,
+    sortable: sortable,
+    width: header.width,
+    key: header.name + '-header'
   }, header.label);
 };
 var getVisibleColumns = exports.getVisibleColumns = function getVisibleColumns(headers, visibleColumns) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.37.4",
+    "version": "0.37.5",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -52,22 +52,22 @@
         "@storybook/blocks": "8.6.12",
         "@storybook/react": "8.6.12",
         "@storybook/react-webpack5": "8.6.12",
-        "@stylistic/eslint-plugin": "5.3.1",
+        "@stylistic/eslint-plugin": "5.4.0",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "6.8.0",
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "30.0.0",
-        "@types/node": "24.5.1",
+        "@types/node": "24.5.2",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.44.0",
-        "@typescript-eslint/parser": "8.44.0",
+        "@typescript-eslint/eslint-plugin": "8.44.1",
+        "@typescript-eslint/parser": "8.44.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.35.0",
+        "eslint": "9.36.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-import": "2.32.0",
@@ -83,10 +83,10 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "8.6.12",
-        "ts-jest": "29.4.2",
+        "ts-jest": "29.4.4",
         "ts-loader": "9.5.4",
         "typescript": "5.9.2",
-        "typescript-eslint": "8.44.0",
+        "typescript-eslint": "8.44.1",
         "uuid": "11.1.0",
         "webpack": "5.101.3"
     },

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

@@ -8,11 +8,17 @@ interface TableInteractiveWrapperProps extends Partial<ITableInteractive> {
     setRowsPerPageMock?: jest.Mock;
     setVisibleColumnsMock?: jest.Mock;
 }
-export declare const HEADERS: {
+export declare const HEADERS: ({
     name: string;
     label: string;
     show: boolean;
-}[];
+    width: string;
+} | {
+    name: string;
+    label: string;
+    show: boolean;
+    width?: undefined;
+})[];
 export declare const TABLE_DATA: {
     name: string;
     email: string;