@codacy/ui-components 0.50.2 → 0.50.4

package/lib/Select/Select.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SelectProps } from './types';
-declare const StyledSelect: React.FC<SelectProps>;
-export { StyledSelect as Select };
+/** @deprecated Use Dropdown + SelectTrigger instead */
+export declare const Select: React.FC<SelectProps>;

package/lib/Select/Select.js

@@ -1,70 +1,41 @@
-import React from 'react';
-import Select, { components } from 'react-select';
-import { Labeled, Icon } from '../';
-import { InputWrapper, InputErrorMessage } from '../Input/styles';
-import { customStyles } from './style';
-import { ChevronDownIcon } from '../Icons';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useCallback } from 'react';
+import { Dropdown, DropdownItem, SelectTrigger } from '../';
 
-var CaretDownIcon = function CaretDownIcon() {
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: ChevronDownIcon,
-    size: "md"
-  });
-};
-
-var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(CaretDownIcon, null));
-};
-
-var StyledSelect = function StyledSelect(_ref) {
+/** @deprecated Use Dropdown + SelectTrigger instead */
+export var Select = function Select(_ref) {
   var options = _ref.options,
-      placeholder = _ref.placeholder,
-      _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-      name = _ref.name,
       id = _ref.id,
-      label = _ref.label,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      size = _ref.size,
-      _ref$hasError = _ref.hasError,
-      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-      errorMessage = _ref.errorMessage,
-      inputId = _ref.inputId,
       value = _ref.value,
-      _onChange = _ref.onChange;
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+      _onChange = _ref.onChange,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      portal = _ref.portal,
+      inputProps = _objectWithoutProperties(_ref, ["options", "id", "value", "onChange", "onOpen", "onClose", "portal"]);
+
+  var dropdownProps = {
+    onOpen: onOpen,
+    onClose: onClose,
+    portal: portal
+  };
+  var getLabel = useCallback(function (val) {
+    var value = val ? val : undefined;
+    return value ? value.label : '';
+  }, []);
+  return /*#__PURE__*/React.createElement(Dropdown, Object.assign({
     id: id,
-    inputId: inputId,
-    components: {
-      DropdownIndicator: DropdownIndicator
-    },
-    options: options,
-    styles: customStyles(hasError),
-    placeholder: placeholder,
-    isSearchable: isSearchable,
-    name: name,
-    maxMenuHeight: 230,
-    onChange: function onChange(value) {
-      return _onChange(value);
+    size: inputProps.size,
+    trigger: /*#__PURE__*/React.createElement(SelectTrigger, Object.assign({
+      id: id ? "".concat(id, "-input") : undefined,
+      caption: getLabel
+    }, inputProps)),
+    onChange: function onChange(val) {
+      return _onChange(val);
     },
-    value: value
-  }), hasError && /*#__PURE__*/React.createElement(InputErrorMessage, {
-    id: "error-".concat(id)
-  }, errorMessage));
-
-  if (!!label) {
-    return /*#__PURE__*/React.createElement(Labeled, {
-      forId: id,
-      label: label,
-      required: required,
-      size: size
-    }, content);
-  }
-
-  return /*#__PURE__*/React.createElement(InputWrapper, {
-    size: size
-  }, content);
-};
-
-export { StyledSelect as Select };
+    initialValue: value
+  }, dropdownProps), options.map(function (option) {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      value: option
+    }, option.label);
+  }));
+};

package/lib/Select/types.d.ts

@@ -1,20 +1,14 @@
-import { Size } from '../theme';
+import { DropdownProps } from '../Dropdown/Dropdown.types';
+import { SelectTriggerProps } from '../Dropdown/Triggers/types';
 export declare type SelectOption = {
     value: string;
     label: string;
 };
-export interface SelectProps {
+export interface SelectProps extends Pick<DropdownProps, 'onClose' | 'onOpen' | 'portal'>, Omit<SelectTriggerProps, 'value' | 'onChange' | 'caption'> {
     id?: string;
     inputId?: string;
     options: Array<SelectOption>;
-    placeholder: string;
-    isSearchable?: boolean;
     name: string;
-    label?: string;
-    required?: boolean;
-    size?: Size;
-    hasError?: boolean;
-    errorMessage?: string | null;
     value?: SelectOption;
     onChange: (value: SelectOption) => void;
 }

package/lib/Table/Table.js

@@ -141,9 +141,9 @@ var VirtualRow = function VirtualRow(_ref8) {
       props = _objectWithoutProperties(_ref8, ["children", "index", "height"]);
 
   var scrollCtx = useContext(ScrollableContentContext);
-  var top = (index + 1) *
+  var top = (index + 1
   /* +1 to acknowledge the header row */
-  height;
+  ) * height;
   var threshold = height / 2;
   var inViewport = top >= scrollCtx.scroll - threshold && top <= scrollCtx.scroll + scrollCtx.height + threshold;
   return /*#__PURE__*/React.createElement(StyledTableRow, Object.assign({}, props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.50.2",
+  "version": "0.50.4",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -28,29 +28,26 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled-base": "^10.0.31",
-    "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input#9820d2ae045d9398fbd3ba9021f675b127003237",
-    "@popperjs/core": "^2.5.4",
+    "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input",
     "@styled-system/should-forward-prop": "^5.1.5",
     "autosize": "^4.0.2",
     "emotion-theming": "10.x",
-    "lodash": "^4.17.20",
     "md5": "^2.3.0",
     "polished": "^3.6.7",
     "query-string": "^6.13.7",
     "react-popper": "^2.2.4",
-    "react-select": "3.1.0",
-    "react-spring": "^8.0.27",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
-    "@emotion/styled": "10.x",
-    "@storybook/addon-docs": "^6.3.8",
+    "@emotion/core": "^10.3.0",
+    "@emotion/styled": "^10.3.0",
+    "@emotion/styled-base": "^10.3.0",
+    "@popperjs/core": "^2.5.4",
+    "@storybook/addon-docs": "^6.4.9",
     "@storybook/addons": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@storybook/react": "^6.4.9",
     "@testing-library/dom": "^6.16.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^10.4.9",
@@ -61,7 +58,6 @@
     "@types/md5": "^2.2.1",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
-    "@types/react-select": "3.0.13",
     "@types/resize-observer-browser": "^0.1.6",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__should-forward-prop": "^5.1.2",
@@ -72,14 +68,14 @@
     "babel-plugin-emotion": "^10.0.33",
     "babel-preset-react-app": "^9.1.2",
     "copy-to-clipboard": "^3.3.1",
-    "depcheck": "^0.9.2",
+    "depcheck": "^1.4.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "^3.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mdx": "^1.8.2",
+    "eslint-plugin-mdx": "^1.16.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^1.7.0",
@@ -89,23 +85,28 @@
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-watch-typeahead": "^0.4.2",
     "lint-staged": "^9.5.0",
+    "lodash": "^4.17.20",
     "prettier": "^1.19.1",
     "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
     "react-toastify": "^8.0.2",
-    "reakit": "1.1.1",
+    "reakit": "^1.3.11",
     "rimraf": "^3.0.2",
     "typeface-clear-sans": "0.0.44",
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
-    "@emotion/styled": "10.x",
-    "react": ">=16.13",
-    "react-dom": ">=16.13",
-    "typeface-clear-sans": "0.0.44",
-    "reakit": "1.1.1",
-    "react-toastify": "^8.0.2"
+    "@emotion/core": "^10.3.0",
+    "@emotion/styled": "^10.3.0",
+    "@emotion/styled-base": "^10.3.0",
+    "@popperjs/core": "^2.5.4",
+    "lodash": "^4.17.20",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react-toastify": "^8.0.2",
+    "reakit": "^1.3.11",
+    "typeface-clear-sans": "0.0.44"
   },
   "husky": {
     "hooks": {

package/lib/Select/style.d.ts

@@ -1,2 +0,0 @@
-import { Styles } from 'react-select';
-export declare function customStyles(hasError: boolean): Partial<Styles>;

package/lib/Select/style.js

@@ -1,76 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { theme } from '../';
-import { rgba } from 'polished';
-export function customStyles(hasError) {
-  return {
-    option: function option(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: state.isSelected ? theme.colors['background-info'] : theme.colors['background-primary'],
-        color: theme.colors['text-secondary'],
-        fontSize: theme.fontSizes[2],
-        padding: "".concat(theme.space[1], " ").concat(theme.space[3]),
-        cursor: 'pointer',
-        ':hover': {
-          backgroundColor: !!!state.isSelected && theme.colors['background-secondary']
-        },
-        ':active, :focus': {
-          backgroundColor: theme.colors['background-info']
-        }
-      });
-    },
-    control: function control(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        height: '2rem',
-        minHeight: '2rem',
-        borderColor: state.menuIsOpen ? theme.colors['control-active-border'] : hasError ? theme.colors['control-invalid-border'] : theme.colors['control-border'],
-        ':hover': {
-          borderColor: hasError && !state.menuIsOpen ? theme.colors['control-invalid-border'] : theme.colors['control-active-border']
-        },
-        cursor: 'pointer',
-        boxShadow: 'none'
-      });
-    },
-    menu: function menu(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        border: theme.borderSize[0] + ' solid ' + theme.colors['brand-primary'],
-        boxShadow: '0 3px 6px ' + rgba(theme.colors['brand-primary'], 0.3),
-        marginTop: theme.space[1]
-      });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-      return {
-        display: 'none'
-      };
-    },
-    placeholder: function placeholder(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        overflow: 'hidden',
-        position: 'absolute',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: "calc(100% - ".concat(theme.space[3], ")"),
-        color: state.isFocused || state.isSelected ? theme.colors['text-secondary'] : theme.colors['text-placeholder']
-      });
-    },
-    valueContainer: function valueContainer(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        fontSize: theme.fontSizes[2],
-        padding: "0px ".concat(theme.space[3])
-      });
-    },
-    menuList: function menuList(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        borderRadius: '0.25rem'
-      });
-    },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        '&, :hover': {
-          color: theme.colors['brand-primary']
-        },
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        padding: "".concat(theme.space[1], " ").concat(theme.space[3])
-      });
-    }
-  };
-}