@codacy/ui-components 0.65.93 → 0.66.0

package/lib/InlineMessage/types.d.ts

@@ -3,7 +3,7 @@ import { ParagraphProps } from '../Typography/Typography.types';
 import { SpaceProps } from '../system-props/types';
 import { ContainerComponentProps } from '../types';
 export declare type InlineMessageStatus = 'success' | 'info' | 'warning' | 'error';
-export interface InlineMessageProps extends ContainerComponentProps, SpaceProps, ParagraphProps {
+export interface InlineMessageProps extends ContainerComponentProps, SpaceProps, Pick<ParagraphProps, 'size'> {
     /** Status of message */
     status: InlineMessageStatus;
     toRight?: boolean;

package/lib/Input/Input.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
@@ -31,7 +30,7 @@ var InputIcon = function InputIcon(_ref) {
     onClick: onClick,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       icon: icon,
-      color: "icon-enabled"
+      color: "input-icon-enabled"
     })
   });
 };
@@ -72,17 +71,11 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
     max = _ref2.max,
     step = _ref2.step,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
   var handleFocus = (0, _react.useCallback)(function (event) {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   }, [onFocus]);
   var handleBlur = (0, _react.useCallback)(function (event) {
-    setIsFocused(false);
-    if (onBlur) onBlur(event);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [onBlur]);
   var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContainer, {
@@ -101,7 +94,6 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
         "aria-describedby": id && "help-".concat(id),
         "aria-errormessage": id && "error-".concat(id),
         hasError: hasError,
-        hasSuccess: isFocused && hasSuccess,
         hasLeftIcon: !!leftIcon,
         hasRightIcon: !!rightIcon,
         hasClearButton: showClearButton,
@@ -119,20 +111,15 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             icon: _Icons.SpinnerIcon,
             spin: true,
-            color: "icon-enabled",
+            color: "input-icon-enabled",
             title: "spinner-icon"
           })
-        }), !isLoading && (hasError || hasSuccess && isFocused) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightIcon, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-            icon: hasSuccess ? _Icons.SuccessIcon : _Icons.ErrorIcon,
-            title: hasSuccess ? 'check-icon' : 'error-icon'
-          })
         }), showClearButton && !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightIcon, {
           isClickable: true,
           onClick: onClear,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             icon: _Icons.CloseIcon,
-            color: "icon-enabled",
+            color: "input-icon-enabled",
             title: "close-icon"
           })
         }), !!rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputIcon, {
@@ -147,6 +134,7 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
       })]
     }), help && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputHelp, {
       id: "help-".concat(id),
+      disabled: disabled,
       children: help
     }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputErrorMessage, {
       id: "error-".concat(id),

package/lib/Input/styles.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { InputProps } from './types';
+export declare const getState: (hasError?: boolean, disabled?: boolean, state?: 'focus' | 'hover' | 'enabled') => "error" | "focus" | "disabled" | "enabled" | "hover";
 export declare const InputElement: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<InputProps, "disabled" | "readOnly" | "isLoading" | "hasError" | "hasSuccess"> & {
+} & Pick<InputProps, "disabled" | "readOnly" | "isLoading" | "hasError"> & {
     hasLeftIcon: boolean;
     hasRightIcon: boolean;
     hasClearButton: boolean;
@@ -11,20 +12,24 @@ export declare const InputElement: import("@emotion/styled").StyledComponent<{
 export declare const InputHelp: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Record<string, unknown> & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & {
+    disabled?: boolean | undefined;
+} & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const InputErrorMessage: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Record<string, unknown> & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & {
+    disabled?: boolean | undefined;
+} & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+} & Record<string, unknown>, {}, {}>;
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("..").FlexboxProps & import("..").GridboxProps & Pick<InputProps, "size">, {}, {}>;
@@ -36,7 +41,7 @@ export declare const LeftIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("..").FlexboxProps & {
@@ -46,7 +51,7 @@ export declare const RightIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("..").FlexboxProps & {
@@ -56,7 +61,7 @@ export declare const RightIcons: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("..").FlexboxProps, {}, {}>;