flipper-ui 0.24.12 → 0.25.2

package/core/TextField.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, KeyboardEvent, FC, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { IDefault } from './Advertise';
-export interface IProps extends IDefault {
+import { DefaultProps } from './types';
+export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
     defaultValue?: string | number;
@@ -26,18 +26,20 @@ export interface IProps extends IDefault {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    hasClear?: boolean;
+    onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: KeyboardEvent) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
 }
-declare type TProps = IProps;
-interface IHelperProps extends Pick<TProps, 'helperIcon'> {
+interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
-declare const TextField: FC<TProps>;
+declare const TextField: FC<TextFieldProps>;
 export default TextField;

package/core/TextField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.HelperBox = exports.TextFieldWrapper = exports.useStyles = void 0;
+exports["default"] = exports.HelperBox = exports.useStyles = exports.StaticTextFieldWrapper = exports.TextFieldWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,15 +15,21 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 var _styles = require("@material-ui/core/styles");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
+
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
 
-var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _IconButton2 = _interopRequireDefault(require("./IconButton"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -31,8 +37,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;  \n    }\n    :hover button {\n        display: flex;\n    }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -51,6 +67,15 @@ function _templateObject() {
   return data;
 }
 
+var Helper = _styledComponents["default"].div(_templateObject());
+
+var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
+
+exports.TextFieldWrapper = TextFieldWrapper;
+
+var StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject3());
+
+exports.StaticTextFieldWrapper = StaticTextFieldWrapper;
 var useStyles = (0, _styles.makeStyles)({
   input: {
     fontSize: '14px',
@@ -75,14 +100,8 @@ var useStyles = (0, _styles.makeStyles)({
 });
 exports.useStyles = useStyles;
 
-var Helper = _styledComponents["default"].div(_templateObject());
-
-var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
-
-exports.TextFieldWrapper = TextFieldWrapper;
-
 var HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_Help["default"], {
@@ -92,6 +111,19 @@ var HelperBox = function HelperBox(props) {
 
 exports.HelperBox = HelperBox;
 
+var renderEndAdornment = function renderEndAdornment(onClear) {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+    position: "end"
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClear,
+    size: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
+    style: {
+      fontSize: '15px'
+    }
+  })));
+};
+
 var TextField = function TextField(_ref) {
   var margin = _ref.margin,
       padding = _ref.padding,
@@ -111,8 +143,22 @@ var TextField = function TextField(_ref) {
       onHelperClick = _ref.onHelperClick,
       helperIcon = _ref.helperIcon,
       fullWidth = _ref.fullWidth,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth"]);
+      hasClear = _ref.hasClear,
+      onClear = _ref.onClear,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"]);
+  var clearStyle = (0, _styles.makeStyles)({
+    iconOutlined: {
+      position: 'relative',
+      right: '2px',
+      marginLeft: '-20px'
+    }
+  });
+  var hasValue = !!otherProps.value;
+  var endAdornment = hasValue && hasClear ? {
+    endAdornment: renderEndAdornment(onClear)
+  } : {};
   var classes = useStyles();
+  var clearClass = clearStyle();
 
   var handleClick = function handleClick() {
     if (onHelperClick) {
@@ -120,7 +166,8 @@ var TextField = function TextField(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(TextFieldWrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+  var Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     fullWidth: fullWidth,
     autoComplete: autoComplete,
     error: error,
@@ -140,11 +187,11 @@ var TextField = function TextField(_ref) {
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
       }
     }, InputProps),
-    SelectProps: _objectSpread({
+    SelectProps: _objectSpread(_objectSpread({
       classes: {
-        iconOutlined: classes.iconOutlined
+        iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
-    }, SelectProps)
+    }, endAdornment), SelectProps)
   }, otherProps)), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick

package/core/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
-interface IProps {
+interface ThemeProviderProps {
     options?: ThemeOptions;
 }
-declare const ThemeProvider: FC<IProps>;
+declare const ThemeProvider: FC<ThemeProviderProps>;
 export default ThemeProvider;

package/core/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement, CSSProperties } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface TooltipProps extends DefaultProps {
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
     title: React.ReactNode;
     withWrapper?: boolean;
@@ -11,5 +11,5 @@ interface IProps extends IDefault {
     children: ReactElement<{}>;
     enterDelay?: number;
 }
-declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: IProps) => JSX.Element;
+declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: TooltipProps) => JSX.Element;
 export default Tooltip;

package/core/Tree.d.ts

@@ -4,10 +4,10 @@ interface INode {
     name: string;
     nodes?: INode[];
 }
-interface IProps {
+interface TreeProps {
     nodes?: INode[];
 }
-declare class Tree extends Component<IProps, {}> {
+declare class Tree extends Component<TreeProps, {}> {
     renderNode(node: any, index: any, root?: boolean): JSX.Element;
     render(): JSX.Element[];
 }

package/core/Typography.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { TypographyProps } from '@material-ui/core/Typography';
-declare const Typography: FC<TypographyProps & IDefault>;
+declare const Typography: FC<TypographyProps & DefaultProps>;
 export default Typography;

package/core/Zoom.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface ZoomProps extends DefaultProps {
     in: boolean;
     timeout?: number | {
         enter?: number;
@@ -8,5 +8,5 @@ interface IProps extends IDefault {
     };
     children?: React.ReactElement<{}>;
 }
-declare const Zoom: ({ children, padding, margin, style, ...otherProps }: IProps) => JSX.Element;
+declare const Zoom: ({ children, padding, margin, style, ...otherProps }: ZoomProps) => JSX.Element;
 export default Zoom;

package/core/types.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+export interface DefaultProps {
+    style?: CSSProperties;
+    className?: string;
+    margin?: number | string;
+    padding?: number | string;
+    name?: string;
+    id?: string;
+}

package/core/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,81 +1,86 @@
 {
-  "name": "flipper-ui",
-  "version": "0.24.12",
-  "description": "",
-  "main": "dist/index.js",
-  "homepage": "https://flipper-ui.vercel.app",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nginformatica/flipper-ui.git"
-  },
-  "scripts": {
-    "test": "jest --coverage",
-    "start": "yarn docz dev",
-    "build": "yarn build:ts && yarn build:babel",
-    "build:ts": "tsc --emitDeclarationOnly",
-    "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\"",
-    "lint": "eslint -c .eslintrc.json 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint -c .eslintrc.json --fix 'src/**/*.{ts,tsx}'",
-    "predeploy": "yarn build && docz build",
-    "docz:build": "docz build",
-    "type-check": "tsc --noEmit",
-    "deploy": "gh-pages -d docs",
-    "release": "yarn build && node pre-publish.js && npm publish dist --access public"
-  },
-  "author": "NG Informática",
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "1.3.6",
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.54",
-    "@material-ui/pickers": "3.2.6",
-    "date-fns": "2.4.1",
-    "material-table": "1.69.3",
-    "material-ui-chip-input": "2.0.0-beta.2",
-    "ramda": "0.25.0",
-    "react-number-format": "4.4.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.10.0",
-    "@babel/core": "7.9.0",
-    "@babel/plugin-transform-runtime": "7.9.0",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.0",
-    "@babel/preset-typescript": "7.9.0",
-    "@testing-library/react": "9.3.2",
-    "@types/jest": "24.0.22",
-    "@types/node": "10.9.4",
-    "@types/ramda": "0.25.36",
-    "@types/react": "16.8.18",
-    "@types/styled-components": "4.4.2",
-    "@typescript-eslint/eslint-plugin": "1.6.0",
-    "@typescript-eslint/parser": "1.6.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-imports": "2.0.0",
-    "docz": "1.3.2",
-    "docz-theme-default": "1.2.0",
-    "eslint": "5.16.0",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-prefer-arrow": "1.1.5",
-    "eslint-plugin-ramda": "2.5.1",
-    "eslint-plugin-react": "7.12.4",
-    "fs-extra": "7.0.0",
-    "gh-pages": "2.0.0",
-    "jest": "24.9.0",
-    "node-fetch": "2.6.1",
-    "prettier": "1.16.4",
-    "styled-components": "5.0.0",
-    "typescript": "3.9.5"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^5.0.0"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ]
-  }
+    "name": "flipper-ui",
+    "version": "0.25.2",
+    "description": "",
+    "main": "dist/index.js",
+    "homepage": "https://flipper-ui.vercel.app",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/nginformatica/flipper-ui.git"
+    },
+    "scripts": {
+        "test": "jest --coverage",
+        "start": "start-storybook -p 6006",
+        "build": "yarn build:ts && yarn build:babel",
+        "build:ts": "tsc --emitDeclarationOnly",
+        "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\"",
+        "lint": "eslint -c .eslintrc.json 'src/**/*.{ts,tsx}'",
+        "lint:fix": "eslint -c .eslintrc.json --fix 'src/**/*.{ts,tsx}'",
+        "predeploy": "yarn build && yarn storybook:build",
+        "docs:build": "build-storybook -o docs",
+        "type-check": "tsc --noEmit",
+        "deploy": "gh-pages -d docs",
+        "release": "yarn build && node pre-publish.js && npm publish dist --access public"
+    },
+    "author": "NG Informática",
+    "license": "MIT",
+    "dependencies": {
+        "@date-io/date-fns": "1.3.6",
+        "@material-ui/core": "4.11.0",
+        "@material-ui/icons": "4.9.1",
+        "@material-ui/lab": "4.0.0-alpha.54",
+        "@material-ui/pickers": "3.2.6",
+        "date-fns": "2.4.1",
+        "material-table": "1.69.3",
+        "material-ui-chip-input": "2.0.0-beta.2",
+        "ramda": "0.25.0",
+        "react-number-format": "4.4.1"
+    },
+    "devDependencies": {
+        "@babel/cli": "7.10.0",
+        "@babel/core": "7.9.0",
+        "@babel/plugin-transform-runtime": "7.9.0",
+        "@babel/preset-env": "7.9.0",
+        "@babel/preset-react": "7.9.0",
+        "@babel/preset-typescript": "7.9.0",
+        "@storybook/addon-actions": "6.3.12",
+        "@storybook/addon-essentials": "6.3.12",
+        "@storybook/addon-links": "6.3.12",
+        "@storybook/react": "6.3.12",
+        "@testing-library/react": "9.3.2",
+        "@types/jest": "24.0.22",
+        "@types/node": "10.9.4",
+        "@types/ramda": "0.25.36",
+        "@types/react": "16.8.18",
+        "@types/styled-components": "4.4.2",
+        "@typescript-eslint/eslint-plugin": "1.6.0",
+        "@typescript-eslint/parser": "1.6.0",
+        "babel-loader": "8.2.3",
+        "babel-plugin-transform-class-properties": "6.24.1",
+        "babel-plugin-transform-imports": "2.0.0",
+        "eslint": "5.16.0",
+        "eslint-config-prettier": "4.1.0",
+        "eslint-plugin-import": "2.16.0",
+        "eslint-plugin-prefer-arrow": "1.1.5",
+        "eslint-plugin-ramda": "2.5.1",
+        "eslint-plugin-react": "7.12.4",
+        "fs-extra": "7.0.0",
+        "gh-pages": "2.0.0",
+        "jest": "24.9.0",
+        "node-fetch": "2.6.1",
+        "prettier": "1.16.4",
+        "react": "16.14.0",
+        "react-dom": "16.14.0",
+        "styled-components": "5.0.0",
+        "typescript": "3.9.5"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0",
+        "styled-components": "^5.0.0"
+    },
+    "jest": {
+        "setupFilesAfterEnv": [
+            "<rootDir>/src/setupTests.js"
+        ]
+    }
 }

package/stories/Advertise.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Advertise = _interopRequireDefault(require("../core/Advertise"));
+
+var _default = {
+  title: 'Advertise',
+  component: _Advertise["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Advertise["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  comment: 'Be like water. You put water into a cup. \
+        It becomes the cup. You put water into a bottle. It becomes the bottle.',
+  author: 'Bruce Lee',
+  children: 'Advertise'
+};

package/stories/AutoComplete.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSubheader = exports.OpeningWhenFocused = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("../core/AutoComplete"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _default = {
+  title: 'AutoComplete',
+  component: _AutoComplete["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  suggestions: [{
+    value: 'rock',
+    label: 'Rock'
+  }, {
+    value: 'pop',
+    label: 'Pop'
+  }, {
+    value: 'classic',
+    label: 'Classic'
+  }],
+  renderInput: function renderInput(props) {
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+      fullWidth: true,
+      placeholder: "Music genres"
+    }, props));
+  },
+  renderSuggestion: function renderSuggestion(item, props, selected) {
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+      key: item,
+      selected: selected
+    }, props), item.label);
+  },
+  onChange: function onChange() {
+    return null;
+  }
+};
+
+var OpeningWhenFocused = function OpeningWhenFocused() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    value: {
+      value: 'classic',
+      label: 'Classic'
+    },
+    suggestions: [{
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+        selected: selected
+      }, props), item.label);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.OpeningWhenFocused = OpeningWhenFocused;
+
+var WithSubheader = function WithSubheader() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    suggestions: [{
+      label: 'Genres',
+      subheader: true
+    }, {
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return item.subheader ? /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "caption"
+      }, item.label)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({}, props, {
+        selected: selected
+      }), item.label || item);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.WithSubheader = WithSubheader;