[UIK-3807][inline-input] removed some non-working properties (#2757)

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [X] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [ ] I have added new tests on added of fixed functionality.

---------

Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>

Author: ilyabrower

semcore/inline-input/src/index.ts

@@ -1,6 +1,6 @@
-import type { InlineInputProps } from './index.type';
+import type { InlineInputProps, InlineInputValueProps } from './index.type';
 import InlineInputBase from './InlineInput';
 
 export default InlineInputBase;
 
-export type { InlineInputProps };
+export type { InlineInputProps, InlineInputValueProps };

semcore/inline-input/src/index.type.ts

@@ -34,23 +34,6 @@ export type InlineInputProps = BoxProps & {
     prevValue: string,
     event: React.MouseEvent | React.FocusEvent | React.KeyboardEvent,
   ) => void;
-  /**
-   * Text value of input. Should be used with `onChange` property together
-   */
-  value?: string;
-  /**
-   * Initial text value of input
-   */
-  defaultValue?: string;
-  /**
-   * Makes component to catch browser focus on component mount
-   * @default false
-   */
-  autoFocus?: boolean;
-  /**
-   * Gray text displayed in empty input
-   */
-  placeholder?: string;
   /**
    * defines callback (`onCancel` or `onConfirm`) triggered when `blur` event out of container fired
    * Triggered after all previous macrotasks completed (internally called inside of `setTimeout`)
@@ -83,14 +66,6 @@ export type InlineInputValueProps = BoxProps & {
    * callback invoked on every change of input tag value
    */
   onChange?: (value: string, event: React.ChangeEvent) => void;
-  /**
-   * visual state of component
-   */
-  state?: 'normal' | 'valid' | 'invalid';
-  /**
-   * shows spinner in `InlineInput.ConfirmControl` and disables other interactive elements
-   */
-  loading?: boolean;
   /**
    * disables interactive elements
    */

stories/components/inline-input/docs/examples/basic_usage.tsx

@@ -1,10 +1,14 @@
 import InlineInput from '@semcore/ui/inline-input';
-import type { InlineInputProps } from '@semcore/ui/inline-input';
+import type { InlineInputProps, InlineInputValueProps } from '@semcore/ui/inline-input';
 import React from 'react';
 
-const BasicUsage = (props: InlineInputProps) => {
-  const { disabled, loading, state, autoFocus, defaultValue } = props;
-
+const BasicUsage = ({
+  disabled = false,
+  loading,
+  state,
+  autoFocus,
+  defaultValue = 'John Doe',
+}: InlineInputProps & InlineInputValueProps): JSX.Element => {
   return (
     <InlineInput
       w={300}
@@ -26,14 +30,11 @@ const BasicUsage = (props: InlineInputProps) => {
   );
 };
 
-export const basicUsageDefaultProps: InlineInputProps = {
+export const basicUsageDefaultProps: InlineInputProps & InlineInputValueProps = {
   disabled: false,
   loading: undefined,
   state: undefined,
-  autoFocus: undefined,
   defaultValue: 'John Doe',
 };
 
-BasicUsage.defaultProps = basicUsageDefaultProps;
-
 export default BasicUsage;

stories/components/inline-input/docs/inline-input.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const BasicUsage: StoryObj<typeof basicUsageDefaultProps> = {
+export const BasicUsage: Story = {
   render: BasicUsageExample,
   argTypes: {
     disabled: {
@@ -21,8 +21,7 @@ export const BasicUsage: StoryObj<typeof basicUsageDefaultProps> = {
       control: { type: 'boolean' },
     },
     autoFocus: {
-      control: { type: 'select' },
-      options: ['true', 'false', undefined],
+      control: { type: 'boolean' },
     },
     state: {
       control: { type: 'select' },

stories/components/inline-input/tests/examples/styles.tsx

@@ -1,11 +1,11 @@
 import SerpM from '@semcore/icon/Serp/m';
 import { Flex } from '@semcore/ui/base-components';
 import InlineInput from '@semcore/ui/inline-input';
-import type { InlineInputProps } from '@semcore/ui/inline-input';
+import type { InlineInputProps, InlineInputValueProps } from '@semcore/ui/inline-input';
 import type { InputNumberControlsProps } from '@semcore/ui/input-number';
 import React from 'react';
 
-type ExampleInputTagsProps = InlineInputProps & InputNumberControlsProps;
+type ExampleInputTagsProps = InlineInputProps & InputNumberControlsProps & InlineInputValueProps;
 
 const Styles = (props: ExampleInputTagsProps) => {
   const { disabled, loading, state, autoFocus, defaultValue, placeholder, showControls, onBlurBehavior } = props;