flipper-ui 0.40.3 → 0.41.0

package/core/data-display/actions/actions.spec.d.ts

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

package/core/data-display/actions/actions.stories.d.ts

@@ -3,4 +3,5 @@ import Actions from '.';
 declare const meta: Meta<typeof Actions>;
 export default meta;
 type Story = StoryObj<typeof Actions>;
-export declare const actions: Story;
+export declare const defaultComponent: Story;
+export declare const customComponent: Story;

package/core/data-display/actions/index.d.ts

@@ -1,25 +1,105 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-export interface IActionsProps {
+import type { IButtonProps } from '@/core/inputs/button';
+type TSize = 'small' | 'medium' | 'large';
+interface ICustomActionBase {
+    /** `name` attribute of the button, and the fallback for `data-testid`. */
+    name?: string;
+    /**
+     * Default: `'medium'` on a label action, `'small'` on an icon action.
+     * The icon default is deliberate — a medium IconButton is 40px tall
+     * against the 36.5px of a text Button, so it would drive the bar height.
+     */
+    size?: TSize;
+    /** Disables this button alone; `IActionsProps.disabled` disables all. */
+    disabled?: boolean;
+    /** Overrides the `data-testid`, which otherwise mirrors `name`. */
+    'data-testid'?: string;
+    /**
+     * Overrides the button padding. Does not affect the gap between buttons.
+     */
     padding?: number | string;
+    onClick(): void;
+}
+/** A custom action rendered as a `Button`. Cannot carry an `icon`. */
+export interface ILabelAction extends ICustomActionBase {
+    icon?: never;
+    label: ReactNode;
+    'aria-label'?: string;
+    color?: IButtonProps['color'];
+    /** Default: `'text'`. Use `'contained'` to mark the primary action. */
+    variant?: IButtonProps['variant'];
+}
+/** A custom action rendered as an `IconButton`. Cannot carry a `label`. */
+export interface IIconAction extends ICustomActionBase {
+    label?: never;
+    /** Rendered as the only content, so the button has no text of its own. */
+    icon: ReactNode;
+    /** Unavailable: `IconButton` has no variant. */
+    variant?: never;
+    /** Required: an icon leaves the button with no accessible name (WCAG 4.1.2). */
+    'aria-label': string;
+    color?: IButtonProps['color'];
+}
+export type ICustomAction = ILabelAction | IIconAction;
+export interface IActionsProps {
+    /** Margin of the action bar, not of the buttons. */
     margin?: number | string;
-    align?: 'flex-end' | 'flex-start' | 'center';
-    prefix?: string;
+    /** Padding of the action bar, not of the buttons. */
+    padding?: number | string;
+    /**
+     * Which of the default buttons to render; both when omitted.
+     * Has no effect while `customActions` is informed, since the pair is
+     * not rendered at all in that case.
+     */
     buttons?: Array<'confirm' | 'cancel'>;
+    /** Horizontal position of the whole bar. Default: `'flex-end'`. */
+    align?: 'flex-end' | 'flex-start' | 'center';
+    /**
+     * Color of the confirm button only — cancel stays neutral.
+     * Default: `'secondary'`.
+     */
     actionButtonColor?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    /**
+     * `name` attribute of the default buttons. Their `data-testid` stays
+     * `cancel-action` / `confirm-action` regardless, so target tests by it.
+     */
     names?: {
         cancel: string;
         confirm: string;
     };
+    /**
+     * Visible text of the default buttons.
+     * Default: `'Cancelar'` / `'Confirmar'`.
+     */
     labels?: {
         cancel: ReactNode;
         confirm: ReactNode;
     };
+    /**
+     * Extra buttons that **replace** the cancel/confirm pair — informing them
+     * makes the bar be only these, in any quantity, mixing label and icon
+     * actions freely. An empty array behaves as if not informed.
+     */
+    customActions?: ICustomAction[];
+    /**
+     * Size of the default buttons; custom actions carry their own.
+     * Default: `'medium'`.
+     */
+    size?: TSize;
+    /** Accessible name of the `role="group"` around the bar. Default: `'Ações'`. */
+    ariaLabel?: string;
+    /** Hides the confirm button and the custom actions — cancel still renders. */
     readonly?: boolean;
+    /** Disables every rendered button, custom actions included. */
     disabled?: boolean;
+    /** Disables the cancel button alone, on top of `disabled`. */
     disabledCancel?: boolean;
+    /** Disables the confirm button alone, on top of `disabled`. */
     disabledConfirm?: boolean;
+    /** Omitting it still renders the cancel button — with no handler attached. */
     onCancel?(): void | boolean;
+    /** Required even when `customActions` keeps the confirm button off the bar. */
     onConfirm(): void;
 }
 declare const Actions: (props: IActionsProps) => React.JSX.Element;

package/core/data-display/actions/index.js

@@ -7,25 +7,63 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("../../inputs/button"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _styles = require("./styles");
+/** A custom action rendered as a `Button`. Cannot carry an `icon`. */
+
+/** A custom action rendered as an `IconButton`. Cannot carry a `label`. */
+
 var Actions = function Actions(props) {
-  var showButton = !props.readonly && (!props.buttons || props.buttons.includes('confirm'));
+  var _props$customActions;
+  var hasCustomActions = !!((_props$customActions = props.customActions) !== null && _props$customActions !== void 0 && _props$customActions.length);
+  var showButton = !hasCustomActions && !props.readonly && (!props.buttons || props.buttons.includes('confirm'));
+  var showCancel = !hasCustomActions && (!props.buttons || props.buttons.includes('cancel'));
+  var renderCustomActions = function renderCustomActions() {
+    var _props$customActions2;
+    return props.readonly ? null : (_props$customActions2 = props.customActions) === null || _props$customActions2 === void 0 ? void 0 : _props$customActions2.map(function (action, index) {
+      return action.icon ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+        name: action.name,
+        color: action.color,
+        key: action.name || index,
+        size: action.size || 'small',
+        padding: action.padding || '4px',
+        "aria-label": action['aria-label'],
+        disabled: props.disabled || action.disabled,
+        "data-testid": action['data-testid'] || action.name,
+        onClick: action.onClick
+      }, action.icon) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        name: action.name,
+        color: action.color,
+        padding: action.padding,
+        variant: action.variant,
+        key: action.name || index,
+        size: action.size || 'medium',
+        "aria-label": action['aria-label'],
+        disabled: props.disabled || action.disabled,
+        "data-testid": action['data-testid'] || action.name,
+        onClick: action.onClick
+      }, action.label);
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, {
-    align: props.align || 'flex-end',
+    role: "group",
+    margin: props.margin,
     padding: props.padding,
-    margin: props.margin
-  }, (!props.buttons || props.buttons.includes('cancel')) && /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    margin: "0 16px",
+    align: props.align || 'flex-end',
+    "aria-label": props.ariaLabel || 'Ações'
+  }, renderCustomActions(), showCancel && /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    "data-testid": "cancel-action",
+    size: props.size || 'medium',
     disabled: props.disabled || props.disabledCancel,
     name: props.names ? props.names.cancel : 'cancel-action',
-    "data-testid": "cancel-action",
     onClick: props.onCancel
   }, props.labels ? props.labels.cancel : 'Cancelar'), showButton && /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    color: props.actionButtonColor || 'secondary',
     variant: "contained",
+    "data-testid": "confirm-action",
+    size: props.size || 'medium',
+    color: props.actionButtonColor || 'secondary',
     disabled: props.disabled || props.disabledConfirm,
     name: props.names ? props.names.confirm : 'confirm-action',
-    "data-testid": "confirm-action",
     onClick: props.onConfirm
   }, props.labels ? props.labels.confirm : 'Confirmar'));
 };

package/core/data-display/actions/styles.d.ts

@@ -1,6 +1,6 @@
 interface IWrapper {
-    padding?: number | string;
     margin?: number | string;
+    padding?: number | string;
     align?: 'flex-end' | 'flex-start' | 'center';
 }
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{

package/core/data-display/actions/styles.js

@@ -8,10 +8,10 @@ exports.Wrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    justify-content: ", ";\n    padding: ", ";\n    margin: ", ";\n"])), function (props) {
-  return props.align;
+var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n    margin: ", ";\n    padding: ", ";\n    justify-content: ", ";\n"])), function (props) {
+  return props.margin;
 }, function (props) {
   return props.padding;
 }, function (props) {
-  return props.margin;
+  return props.align;
 });

package/core/data-display/advertise/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const AdvertiseTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
-}, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "p" | "zIndex" | "typography" | "children" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType;
 } & import("../../types").DefaultProps & {
     theme?: import("@emotion/react").Theme;

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

@@ -17,6 +17,11 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
     hidden?: boolean;
     rowViews?: Record<keyof V, RowViewComponent<D>>;
     size?: 'small' | 'medium';
+    maxHeight?: number | string;
+    stickyHeader?: boolean;
+    cellPadding?: CSSProperties['padding'];
+    framed?: boolean;
+    borderRadius?: number | string;
     renderEmptyRows?: boolean;
     hideSelect?: boolean;
     checkbox?: boolean;

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

@@ -21,6 +21,7 @@ var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
 var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
 var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
 var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
+var _styles = require("../table/styles");
 var _dataTablePaginationActions = require("./data-table-pagination-actions");
 var _rows = require("./rows");
 var _types = require("./types");
@@ -61,6 +62,11 @@ var DataTable = exports.DataTable = function DataTable(props) {
     errors = props.errors,
     componentForEmpty = props.componentForEmpty,
     size = props.size,
+    maxHeight = props.maxHeight,
+    stickyHeader = props.stickyHeader,
+    cellPadding = props.cellPadding,
+    framed = props.framed,
+    borderRadius = props.borderRadius,
     renderEmptyRows = props.renderEmptyRows,
     hideSelect = props.hideSelect,
     bodyStyle = props.bodyStyle,
@@ -203,20 +209,21 @@ var DataTable = exports.DataTable = function DataTable(props) {
         errors: errors,
         mode: mode,
         isHidden: hidden,
+        cellPadding: cellPadding,
         onUpdate: setEditableRowState(row.id)
       }));
     });
-  }, [rows, getRowState, rowViews, hidden, bodyRowStyle, checkbox, columns, errors, setEditableRowState, onRowClick, checkboxProps]);
+  }, [rows, getRowState, rowViews, hidden, bodyRowStyle, checkbox, columns, errors, cellPadding, setEditableRowState, onRowClick, checkboxProps]);
   var columnsList = (0, _react.useMemo)(function () {
     return columns.map(function (column) {
       return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
         key: column.title,
         variant: "head",
-        style: column.headerStyle,
+        style: (0, _rows.withCellStyle)(column.headerStyle, cellPadding, column.truncate),
         align: column.align
       }, column.title);
     });
-  }, [columns]);
+  }, [columns, cellPadding]);
   var currentRowsNumber = rows.length + (newRow ? 1 : 0);
   var hiddenRowsNumber = pagination.disabled ? 0 : rowsPerPage - currentRowsNumber;
   var hiddenRowFiller = hiddenRowsNumber !== 0 && /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
@@ -232,6 +239,7 @@ var DataTable = exports.DataTable = function DataTable(props) {
     data: newRow,
     errors: errors,
     columns: columns,
+    cellPadding: cellPadding,
     onUpdate: setEditableRowState(newRow.id)
   }), rowsList);
   var paginationActionsComponent = (0, _react.useMemo)(function () {
@@ -242,10 +250,14 @@ var DataTable = exports.DataTable = function DataTable(props) {
   }, [pagination.showFirstButton, pagination.showLastButton]);
   var emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   return /*#__PURE__*/_react["default"].createElement(_TableContainer["default"], {
-    role: "data-table-container",
-    component: _Paper["default"]
+    "data-testid": "data-table-container",
+    component: _Paper["default"],
+    sx: _objectSpread(_objectSpread({}, maxHeight ? _objectSpread({
+      maxHeight: maxHeight
+    }, _styles.SCROLLBAR) : undefined), (0, _styles.tableFrame)(framed, borderRadius))
   }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    size: size
+    size: size,
+    stickyHeader: stickyHeader
   }, !noHeader && /*#__PURE__*/_react["default"].createElement(_TableHead["default"], {
     style: headStyle
   }, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {

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

@@ -3,11 +3,113 @@ import type { Meta } from '@storybook/react';
 import { default as DataTable } from './data-table';
 declare const meta: Meta<typeof DataTable>;
 export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const Custom: () => React.JSX.Element;
-export declare const Empty: () => React.JSX.Element;
-export declare const NoHeader: () => React.JSX.Element;
-export declare const NoPagination: () => React.JSX.Element;
-export declare const Crud: () => React.JSX.Element;
-export declare const CrudWithoutPagination: () => React.JSX.Element;
-export declare const WithField: () => React.JSX.Element;
+export declare const Default: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Truncated: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Framed: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const StickyHeader: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Custom: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Empty: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NoHeader: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NoPagination: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Crud: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CrudWithoutPagination: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithField: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import type { CSSProperties } from 'react';
 import type { ColumnSpec, Data, Errors, PartialData } from './types';
+import type { Truncate } from '../table/styles';
 import { RowMode } from './types';
+export declare const withCellStyle: (style?: CSSProperties, padding?: CSSProperties["padding"], truncate?: Truncate) => React.CSSProperties | undefined;
 type NewRowProps<D extends Data> = {
     data: PartialData<D>;
     errors?: Errors<D>;
     columns: ColumnSpec<D>[];
+    cellPadding?: CSSProperties['padding'];
     onUpdate?(partial: Partial<Data>): void;
 };
 type StatefulRowProps<D extends Data> = {
@@ -13,8 +17,9 @@ type StatefulRowProps<D extends Data> = {
     errors?: Errors<D>;
     columns: ColumnSpec<D>[];
     isHidden?: boolean;
+    cellPadding?: CSSProperties['padding'];
     onUpdate?(partial: Partial<Data>): void;
 };
-export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate, isHidden }: StatefulRowProps<D>) => React.JSX.Element;
-export declare const NewRow: <D extends Data>({ data, columns, errors, onUpdate }: NewRowProps<D>) => React.JSX.Element;
+export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate, isHidden, cellPadding }: StatefulRowProps<D>) => React.JSX.Element;
+export declare const NewRow: <D extends Data>({ data, columns, errors, onUpdate, cellPadding }: NewRowProps<D>) => React.JSX.Element;
 export {};

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

@@ -5,19 +5,29 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StatefulRow = exports.NewRow = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.withCellStyle = exports.StatefulRow = exports.NewRow = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 var _dateTime = _interopRequireDefault(require("../../inputs/date-time"));
 var _maskField = _interopRequireDefault(require("../../inputs/mask-field"));
 var _textField = _interopRequireDefault(require("../../inputs/text-field"));
+var _styles = require("../table/styles");
 var _types = require("./types");
 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; }
+var withCellStyle = exports.withCellStyle = function withCellStyle(style, padding, truncate) {
+  var clip = (0, _styles.truncateStyle)(truncate);
+  if (!clip && padding === undefined) {
+    return style;
+  }
+  return _objectSpread(_objectSpread({}, clip), {}, {
+    padding: padding
+  }, style);
+};
 var isEditable = function isEditable(column) {
   return column.type === 'actions' || column.editable;
 };
@@ -130,7 +140,8 @@ var StatefulRow = exports.StatefulRow = function StatefulRow(_ref) {
     errors = _ref.errors,
     columns = _ref.columns,
     onUpdate = _ref.onUpdate,
-    isHidden = _ref.isHidden;
+    isHidden = _ref.isHidden,
+    cellPadding = _ref.cellPadding;
   var _useState = (0, _react.useState)(function () {
       return data;
     }),
@@ -158,7 +169,7 @@ var StatefulRow = exports.StatefulRow = function StatefulRow(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
       align: column.align,
       key: "".concat(column.title, "-").concat(i),
-      style: column.cellStyle
+      style: withCellStyle(column.cellStyle, cellPadding, column.truncate)
     }, getCorrectViewMode(column, mode, isEditable(column)));
   }));
 };
@@ -166,7 +177,8 @@ var NewRow = exports.NewRow = function NewRow(_ref2) {
   var data = _ref2.data,
     columns = _ref2.columns,
     errors = _ref2.errors,
-    onUpdate = _ref2.onUpdate;
+    onUpdate = _ref2.onUpdate,
+    cellPadding = _ref2.cellPadding;
   var _useState3 = (0, _react.useState)(function () {
       return data;
     }),
@@ -183,7 +195,7 @@ var NewRow = exports.NewRow = function NewRow(_ref2) {
     "data-testid": "table-row"
   }, columns.map(function (column, i) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
-      style: column.cellStyle,
+      style: withCellStyle(column.cellStyle, cellPadding, column.truncate),
       align: column.align,
       key: "".concat(column.title, "-").concat(i)
     }, isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors, true) : renderViewMode(column, editableState));

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

@@ -11,6 +11,6 @@ export declare const TableCellRows: import("@emotion/styled").StyledComponent<im
 }, {}, {}>;
 export declare const RowTable: import("@emotion/styled").StyledComponent<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | 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<HTMLTableRowElement> | null | undefined;
-}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover"> & {
+}, "children" | "className" | "style" | "classes" | "sx" | "selected" | "hover"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,4 +1,5 @@
 import type { CSSProperties, FunctionComponent } from 'react';
+import type { Truncate } from '../table/styles';
 import type { IOption } from '@/core/inputs/text-field';
 export type RecordUnknown = Record<string, unknown>;
 export type StackView = RecordUnknown;
@@ -17,6 +18,7 @@ type ColumnSpecBase<F = object> = {
     cellStyle?: CSSProperties;
     headerStyle?: CSSProperties;
     align?: Align;
+    truncate?: Truncate;
     renderCell?: FunctionComponent<F>;
 };
 export type RenderCellProps<D extends Data> = {

package/core/data-display/list-item-dark/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Typography2 = _interopRequireDefault(require("@mui/material/Typography"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _typography = _interopRequireDefault(require("../typography"));
 var _tooltip = _interopRequireDefault(require("../../feedback/tooltip"));
 var _styles = require("./styles");
 var _excluded = ["id", "name", "href", "icon", "title", "dense", "actions", "selected", "disabled", "className", "expanded", "onClick"];
@@ -59,10 +59,9 @@ var ListItemDark = function ListItemDark(_ref) {
   }, icon), (title || actions) && /*#__PURE__*/_react["default"].createElement(_styles.ItemLabel, {
     expanded: expanded,
     "aria-hidden": !expanded
-  }, title && /*#__PURE__*/_react["default"].createElement(_Typography2["default"], {
+  }, title && /*#__PURE__*/_react["default"].createElement(_typography["default"], {
     flex: "1 0 0",
-    variant: "body2",
-    fontSize: "13.5px",
+    variant: "dense",
     fontWeight: selected ? 500 : 400,
     sx: {
       minWidth: 0,

package/core/data-display/list-item-dark/styles.d.ts

@@ -15,7 +15,7 @@ export declare const ItemLabel: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ItemButton: import("@emotion/styled").StyledComponent<import("@mui/material/ListItemButton").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "disabled" | "children" | "style" | "className" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "dense" | "selected" | "disableGutters" | "divider"> & {
+}, "children" | "action" | "alignItems" | "className" | "style" | "classes" | "sx" | "autoFocus" | "tabIndex" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "dense" | "divider" | "selected"> & {
     theme?: import("@emotion/react").Theme;
 } & IRootProps, {}, {}>;
 export declare const IconSlot: import("@emotion/styled").StyledComponent<{