[UIK-4738][bulk-textarea,website] udpate types for BulkTextarea.InputField

semcore/bulk-textarea/src/BulkTextarea.types.ts

@@ -5,6 +5,7 @@ import type { Intergalactic } from '@semcore/core';
 import type { CounterProps } from './components/Counter';
 import type { ErrorsNavigationProps } from './components/ErrorsNavigation';
 import type { InputFieldProps } from './components/InputField/InputField';
+import type { PasteProps } from './components/InputField/InputField.types';
 
 export type BulkTextareaProps<T extends string | string[]> = {
   /** The current value */
@@ -40,7 +41,7 @@ export type BulkTextareaProps<T extends string | string[]> = {
   /** List of errors */
   errors?: InputFieldProps<T>['errors'];
   /** Defines whether to show errors or not */
-  showErrors?: boolean;
+  showErrors?: InputFieldProps<T>['showErrors'];
   /** Internal */
   onErrorsChange?: InputFieldProps<T>['onErrorsChange'];
   /** Internal */
@@ -58,10 +59,91 @@ type BulkTextareaComponent = (<T extends string | string[]>(
 ) => Intergalactic.InternalTypings.ComponentRenderingResults) &
 Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', {}>;
 
+export type BulkTextareaInputFieldProps<T extends string | string[] = string | string[]> = BoxProps & {
+  /**
+   * Unique id
+   */
+  id?: string;
+  /**
+   * Placeholder for field
+   */
+  placeholder?: string;
+  /**
+   * String to render in textarea. OnChanging value, it will go throw paste pipeline
+   */
+  value?: T;
+  /**
+   * This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
+   */
+  onBlur?: (value: T, e: Event) => void;
+  /**
+   * Size of component
+   * @default m
+   */
+  size?: 'm' | 'l';
+  /**
+   * State for show errors or valid(green) borders
+   * @default normal
+   */
+  state?: 'normal' | 'valid' | 'invalid';
+  /**
+   * Flag for disabling field
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Flag for readonly field
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Min rows
+   * @default 2
+   */
+  minRows?: number;
+  /**
+   * Max rows
+   * @default 10
+   */
+  maxRows?: number;
+  /**
+   * List of available points to validate value
+   * @default blur
+   */
+  validateOn?: ('blur' | 'blurLine' | 'paste')[];
+  /**
+   * Function to validate line
+   */
+  lineValidation?: (line: string, lines: string[]) => { isValid: boolean; errorMessage: string };
+  /**
+   * Message for display error about whole field, not only one line.
+   * If set empty string, field will not have invalid state.
+   */
+  commonErrorMessage: string;
+  /**
+   * Delimiters (event.key) for lines
+   * @default Enter
+   */
+  linesDelimiters?: string[];
+  /**
+   * Count of max lines in badge
+   * @default 100
+   */
+  maxLines?: number;
+  /**
+   * Paste props
+   */
+  pasteProps?: PasteProps;
+  /**
+   * Function for process line after it was blurred
+   */
+  lineProcessing?: (line: string, lines: string[]) => string;
+};
+
 export type BulkTextareaType<T extends string | string[]> = BulkTextareaComponent & {
   InputField: Intergalactic.Component<
     'div',
-    Pick<InputFieldProps<T>, 'commonErrorMessage' | 'id'> & Partial<BulkTextareaProps<T>> & BoxProps
+    BulkTextareaInputFieldProps<T>
   >;
   Counter: Intergalactic.Component<'div', Partial<CounterProps>>;
   ClearAll: typeof Button;

semcore/bulk-textarea/src/components/InputField/InputField.types.ts

@@ -1,4 +1,6 @@
-type PasteProps = {
+import type { BulkTextareaInputFieldProps } from '../../BulkTextarea.types';
+
+export type PasteProps = {
   /**
    * @default '\n'
    */
@@ -19,162 +21,34 @@ export type ErrorItem = {
   errorMessage: string;
 };
 
-export type InputFieldProps<T extends string | string[]> = {
-  /**
-   * Unique id
-   */
-  id?: string;
-
-  /**
-   * Placeholder for field
-   */
-  placeholder?: string;
-  /**
-   * String to render in textarea. OnChanging value, it will go throw paste pipeline
-   */
-  value: T;
-  /**
-   * This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
-   */
-  onBlur: (value: T, e: Event) => void;
-
-  /**
-   * Size of component
-   * @default m
-   */
-  size: 'm' | 'l';
-  /**
-   * State for show errors or valid(green) borders
-   * @default normal
-   */
-  state: 'normal' | 'valid' | 'invalid';
-
-  /**
-   * Flag for disabling field
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Flag for readonly field
-   * @default false
-   */
-  readonly?: boolean;
-
-  /**
-   * Min rows
-   * @default 2
-   */
-  minRows: number;
-  /**
-   * Max rows
-   * @default 10
-   */
-  maxRows: number;
-
-  /**
-   * List of available points to validate value
-   * @default blur
-   */
-  validateOn: ('blur' | 'blurLine' | 'paste')[];
-
-  /**
-   * Function to validate line
-   */
-  lineValidation?: (line: string, lines: string[]) => { isValid: boolean; errorMessage: string };
-
-  /**
-   * Message for display error about whole field, not only one line.
-   * If set empty string, field will not have invalid state.
-   */
-  commonErrorMessage: string;
-
-  /**
-   * Delimiters (event.key) for lines
-   * @default Enter
-   */
-  linesDelimiters?: string[];
-
-  /**
-   * Count of max lines in badge
-   * @default 100
-   */
-  maxLines: number;
-
-  /**
-   * Paste props
-   */
-  pasteProps: PasteProps;
-
-  /**
-   * Function for process line after it was blurred
-   */
-  lineProcessing?: (line: string, lines: string[]) => string;
-
-  /**
-   * Internal
-   */
-  prevError: ErrorItem;
-
-  /**
-   * Internal
-   */
-  currentLineIndex: number;
-
-  /**
-   * Internal
-   */
-  linesCount: number;
-  /**
-   * Internal
-   */
-  onChangeLineIndex: (newIndex: number) => void;
-  /**
-   * Internal
-   */
-  onChangeLinesCount: (rowsCount: number) => void;
-
-  /**
-   * Internal
-   */
-  showErrors: boolean;
-  /**
-   * Internal
-   * List of errors in rows
-   */
-  errors: ErrorItem[];
-  /**
-   * Internal
-   * Select row with error
-   */
-  errorIndex: number;
-  /**
-   * Internal
-   * Flag for select all row
-   */
-  highlightErrorIndex: boolean;
-  /**
-   * Internal
-   */
-  onErrorsChange: (errors: ErrorItem[]) => void;
-  /**
-   * Internal
-   */
-  onShowErrorsChange: (showErrors: boolean) => void;
-  /**
-   * Internal
-   */
-  onErrorIndexChange: (errorIndex: number) => void;
-
-  /**
+export type InputFieldProps<T extends string | string[]> =
+  BulkTextareaInputFieldProps<T>
+  & Required<
+    Pick<
+      BulkTextareaInputFieldProps<T>,
+      'value' | 'onBlur' | 'size' | 'state' | 'minRows' | 'maxRows' | 'validateOn' | 'maxLines' | 'pasteProps'
+    >
+  >
+  & {
+    prevError: ErrorItem;
+    currentLineIndex: number;
+    linesCount: number;
+    onChangeLineIndex: (newIndex: number) => void;
+    onChangeLinesCount: (rowsCount: number) => void;
+    showErrors: boolean;
+    /** List of errors in rows */
+    errors: ErrorItem[];
+    /** Select row with error */
+    errorIndex: number;
+    /** Flag for select all row */
+    highlightErrorIndex: boolean;
+    onErrorsChange: (errors: ErrorItem[]) => void;
+    onShowErrorsChange: (showErrors: boolean) => void;
+    onErrorIndexChange: (errorIndex: number) => void;
+    /**
    * Return lines from textarea immediately they changed (uses mutation observer on textarea node under the hood)
    * Throttling may be required during processing this cb
-   * Internal
    */
-  onImmediatelyChange?: (lines: string[], value: string) => void;
-} & {
-  /**
-   * Internal
-   */
-  'aria-describedby'?: string;
-};
+    onImmediatelyChange?: (lines: string[], value: string) => void;
+  }
+  & { 'aria-describedby'?: string };

website/docs/components/bulk-textarea/bulk-textarea-api.md

@@ -19,7 +19,7 @@ import BulkTextarea from '@semcore/ui/bulk-textarea';
 <BulkTextarea.InputField />
 ```
 
-<TypesView type="InputFieldProps" :types={...types} />
+<TypesView type="BulkTextareaInputFieldProps" :types={...types} />
 
 ## BulkTextarea.ErrorsNavigation