@bitrise/bitkit 11.1.4 → 11.2.1-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "11.1.4",
+  "version": "11.2.1-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Form/Input/Input.tsx

@@ -14,6 +14,7 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
+import { TypeColors } from '../../../Foundations/Colors/Colors';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
@@ -42,6 +43,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
   label?: ReactNode;
+  leftIconColor?: TypeColors;
   leftIconName?: TypeIconName;
   rightAddon?: ReactNode;
   rightAddonPlacement?: 'inside' | 'outside';
@@ -64,6 +66,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     isInvalid,
     isLoading,
     label,
+    leftIconColor,
     leftIconName,
     max,
     maxLength,
@@ -126,7 +129,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
       <InputWrapper {...inputWrapperProps}>
         {leftIconName && (
           <InputLeftElement margin="12px" pointerEvents="none">
-            <Icon name={leftIconName} />
+            <Icon color={leftIconColor} name={leftIconName} />
           </InputLeftElement>
         )}
         <ChakraInput paddingLeft={leftIconName ? '43px' : '11px'} paddingRight={inputRightPadding} {...inputProps} />

package/src/Components/SearchInput/SearchInput.tsx

@@ -0,0 +1,52 @@
+import { ChangeEvent, useState } from 'react';
+import Input, { InputProps } from '../Form/Input/Input';
+import IconButton from '../IconButton/IconButton';
+
+export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
+  onChange?: (value: string) => void;
+}
+
+const SearchInput = (props: SearchInputProps) => {
+  const { onChange, ...rest } = props;
+
+  const [value, setValue] = useState('');
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const q = event.target.value;
+    setValue(q);
+    if (onChange) {
+      onChange(q);
+    }
+  };
+
+  const onClearClick = () => {
+    setValue('');
+    if (onChange) {
+      onChange('');
+    }
+  };
+
+  const rightButton = (
+    <IconButton
+      aria-label="Clear"
+      iconName="CloseSmall"
+      onClick={onClearClick}
+      variant="tertiary"
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
+    />
+  );
+  const inputProps: InputProps = {
+    leftIconColor: 'neutral.60',
+    leftIconName: 'Magnifier',
+    onChange: onInputChange,
+    rightAddon: value ? rightButton : undefined,
+    rightAddonPlacement: 'inside',
+    type: 'text',
+    value,
+    ...rest,
+  };
+  return <Input {...inputProps} />;
+};
+
+export default SearchInput;

package/src/index.ts

@@ -227,3 +227,6 @@ export { default as ProgressBitbot } from './Components/ProgressBitbot/ProgressB
 
 export type { ProgressSpinnerProps } from './Components/ProgressSpinner/ProgressSpinner';
 export { default as ProgressSpinner } from './Components/ProgressSpinner/ProgressSpinner';
+
+export type { SearchInputProps } from './Components/SearchInput/SearchInput';
+export { default as SearchInput } from './Components/SearchInput/SearchInput';