flipper-ui 0.26.0 → 0.26.6

package/{dist/core → core}/Badge.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
 import type { DefaultProps } from './types';
-interface BadgeProps extends DefaultProps, MuiBadgeProps {
+export interface BadgeProps extends DefaultProps, MuiBadgeProps {
     max?: number;
     counter: number | string;
     position?: {

package/{dist/core → core}/Box.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import type { DefaultProps } from './types';
-interface BoxProps extends DefaultProps {
+export interface BoxProps extends DefaultProps {
     minHeight?: number;
 }
 declare const Box: FC<BoxProps>;

package/{dist/core → core}/Chapter.js

@@ -17,7 +17,7 @@ var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "var
 var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    --color: ", ";\n    flex: 1;\n    min-height: .75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: var(--color);\n"])), function (props) {
+var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    --color: ", ";\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: var(--color);\n"])), function (props) {
   return props.primary ? _colors.primary.normal : _colors.background.normal;
 });
 var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & hr:first-child {\n        margin-right: 10px;\n    }\n\n    & hr:last-child {\n        margin-left: 10px;\n    }\n"])));

package/{dist/core → core}/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactNode } from 'react';
 import { DefaultProps } from './types';
-interface CheckboxProps extends DefaultProps {
+export interface CheckboxProps extends DefaultProps {
     name: string;
     label?: ReactNode;
     color?: 'primary' | 'secondary' | 'default';

package/{dist/core → core}/Chip.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { DefaultProps } from './types';
 import { ChipProps } from '@material-ui/core/Chip';
-interface IChipProps extends DefaultProps {
+export interface IChipProps extends DefaultProps {
     square?: boolean;
 }
 declare const Chip: FC<ChipProps & IChipProps>;

package/{dist/core → core}/ChipField.js

@@ -22,6 +22,7 @@ var ChipField = function ChipField(props) {
     });
   }, [props.values]);
   return /*#__PURE__*/_react["default"].createElement(StyledChipInput, (0, _extends2["default"])({}, props, {
+    id: "chip-field-root",
     alwaysShowPlaceholder: true,
     value: values
   }));

package/{dist/core → core}/DataTable/DataTablePaginationActions.js

@@ -11,8 +11,6 @@ var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"))
 var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
 var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-/* eslint-disable @typescript-eslint/interface-name-prefix */
-
 var PAGINATION_WRAPPER_STYLE = {
   display: 'flex',
   marginLeft: '12px'

package/{dist/core → core}/DataTable/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, FunctionComponent } from 'react';
-declare type RecordUnknown = Record<string, unknown>;
+export declare type RecordUnknown = Record<string, unknown>;
 export declare type StackView = RecordUnknown;
 export declare type Identifier = string | number;
 export interface Data extends RecordUnknown {

package/{dist/core → core}/DataTable/types.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowMode = void 0;
-/* eslint-disable @typescript-eslint/interface-name-prefix */
 var RowMode;
 exports.RowMode = RowMode;
 (function (RowMode) {

package/{dist/core → core}/DataTable/usePaginated.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { Data } from './types';
 export interface IDataProps {
     id: string;
     product: string;
@@ -5,14 +7,15 @@ export interface IDataProps {
     quantity: number;
     date: Date;
 }
-export declare const generateRandomDate: (size: number) => IDataProps[];
+export declare const generateRandomDate: (size: number) => Data[];
 export declare const usePaginated: () => {
-    data: IDataProps[];
-    setData: (data: any) => void;
+    data: Data[];
+    setData: import("react").Dispatch<import("react").SetStateAction<Data[]>>;
     totalElements: number;
     actualPage: number;
     size: number;
     handleChangePage: (newPage: number) => void;
     handleChangePerPage: (value: number) => void;
     loading: boolean;
+    mockData: Data[];
 };

package/{dist/core → core}/DataTable/usePaginated.js

@@ -10,14 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _faker = _interopRequireDefault(require("faker"));
 var _splitEvery = _interopRequireDefault(require("ramda/es/splitEvery"));
 var _react = require("react");
-var _uuid = require("uuid");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var generateRandomDate = function generateRandomDate(size) {
   var content = [];
   for (var i = 0; i < size; i++) {
     content.push({
-      id: (0, _uuid.v4)(),
+      id: i,
       product: _faker["default"].vehicle.model(),
       price: _faker["default"].datatype["float"]({
         min: 0,
@@ -127,7 +126,8 @@ var usePaginated = function usePaginated() {
     size: state.size,
     handleChangePage: handleChangePage,
     handleChangePerPage: handleChangePerPage,
-    loading: loading
+    loading: loading,
+    mockData: mockData
   };
 };
 exports.usePaginated = usePaginated;

package/{dist/core → core}/DateTime.js

@@ -54,7 +54,7 @@ var DateTime = function DateTime(_ref) {
       padding: padding
     }, style),
     inputProps: _objectSpread({
-      autocomplete: 'off'
+      autoComplete: 'off'
     }, otherProps.inputProps),
     InputAdornmentProps: _objectSpread({
       style: {

package/{dist/core → core}/EditableTable.js

@@ -51,7 +51,7 @@ var CustomRemove = (0, _styledComponents["default"])(_materialTable.MTableEditRo
     }
   }
 });
-var CustomRows = (0, _styledComponents["default"])(_materialTable.MTableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    transition: opacity 200ms ease;\n    button {\n        display: none;\n    };\n    &:hover {\n        background: -moz-linear-gradient(left,", " 0%, ", " 100%);\n        background: -webkit-linear-gradient(left,", " 0%,", " 100%);\n        background: linear-gradient(to right,", " 0%,", " 100%);\n    };\n    &:hover button {\n        display: inline-block !important;\n    };\n    td {\n        min-width: 64px;\n    };\n"])), _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY);
+var CustomRows = (0, _styledComponents["default"])(_materialTable.MTableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    transition: opacity 200ms ease;\n    button {\n        display: none;\n    }\n    &:hover {\n        background: -moz-linear-gradient(left, ", " 0%, ", " 100%);\n        background: -webkit-linear-gradient(left, ", " 0%, ", " 100%);\n        background: linear-gradient(to right, ", " 0%, ", " 100%);\n    }\n    &:hover button {\n        display: inline-block !important;\n    }\n    td {\n        min-width: 64px;\n    }\n"])), _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY);
 var RightPagination = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        display: block;\n        float: right;\n    }\n"])));
 var Wrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        justify-content: flex-end;\n    }\n"])));
 var EditableTable = function EditableTable(props) {

package/{dist/core → core}/ExpansionPanel.d.ts

@@ -14,7 +14,7 @@ interface ExpansionPanelProps extends PaperProps {
     helperIcon?: React.ReactNode;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
-    onChange?: (event?: any, expanded?: any) => void;
+    onChange?: (event?: React.ChangeEvent<{}>, expanded?: boolean) => void;
 }
 declare const ExpansionPanel: FC<ExpansionPanelProps>;
 export default ExpansionPanel;

package/{dist/core → core}/ExpansionPanel.js

@@ -20,7 +20,7 @@ var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 ExpansionPanel = function ExpansionPanel(_ref) {
   var actions = _ref.actions,
     details = _ref.details,

package/{dist/core → core}/Header.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { PaperProps } from './Paper';
-interface HeaderProps extends PaperProps {
+export interface HeaderProps extends PaperProps {
     position?: 'absolute' | 'fixed' | 'static' | 'sticky';
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
 }

package/{dist/core → core}/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { FC, MouseEvent } from 'react';
 import { DefaultProps } from './types';
-interface IconButtonProps extends DefaultProps {
+export interface IconButtonProps extends DefaultProps {
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
     disabled?: boolean;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;

package/{dist/core → core}/Line.js

@@ -16,7 +16,7 @@ var _excluded = ["padding", "margin", "style"];
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    border: 1px solid ", ";\n"])), function (props) {
+var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    border: 1px solid\n        ", ";\n"])), function (props) {
   return props.primary ? _colors.primary.normal : _colors.background.normal;
 });
 var Line = function Line(_ref) {

package/{dist/core → core}/MaskField.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { TextFieldProps } from './TextField';
-interface MaskFieldProps {
+export interface MaskFieldProps {
     mask?: string;
     type?: 'text' | 'tel' | 'password';
     decimalSeparator?: string;

package/{dist/core → core}/Node.d.ts

@@ -7,7 +7,7 @@ interface IState {
     open: boolean;
 }
 declare class Node extends Component<NodeProps, IState> {
-    constructor(props: any);
+    constructor(props: NodeProps);
     handleToggleOpen(): void;
     renderDropdownIcon(): JSX.Element;
     render(): JSX.Element;

package/{dist/core → core}/Pagination.d.ts

@@ -1,11 +1,11 @@
 import { Component } from 'react';
 import { DefaultProps } from './types';
-interface PaginationProps extends DefaultProps {
+export interface PaginationProps extends DefaultProps {
     pages?: number;
     active: number;
-    onNext: () => {};
-    onPrevious: () => {};
-    onNavigate: (page: any) => {};
+    onNext: () => void;
+    onPrevious: () => void;
+    onNavigate: (page: number) => void;
 }
 declare class Pagination extends Component<PaginationProps, {}> {
     render(): JSX.Element;

package/{dist/core → core}/Pagination.js

@@ -55,18 +55,21 @@ var Pagination = /*#__PURE__*/function (_Component) {
           margin: margin
         }, style)
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        id: "prev-page-button",
         size: "small",
         onClick: this.props.onPrevious
       }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), allPages.map(function (page) {
         return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           size: "small",
           key: page,
+          id: "pagination-page-".concat(page),
           color: page === active ? 'primary' : 'default',
           onClick: function onClick() {
             return _this.props.onNavigate(page);
           }
         }, page);
       }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        id: "next-page-button",
         size: "small",
         onClick: this.props.onNext
       }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)));

package/{dist/core → core}/PinInput.js

@@ -105,7 +105,7 @@ var PinInput = function PinInput(_ref) {
       onPinChanged(undefined, index);
     }
   };
-  var useStyleProps = function useStyleProps() {
+  var getStyleProps = function getStyleProps() {
     var style = _objectSpread({
       width: size === 'small' ? '40px' : '40px',
       height: size === 'small' ? '30px' : '40px',
@@ -113,7 +113,7 @@ var PinInput = function PinInput(_ref) {
     }, styleProps);
     return style;
   };
-  var useInputProps = function useInputProps() {
+  var getInputProps = function getInputProps() {
     var style = _objectSpread({
       width: size === 'small' ? '40px' : '45px',
       textAlign: 'center',
@@ -123,7 +123,7 @@ var PinInput = function PinInput(_ref) {
     }, inputProps);
     return style;
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
+  return /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
     length: pinLength
   }, function (_, index) {
     return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
@@ -134,10 +134,11 @@ var PinInput = function PinInput(_ref) {
       },
       onPaste: onPaste,
       color: "primary",
+      className: "pin-input-field",
       error: validationResult,
-      style: useStyleProps(),
+      style: getStyleProps(),
       InputProps: {
-        style: useInputProps()
+        style: getInputProps()
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;
@@ -148,7 +149,7 @@ var PinInput = function PinInput(_ref) {
       },
       value: pin[index] === 0 ? 0 : pin[index] || ''
     });
-  })));
+  }));
 };
 var _default = PinInput;
 exports["default"] = _default;

package/{dist/core → core}/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { DefaultProps } from './types';
 import { ButtonProps } from './Button';
-interface SidebarProps extends DefaultProps {
+export interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;
     showButton?: boolean;

package/{dist/core → core}/Sidebar.js

@@ -24,12 +24,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       '&:active': {
         boxShadow: 'none'
       },
-      'alignSelf': 'right',
-      'backgroundColor': 'transparent',
-      'boxShadow': 'none',
-      'maxWidth': 'inherit',
-      'minWidth': 'auto',
-      'width': '100%'
+      alignSelf: 'right',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      maxWidth: 'inherit',
+      minWidth: 'auto',
+      width: '100%'
     },
     "default": {
       backgroundColor: theme.palette.background["default"],

package/{dist/core → core}/Slider.d.ts

@@ -4,5 +4,6 @@ import { DefaultProps } from './types';
 interface ISliderProps {
     defaultValue?: number | number[];
 }
-declare const Slider: FC<Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps>;
+export declare type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
+declare const Slider: FC<FlipperSliderProps>;
 export default Slider;

package/{dist/core → core}/Snackbar.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, FC, FunctionComponent } from 'react';
 import { DefaultProps } from './types';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
-interface SnackBarProps extends DefaultProps {
+export interface SnackBarProps extends DefaultProps {
     autoHide?: number;
     message: ReactNode;
     open: boolean;

package/{dist/core → core}/Stepper.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { DefaultProps } from './types';
-interface StepperProps extends DefaultProps {
+export interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;
     bottomLabel?: boolean;