flipper-ui 0.39.4 → 0.39.6

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

@@ -27,8 +27,9 @@ export interface ITableInteractive extends Omit<TableProps, 'children'> {
     isCollapsible?: boolean;
     visibleColumns?: string[];
     columnsTemporary?: string[];
+    rowsPerPageOptions?: number[];
+    headerActions?: JSX.Element | undefined;
     valuesInvoices?: Record<string, unknown>[];
-    headerActions?: React.JSX.Element | undefined;
     onCancel?: () => void;
     onConfirm?: () => void;
     handleOpen?: () => void;
@@ -36,7 +37,7 @@ export interface ITableInteractive extends Omit<TableProps, 'children'> {
     setPage?: Dispatch<SetStateAction<number>>;
     setRowsPerPage?: Dispatch<SetStateAction<number>>;
     children?: (item: Record<string, unknown>) => ReactNode;
+    rowsContent: () => JSX.Element | JSX.Element[] | undefined;
     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

@@ -27,7 +27,7 @@ var Direction = exports.Direction = /*#__PURE__*/function (Direction) {
   return Direction;
 }({});
 var TableInteractive = exports.TableInteractive = function TableInteractive(props) {
-  var _props$rowsPerPage, _props$page, _props$rowsPerPage2;
+  var _props$rowsPerPage, _props$page, _props$rowsPerPage2, _props$rowsPerPageOpt;
   var handlePageCount = function handlePageCount() {
     if (props.valuesInvoices) {
       return Number(props.valuesInvoices.length);
@@ -74,7 +74,7 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     page: page,
     count: count,
     rowsPerPage: (_props$rowsPerPage2 = props.rowsPerPage) !== null && _props$rowsPerPage2 !== void 0 ? _props$rowsPerPage2 : 10,
-    rowsPerPageOptions: [10, 25, 50, 100],
+    rowsPerPageOptions: (_props$rowsPerPageOpt = props.rowsPerPageOptions) !== null && _props$rowsPerPageOpt !== void 0 ? _props$rowsPerPageOpt : [10, 25, 50, 100],
     ActionsComponent: _TablePaginationActions.TablePaginationActions,
     onPageChange: function onPageChange(_, page) {
       var _props$setPage;

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

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

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

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "generateHeader", {
     return _utils.generateHeader;
   }
 });
+Object.defineProperty(exports, "getDefaultColumns", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getDefaultColumns;
+  }
+});
 Object.defineProperty(exports, "getInitialColumns", {
   enumerable: true,
   get: function get() {

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

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

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

@@ -15,7 +15,5 @@ var ContentWrapper = exports.ContentWrapper = _styled["default"].div(_templateOb
 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        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';
+  return props.fixed ? props.width : 'none';
 });

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { ITableInteractive } from './TableInteractive';
 export declare const STORAGE_KEY = "visible-columns";
+export declare const getDefaultColumns: (columns: {
+    name: string;
+    show: boolean;
+}[]) => string[];
 export declare const getInitialColumns: (columns: {
     name: string;
     label: string;

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

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setVisibleColumns = exports.getVisibleColumns = exports.getOrderedVisibleColumns = exports.getInitialColumns = exports.generateHeader = exports.STORAGE_KEY = void 0;
+exports.setVisibleColumns = exports.getVisibleColumns = exports.getOrderedVisibleColumns = exports.getInitialColumns = exports.getDefaultColumns = exports.generateHeader = exports.STORAGE_KEY = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("./styles");
 var STORAGE_KEY = exports.STORAGE_KEY = 'visible-columns';
+var getDefaultColumns = exports.getDefaultColumns = function getDefaultColumns(columns) {
+  return columns.filter(function (col) {
+    return col.show;
+  }).map(function (col) {
+    return col.name;
+  });
+};
 var getInitialColumns = exports.getInitialColumns = function getInitialColumns(columns, key) {
   var stored = localStorage.getItem(STORAGE_KEY);
   if (stored) {
@@ -32,11 +39,11 @@ var setVisibleColumns = exports.setVisibleColumns = function setVisibleColumns(c
 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, {
-    fixed: fixed,
     name: header.name,
     sortable: sortable,
     width: header.width,
-    key: header.name + '-header'
+    key: header.name + '-header',
+    fixed: fixed ? 'fixed' : undefined
   }, header.label);
 };
 var getVisibleColumns = exports.getVisibleColumns = function getVisibleColumns(headers, visibleColumns) {

package/core/feedback/progress/index.d.ts

@@ -22,5 +22,5 @@ export interface IColors {
     barPrimaryColor?: string;
     barSecondaryColor?: string;
 }
-declare const Progress: ({ linear, style, margin, padding, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
+declare const Progress: ({ linear, style, margin, padding, valueBuffer, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
 export default Progress;

package/core/feedback/progress/index.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _excluded = ["linear", "style", "margin", "padding", "primaryColor", "barPrimaryColor", "barSecondaryColor"];
+var _excluded = ["linear", "style", "margin", "padding", "valueBuffer", "primaryColor", "barPrimaryColor", "barSecondaryColor"];
 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 Progress = function Progress(_ref) {
@@ -20,6 +20,7 @@ var Progress = function Progress(_ref) {
     style = _ref$style === void 0 ? {} : _ref$style,
     margin = _ref.margin,
     padding = _ref.padding,
+    valueBuffer = _ref.valueBuffer,
     primaryColor = _ref.primaryColor,
     barPrimaryColor = _ref.barPrimaryColor,
     barSecondaryColor = _ref.barSecondaryColor,
@@ -29,6 +30,7 @@ var Progress = function Progress(_ref) {
       margin: margin,
       padding: padding
     }, style),
+    valueBuffer: valueBuffer,
     sx: {
       backgroundColor: primaryColor,
       '.MuiLinearProgress-barColorPrimary': {

package/core/inputs/date-time/index.js

@@ -131,10 +131,10 @@ var CustomStaticDateTimePicker = function CustomStaticDateTimePicker(props) {
             minHeight: '160px',
             transition: 'min-height 200ms ease-in-out'
           },
-          '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-child(5))': {
+          '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-of-type(5))': {
             minHeight: '200px'
           },
-          '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-child(6))': {
+          '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-of-type(6))': {
             minHeight: '240px'
           }
         }
@@ -225,10 +225,10 @@ var DateTime = function DateTime(_ref) {
                 minHeight: '160px',
                 transition: 'min-height 200ms ease-in-out'
               },
-              '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-child(5))': {
+              '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-of-type(5))': {
                 minHeight: '200px'
               },
-              '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-child(6))': {
+              '& .MuiPickersSlideTransition-root:has(.MuiDayCalendar-monthContainer > :nth-of-type(6))': {
                 minHeight: '240px'
               }
             }

package/core/inputs/text-field/index.d.ts

@@ -49,7 +49,7 @@ export interface ITextFieldProps extends DefaultProps, Omit<TextFieldProps, 'mar
 }
 interface IHelperProps {
     helperIcon?: ReactNode;
-    onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onHelperClick: (event: MouseEvent) => void;
 }
 export declare const HelperBox: (props: IHelperProps) => React.JSX.Element;
 export declare const renderOptions: (options: ITextFieldProps["options"]) => React.JSX.Element[] | undefined;

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

@@ -20,11 +20,9 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _mui = require("../../../icons/mui");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _styles = require("./styles");
-var _theme = require("../../../theme");
 var _excluded = ["options", "size", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "onChange", "characters", "children"];
 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 primary = _theme.theme.colors.primary;
 var coerceComboOptions = function coerceComboOptions(input) {
   return (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
@@ -46,11 +44,12 @@ var toLispCase = function toLispCase(name) {
 var HelperBox = exports.HelperBox = function HelperBox(props) {
   return /*#__PURE__*/_react["default"].createElement(_styles.Helper, {
     role: "helper-box"
-  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    padding: "6px 2px",
-    onClick: props.onHelperClick
+  }, /*#__PURE__*/_react["default"].createElement(_styles.HelperButton, {
+    onClick: function onClick(e) {
+      return props.onHelperClick(e);
+    }
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_mui.IconHelp, {
-    htmlColor: primary.main
+    color: "primary"
   })));
 };
 

package/core/inputs/text-field/styles.d.ts

@@ -6,6 +6,10 @@ export declare const Helper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HelperButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextFieldWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -4,14 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.Helper = exports.CharactersCount = void 0;
+exports.Wrapper = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.HelperButton = exports.Helper = exports.CharactersCount = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("../../../theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var gray = _theme.theme.colors.gray;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _theme$colors = _theme.theme.colors,
+  gray = _theme$colors.gray,
+  primary = _theme$colors.primary;
 var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
-var Helper = exports.Helper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
-var TextFieldWrapper = exports.TextFieldWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n"])));
-var CharactersCount = exports.CharactersCount = _styled["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);
+var Helper = exports.Helper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n\n    display: flex;\n    align-items: center;\n"])));
+var HelperButton = exports.HelperButton = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    opacity: 0;\n    padding: 4px;\n    display: flex;\n    border-radius: 100px;\n    transition:\n        opacity 0.2s ease,\n        background-color 0.2s ease;\n\n    &:hover {\n        opacity: 1;\n        cursor: pointer;\n        background-color: ", "0a;\n    }\n"])), primary.main);
+var TextFieldWrapper = exports.TextFieldWrapper = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    button {\n        display: none;\n    }\n\n    :hover button {\n        display: flex;\n    }\n"])));
+var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styled["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n"])));
+var CharactersCount = exports.CharactersCount = _styled["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);

package/core/navigation/tab/index.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { TabOwnProps } from '@mui/material/Tab';
 interface TabProps extends Omit<DefaultProps, 'children'>, TabOwnProps {
     href?: string;
-    label?: string;
     value?: unknown;
     minWidth?: string;
     disabled?: boolean;
     disableRipple?: boolean;
+    label?: string | ReactNode;
     icon?: string | JSX.Element;
 }
 declare const Tab: ({ style, margin, disableRipple, padding, minWidth, href, ...otherProps }: TabProps) => React.JSX.Element;

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

@@ -25,11 +25,11 @@ var StepCardColumn = exports.StepCardColumn = _styled["default"].div(_templateOb
   return props.justifyContent;
 }, function (props) {
   if (props.justifyContent === 'start') {
-    return "\n                svg:first-child {\n                    margin-right: 40px;\n                }\n                ";
+    return "\n                svg:first-of-type {\n                    margin-right: 40px;\n                }\n                ";
   }
   return '';
 });
-var ListItemContainer = exports.ListItemContainer = _styled["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
-var TitleContainer = exports.TitleContainer = _styled["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
+var ListItemContainer = exports.ListItemContainer = _styled["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-of-type {\n        margin-right: 16px;\n    }\n"])));
+var TitleContainer = exports.TitleContainer = _styled["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-of-type {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
 var NormalProgressContainer = exports.NormalProgressContainer = _styled["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n"])));
 var NormalProgressContent = exports.NormalProgressContent = _styled["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.39.4",
+    "version": "0.39.6",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",