@semcore/bulk-textarea 1.5.0-prerelease.0 → 1.5.0-prerelease.1

package/lib/esm/components/InputField/inputField.shadow.css

@@ -1,4 +1,4 @@
-SInputField>div {
+SInputField > div {
   box-sizing: content-box;
   outline: none;
   border-radius: var(--intergalactic-control-rounded, 6px);
@@ -37,7 +37,7 @@ SInputField>div {
     }
   }
 
-  >p {
+  > p {
     counter-increment: row;
     /*display: inline-block;*/
     margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
@@ -68,60 +68,38 @@ SInputField>div {
   }
 
   &:has(p:nth-child(n + 10)) {
-    >p {
+    > p {
       padding-left: var(--intergalactic-spacing-6x, 24px);
     }
-
-    >p:nth-child(-n + 9)::before {
+    > p:nth-child(-n + 9)::before {
       padding-left: var(--intergalactic-spacing-2x, 8px);
     }
   }
 
   &:has(p:nth-child(n + 100)) {
-    >p {
-      padding-left: var(--intergalactic-spacing-8x, 32px);
-    }
-
-    >p:nth-child(-n + 9)::before {
-      padding-left: var(--intergalactic-spacing-4x, 16px);
-    }
-
-    >p:nth-child(n + 10)::before {
-      padding-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    >p:nth-child(n + 100)::before {
-      padding-left: 0;
-    }
-  }
-
-  &:has(p:nth-child(n + 1000)) {
     > p {
-      padding-left: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px));
+      padding-left: var(--intergalactic-spacing-8x, 32px);
     }
     > p:nth-child(-n + 9)::before {
-      padding-left: var(--intergalactic-spacing-6x, 24px);
-    }
-    > p:nth-child(n + 10)::before {
       padding-left: var(--intergalactic-spacing-4x, 16px);
     }
-    > p:nth-child(n + 100)::before {
+    > p:nth-child(n + 10)::before {
       padding-left: var(--intergalactic-spacing-2x, 8px);
     }
-    > p:nth-child(n + 1000)::before {
+    > p:nth-child(n + 100)::before {
       padding-left: 0;
     }
   }
 }
 
-SInputField[showErrors]>div[aria-invalid]>p[aria-invalid]:after {
+SInputField[showErrors] > div[aria-invalid] > p[aria-invalid]:after {
   content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo= ");
   position: absolute;
   right: 0;
   top: var(--intergalactic-spacing-05x, 2px);
 }
 
-SInputField[size='m']>div {
+SInputField[size='m'] > div {
   padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
@@ -132,14 +110,13 @@ SInputField[size='m']>div {
 
   &:empty {
     padding-left: var(--intergalactic-spacing-8x, 32px);
-
     &::before {
       left: var(--intergalactic-spacing-4x, 16px);
     }
   }
 }
 
-SInputField[size='l']>div {
+SInputField[size='l'] > div {
   padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
@@ -149,7 +126,6 @@ SInputField[size='l']>div {
 
   &:empty {
     padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
-
     &::before {
       left: var(--intergalactic-spacing-4x, 16px);
     }
@@ -157,39 +133,26 @@ SInputField[size='l']>div {
 }
 
 
-SInputField[state='normal']:not([disabled])>div {
+SInputField[state='normal']:not([disabled]) > div:focus {
   &:focus {
+    box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
     border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
   }
 }
 
-SInputField[state='valid']>div {
+SInputField[state='valid'] > div {
   border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
 
   &:focus {
-    border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
-    outline-color: var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9));
+    box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px oklch(0.711 0.146 166.9));
   }
 }
 
-SInputField[state='invalid']>div {
+SInputField[state='invalid'] > div {
   border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
 
   &:focus {
-    border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
-    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
+    box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px oklch(0.628 0.257 28.9 / 0.652));
   }
 
   background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.628 0.258 29 / 0.56) 0, oklch(0.628 0.258 29 / 0.56) 1px, transparent 0, transparent 50%));
@@ -200,10 +163,9 @@ SInputField[state='invalid']>div {
   background-repeat: repeat-y;
 }
 
-SInputField[readonly]>div {
+SInputField[readonly] > div {
   background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
 }
-
-SInputField[disabled]>div {
+SInputField[disabled] > div {
   opacity: var(--intergalactic-disabled-opacity, 0.4);
 }

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
 import ja from "./ja.json.mjs";
 import ko from "./ko.json.mjs";
 import nl from "./nl.json.mjs";
-import pl from "./pl.json.mjs";
 import pt from "./pt.json.mjs";
-import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
 var localizedMessages = {
   de,
   en,

package/lib/types/BulkTextarea.d.ts

@@ -1,3 +1,3 @@
-import type { BulkTextareaType } from './BulkTextarea.types';
+import { BulkTextareaType } from './BulkTextarea.types';
 declare const BulkTextarea: BulkTextareaType<string | string[]>;
 export default BulkTextarea;

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

@@ -1,138 +1,33 @@
-import type { BoxProps } from '@semcore/base-components';
-import type Button from '@semcore/button';
-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';
+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<T extends string | string[]> = {
-    /** The current value */
     value?: InputFieldProps<T>['value'];
-    /** Callback triggered when the onBlur event is emmited */
     onChange?: InputFieldProps<T>['onBlur'];
-    /** Placeholder text */
     placeholder?: InputFieldProps<T>['placeholder'];
-    /** Component size */
     size?: InputFieldProps<T>['size'];
-    /** State for show errors or valid(green) borders */
     state?: InputFieldProps<T>['state'];
-    /** Defines whether the textarea is disabled */
     disabled?: InputFieldProps<T>['disabled'];
-    /** Defines whether the textarea is readonly */
     readonly?: InputFieldProps<T>['readonly'];
-    /** Minimum number of rows to display */
     minRows?: InputFieldProps<T>['minRows'];
-    /** Maximum number of rows to display */
     maxRows?: InputFieldProps<T>['maxRows'];
-    /** An event when a validation occurs */
     validateOn?: InputFieldProps<T>['validateOn'];
-    /** A function to valide the line */
     lineValidation?: InputFieldProps<T>['lineValidation'];
-    /** Line delimeters */
     linesDelimiters?: InputFieldProps<T>['linesDelimiters'];
-    /** Defines the props for paste action */
     pasteProps?: InputFieldProps<T>['pasteProps'];
-    /** Maximum number of allowed lines/values */
     maxLines?: InputFieldProps<T>['maxLines'];
-    /** Function to process individual lines during input */
     lineProcessing?: InputFieldProps<T>['lineProcessing'];
-    /** List of errors */
     errors?: InputFieldProps<T>['errors'];
-    /** Defines whether to show errors or not */
-    showErrors?: InputFieldProps<T>['showErrors'];
-    /** Internal */
+    showErrors?: boolean;
     onErrorsChange?: InputFieldProps<T>['onErrorsChange'];
-    /** Internal */
     onShowErrorsChange?: InputFieldProps<T>['onShowErrorsChange'];
-    /** Internal */
-    onImmediatelyChange?: InputFieldProps<T>['onImmediatelyChange'];
 };
 type BulkTextareaComponent = (<T extends string | string[]>(props: Intergalactic.InternalTypings.ComponentProps<'div', 'div', BoxProps & BulkTextareaProps<T>>) => 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', BulkTextareaInputFieldProps<T>>;
+    InputField: Intergalactic.Component<'div', Pick<InputFieldProps<T>, 'commonErrorMessage' | 'id'> & Partial<BulkTextareaProps<T>> & BoxProps>;
     Counter: Intergalactic.Component<'div', Partial<CounterProps>>;
     ClearAll: typeof Button;
     ErrorsNavigation: Intergalactic.Component<'div', Partial<ErrorsNavigationProps>>;

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

@@ -1,6 +1,6 @@
-import { type IRootComponentProps } from '@semcore/core';
-import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
 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>;

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

@@ -1,10 +1,10 @@
-import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
-import { type CounterProps as CounterPropsKit } from '@semcore/counter';
-import React from 'react';
+/// <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): React.JSX.Element;
+export declare function Counter(props: CounterProps): JSX.Element;

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

@@ -1,5 +1,5 @@
-import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
 import React from 'react';
+import { useI18n } from '@semcore/utils/lib/enhances/WithI18n';
 export type ErrorsNavigationProps = {
     errorIndex: number;
     onPrevError: () => void;
@@ -12,4 +12,4 @@ export type ErrorsNavigationProps = {
     nextButtonRef: React.RefObject<HTMLButtonElement>;
     prevButtonRef: React.RefObject<HTMLButtonElement>;
 };
-export declare function ErrorsNavigation(props: ErrorsNavigationProps): React.JSX.Element;
+export declare function ErrorsNavigation(props: ErrorsNavigationProps): JSX.Element;

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

@@ -1,24 +1,20 @@
-import type { PopperContext } from '@semcore/base-components';
-import { Component } from '@semcore/core';
 import React from 'react';
-import type { InputFieldProps, ErrorItem } from './InputField.types';
+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<T extends string | string[]> extends Component<InputFieldProps<T>, typeof InputField.enhance, {
-    value: null;
-    linesCount: null;
-    errorIndex: null;
-}, {}, State> {
+declare class InputField<T extends string | string[]> extends Component<InputFieldProps<T>, {}, State, typeof InputField.enhance> {
     static displayName: string;
     static style: {
         [key: string]: string;
     };
     static enhance: readonly [(props: any) => {
-        uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+        uid: string;
     }];
     static defaultProps: {
         defaultValue: string;
@@ -45,7 +41,6 @@ declare class InputField<T extends string | string[]> extends Component<InputFie
     toggleErrorsPopperTimeout: number;
     isFocusing: boolean;
     linesCountTimeout: number;
-    observer: MutationObserver;
     state: {
         visibleErrorPopper: boolean;
         keyboardLineIndex: number;
@@ -71,10 +66,10 @@ declare class InputField<T extends string | string[]> extends Component<InputFie
     handleScroll(): void;
     handleMouseDown(event: MouseEvent): void;
     handleMouseMove(event: MouseEvent): void;
-    handleMouseLeave(): void;
+    handleMouseLeave(event: MouseEvent): void;
     handlePaste(event: ClipboardEvent): void;
     handleChange(event: Event): void;
-    handleFocus(): void;
+    handleFocus(event: FocusEvent): void;
     handleBlur(event: Event): void;
     handleKeyDown(event: KeyboardEvent): void;
     render(): React.ReactNode;

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

@@ -1,5 +1,4 @@
-import type { BulkTextareaInputFieldProps } from '../../BulkTextarea.types';
-export type PasteProps = {
+type PasteProps = {
     /**
      * @default '\n'
      */
@@ -18,27 +17,142 @@ export type ErrorItem = {
     lineNode?: Node;
     errorMessage: string;
 };
-export type InputFieldProps<T extends string | string[]> = BulkTextareaInputFieldProps<T> & Required<Pick<BulkTextareaInputFieldProps<T>, 'value' | 'onBlur' | 'size' | 'state' | 'minRows' | 'maxRows' | 'validateOn' | 'maxLines' | 'pasteProps'>> & {
+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;
-    /** List of errors in rows */
+    /**
+     * Internal
+     * List of errors in rows
+     */
     errors: ErrorItem[];
-    /** Select row with error */
+    /**
+     * Internal
+     * Select row with error
+     */
     errorIndex: number;
-    /** Flag for select all row */
+    /**
+     * Internal
+     * Flag for select all row
+     */
     highlightErrorIndex: boolean;
+    /**
+     * Internal
+     */
     onErrorsChange: (errors: ErrorItem[]) => void;
+    /**
+     * Internal
+     */
     onShowErrorsChange: (showErrors: boolean) => void;
+    /**
+     * Internal
+     */
     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
-   */
-    onImmediatelyChange?: (lines: string[], value: string) => void;
-} & {
+     * Internal
+     */
     'aria-describedby'?: string;
 };
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/bulk-textarea",
   "description": "Semrush BulkTextarea Component",
-  "version": "1.5.0-prerelease.0",
+  "version": "1.5.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,19 +14,19 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.49.0-prerelease.0",
-    "@semcore/flex-box": "5.42.0-prerelease.0",
-    "@semcore/button": "5.44.0-prerelease.0",
-    "@semcore/typography": "5.54.0-prerelease.0",
-    "@semcore/counter": "3.39.0-prerelease.0",
-    "@semcore/icon": "4.63.0-prerelease.0",
-    "@semcore/popper": "5.47.0-prerelease.0",
-    "@semcore/tooltip": "6.50.0-prerelease.0",
+    "@semcore/utils": "4.49.0-prerelease.1",
+    "@semcore/flex-box": "5.42.0-prerelease.1",
+    "@semcore/button": "5.44.0-prerelease.1",
+    "@semcore/typography": "5.54.0-prerelease.1",
+    "@semcore/counter": "3.39.0-prerelease.1",
+    "@semcore/icon": "4.63.0-prerelease.1",
+    "@semcore/popper": "5.47.0-prerelease.1",
+    "@semcore/tooltip": "6.50.0-prerelease.1",
     "csstype": "3.0.8",
     "dompurify": "3.2.3"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },