@semcore/bulk-textarea 1.0.1

package/lib/types/BulkTextarea.types.d.ts

@@ -0,0 +1,33 @@
+import { Intergalactic } from '@semcore/utils/lib/core';
+import { BoxProps } from '@semcore/flex-box';
+import Button from '@semcore/button';
+import { InputFieldProps } from './components/InputField/InputField';
+import { CounterProps } from './components/Counter';
+import { ErrorsNavigationProps } from './components/ErrorsNavigation';
+export type BulkTextareaProps = {
+    value?: InputFieldProps['value'];
+    onChange?: InputFieldProps['onBlur'];
+    placeholder?: InputFieldProps['placeholder'];
+    size?: InputFieldProps['size'];
+    state?: InputFieldProps['state'];
+    disabled?: InputFieldProps['disabled'];
+    readonly?: InputFieldProps['readonly'];
+    minRows?: InputFieldProps['minRows'];
+    maxRows?: InputFieldProps['maxRows'];
+    validateOn?: InputFieldProps['validateOn'];
+    lineValidation?: InputFieldProps['lineValidation'];
+    linesDelimiters?: InputFieldProps['linesDelimiters'];
+    pasteProps?: InputFieldProps['pasteProps'];
+    maxLines?: InputFieldProps['maxLines'];
+    lineProcessing?: InputFieldProps['lineProcessing'];
+    errors?: InputFieldProps['errors'];
+    showErrors?: boolean;
+    onErrorsChange?: InputFieldProps['onErrorsChange'];
+    onShowErrorsChange?: InputFieldProps['onShowErrorsChange'];
+};
+export type BulkTextareaType = Intergalactic.Component<'div', BoxProps & BulkTextareaProps> & {
+    InputField: Intergalactic.Component<'div', Pick<InputFieldProps, 'commonErrorMessage' | 'id'> & Partial<BulkTextareaProps>>;
+    Counter: Intergalactic.Component<'div', Partial<CounterProps>>;
+    ClearAll: typeof Button;
+    ErrorsNavigation: Intergalactic.Component<'div', Partial<ErrorsNavigationProps>>;
+};

package/lib/types/components/ClearAll.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IRootComponentProps } from '@semcore/core';
+import { useI18n } from '@semcore/utils/lib/enhances/WithI18n';
+export declare function ClearAll(props: IRootComponentProps & {
+    isHidden: boolean;
+    getI18nText: ReturnType<typeof useI18n>;
+}): React.ReactNode;

package/lib/types/components/Counter.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CounterProps as CounterPropsKit } from '@semcore/counter';
+import { useI18n } from '@semcore/utils/lib/enhances/WithI18n';
+export type CounterProps = {
+    theme: CounterPropsKit['theme'];
+    linesCount: number;
+    maxLines: number;
+    getI18nText: ReturnType<typeof useI18n>;
+};
+export declare function Counter(props: CounterProps): JSX.Element;

package/lib/types/components/ErrorsNavigation.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useI18n } from '@semcore/utils/lib/enhances/WithI18n';
+export type ErrorsNavigationProps = {
+    errorIndex: number;
+    onPrevError: () => void;
+    onNextError: () => void;
+    errorsCount: number;
+    size: 'm' | 'l';
+    showErrors: boolean;
+    getI18nText: ReturnType<typeof useI18n>;
+    disabled: boolean;
+    nextButtonRef: React.RefObject<HTMLButtonElement>;
+    prevButtonRef: React.RefObject<HTMLButtonElement>;
+};
+export declare function ErrorsNavigation(props: ErrorsNavigationProps): JSX.Element;

package/lib/types/components/InputField/InputField.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { PopperContext } from '@semcore/popper';
+import { InputFieldProps, ErrorItem } from './InputField.types';
+type IndexKeys = 'keyboardLineIndex' | 'mouseLineIndex';
+type State = {
+    [key in IndexKeys]: number;
+} & {
+    visibleErrorPopper: boolean;
+};
+declare class InputField extends Component<InputFieldProps, {}, State, typeof InputField.enhance> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    static enhance: readonly [(props: any) => {
+        uid: string;
+    }];
+    static defaultProps: {
+        defaultValue: string;
+        size: string;
+        state: string;
+        minRows: number;
+        maxRows: number;
+        defaultShowErrors: boolean;
+        defaultErrorIndex: number;
+        defaultLinesCount: number;
+    };
+    delimiter: string;
+    skipEmptyLines: boolean;
+    emptyLineValue: string;
+    spaceLineValue: string;
+    containerRef: React.RefObject<HTMLDivElement>;
+    textarea: HTMLDivElement;
+    popper: PopperContext['popper'] | null;
+    setPopperTrigger: PopperContext['setTrigger'] | null;
+    errorByInteraction: 'keyboard' | 'mouse' | null;
+    changeTriggerTimeout: number;
+    isScrolling: boolean;
+    scrollingTimeout: number;
+    toggleErrorsPopperTimeout: number;
+    isFocusing: boolean;
+    linesCountTimeout: number;
+    state: {
+        visibleErrorPopper: boolean;
+        keyboardLineIndex: number;
+        mouseLineIndex: number;
+    };
+    constructor(props: InputFieldProps);
+    uncontrolledProps(): {
+        value: null;
+        linesCount: null;
+        errorIndex: null;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: InputFieldProps, prevState: State): void;
+    componentWillUnmount(): void;
+    get isDisabled(): boolean;
+    get popperDescribedId(): string;
+    get errorMessage(): {
+        errorMessage: string | null;
+        isCommonError: boolean;
+    };
+    createContentEditableElement(props: InputFieldProps): HTMLDivElement;
+    handleValueOutChange(): void;
+    handleScroll(): void;
+    handleMouseDown(event: MouseEvent): void;
+    handleMouseMove(event: MouseEvent): void;
+    handleMouseLeave(event: MouseEvent): void;
+    handlePaste(event: ClipboardEvent): void;
+    handleChange(event: Event): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: Event): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): React.ReactNode;
+    private prepareNodesForPaste;
+    private recalculateErrors;
+    private recalculateLinesCount;
+    private getValues;
+    private toggleErrorsPopperByKeyboard;
+    private toggleErrorsPopper;
+    private toggleAriaInvalid;
+    private handleChangeErrorIndex;
+    private validateLine;
+    private setSelection;
+    private getNodeFromSelection;
+    private handleCursorMovement;
+    private setErrorIndex;
+    private isDeleteKey;
+    private getEmptyParagraph;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleSelectAll;
+    private isRangeSelection;
+    private getSelectionDirection;
+}
+export { InputField };
+export type { InputFieldProps, ErrorItem };

package/lib/types/components/InputField/InputField.types.d.ts

@@ -0,0 +1,157 @@
+type PasteProps = {
+    /**
+     * @default '\n'
+     */
+    delimiter?: string;
+    /**
+     * @default row.trim();
+     */
+    lineProcessing?: (line: string) => string;
+    /**
+     * @default true
+     */
+    skipEmptyLines?: boolean;
+};
+export type ErrorItem = {
+    lineIndex: number;
+    lineNode?: Node;
+    errorMessage: string;
+};
+export type InputFieldProps = {
+    /**
+     * Unique id
+     */
+    id?: string;
+    /**
+     * Placeholder for field
+     */
+    placeholder?: string;
+    /**
+     * String to render in textarea. OnChanging value, it will go throw paste pipeline
+     */
+    value: string;
+    /**
+     * This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
+     */
+    onBlur: (value: string, 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
+     */
+    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
+     */
+    lastError: 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;
+    /**
+     * Internal
+     */
+    'aria-describedby'?: string;
+};
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './BulkTextarea';
+export type { BulkTextareaProps } from './BulkTextarea.types';
+export type { ErrorItem } from './components/InputField/InputField.types';

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -0,0 +1,142 @@
+export declare const localizedMessages: {
+    de: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    en: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    es: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    fr: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    it: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    ja: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    ko: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    nl: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    pt: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    tr: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    vi: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    zh: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    pl: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+    sv: {
+        "BulkTextarea.ClearAllButton.buttonText": string;
+        "BulkTextarea.Counter.ofAllowedRows:sr-message": string;
+        "BulkTextarea.Counter.limitReached:sr-message": string;
+        "BulkTextarea.Counter.limitExceeded:sr-message": string;
+        "BulkTextarea.ErrorsNavigation.totalErrors": string;
+        "BulkTextarea.ErrorsNavigation.selectedError": string;
+        "BulkTextarea.ErrorsNavigation.nextError:aria-label": string;
+        "BulkTextarea.ErrorsNavigation.previousError:aria-label": string;
+    };
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@semcore/bulk-textarea",
+  "description": "Semrush BulkTextarea Component",
+  "version": "1.0.1",
+  "main": "lib/cjs/index.js",
+  "module": "lib/es6/index.mjs",
+  "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@semcore/utils": "4.45.0",
+    "@semcore/flex-box": "5.40.0",
+    "@semcore/button": "5.41.0",
+    "@semcore/typography": "5.50.0",
+    "@semcore/counter": "3.37.2",
+    "@semcore/icon": "4.56.0",
+    "@semcore/popper": "5.45.2",
+    "@semcore/tooltip": "6.47.2",
+    "csstype": "3.0.8",
+    "dompurify": "3.2.3"
+  },
+  "peerDependencies": {
+    "@semcore/core": "^2.17.5",
+    "react": "16.8 - 18",
+    "react-dom": "16.8 - 18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/bulk-textarea"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.21",
+    "@types/dompurify": "3.2.0",
+    "@semcore/testing-utils": "1.0.0"
+  },
+  "scripts": {
+    "build": "pnpm semcore-builder --source=ts"
+  }
+}