[UIK-5282][bulk-textarea] added cleanup in willUnmount for correct work in strict mode

.storybook/preview.tsx

@@ -2,7 +2,85 @@ import { PortalProvider } from '@semcore/base-components';
 import type { Preview } from '@storybook/react-vite';
 import React from 'react';
 
-// import '@semcore/theme/lib/highlights-light.css';
+type PreviewDecorator = NonNullable<Preview['decorators']>[number];
+
+type StorybookStory = Parameters<PreviewDecorator>[0];
+
+type StorybookDecoratorParams = Parameters<PreviewDecorator>[1] & {
+  globals: Record<string, unknown> & {
+    theme?: 'new' | 'old';
+    strictMode?: 'on' | 'off';
+  };
+  parameters: Record<string, unknown> & {
+    layout?: string;
+  };
+};
+
+const withStrictMode = (
+  Story: StorybookStory,
+  params: StorybookDecoratorParams,
+) => {
+  return params.globals.strictMode === 'on'
+    ? (
+        <React.StrictMode>
+          <Story />
+        </React.StrictMode>
+      )
+    : <Story />;
+};
+
+const withLayout = (
+  Story: StorybookStory,
+  params: StorybookDecoratorParams,
+) => {
+  if (params.parameters.layout === 'fullscreen') {
+    return <Story />;
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateRows: '20px auto 20px' }}>
+      <div tabIndex={0} />
+      <Story />
+      <div tabIndex={0} />
+    </div>
+  );
+};
+
+const withTheme = (
+  Story: StorybookStory,
+  params: StorybookDecoratorParams,
+) => {
+  const stylesheet = params.globals.theme === 'new'
+    ? 'assets/theme/light.css'
+    : 'assets/core/light.css';
+
+  const stylesheetHighlight = params.globals.theme === 'new'
+    ? 'assets/theme/highlights-light.css'
+    : 'assets/core/highlights-light.css';
+
+  return (
+    <>
+      <link rel='stylesheet' href={stylesheet} />
+      <link rel='stylesheet' href={stylesheetHighlight} />
+      <Story />
+    </>
+  );
+};
+
+const withPortalProvider = (
+  Story: StorybookStory,
+  params: StorybookDecoratorParams,
+) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <PortalProvider value={rootRef}>
+      <div ref={rootRef}>
+        <Story />
+      </div>
+    </PortalProvider>
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -51,52 +129,35 @@ const preview: Preview = {
         dynamicTitle: true,
       },
     },
+    strictMode: {
+      description: 'React StrictMode',
+      toolbar: {
+        title: 'StrictMode',
+        icon: 'circle',
+        items: [
+          {
+            value: 'off',
+            title: 'StrictMode off',
+          },
+          {
+            value: 'on',
+            title: 'StrictMode on',
+          },
+        ],
+        dynamicTitle: true,
+      },
+    },
   },
 
   initialGlobals: {
     theme: 'new',
+    strictMode: 'off',
   },
   decorators: [
-    (Story, params) => {
-      const rootRef = React.useRef<HTMLDivElement>(null);
-      const stylesheet = params.globals.theme === 'new'
-        ? 'assets/theme/light.css'
-        : 'assets/core/light.css';
-
-      const stylesheetHighlight = params.globals.theme === 'new'
-        ? 'assets/theme/highlights-light.css'
-        : 'assets/core/highlights-light.css';
-
-      if (params.parameters.layout === 'fullscreen') {
-        return (
-          <>
-            <link rel='stylesheet' href={stylesheet} />
-            <link rel='stylesheet' href={stylesheetHighlight} />
-            <PortalProvider value={rootRef}>
-              <div ref={rootRef}>
-                <Story />
-              </div>
-            </PortalProvider>
-          </>
-        );
-      }
-
-      return (
-        <>
-          <link rel='stylesheet' href={stylesheet} />
-          <link rel='stylesheet' href={stylesheetHighlight} />
-          <div style={{ display: 'grid', gridTemplateRows: '20px auto 20px' }}>
-            <div tabIndex={0} />
-            <PortalProvider value={rootRef}>
-              <div ref={rootRef}>
-                <Story />
-              </div>
-            </PortalProvider>
-            <div tabIndex={0} />
-          </div>
-        </>
-      );
-    },
+    withStrictMode,
+    withTheme,
+    withLayout,
+    withPortalProvider,
   ],
 };
 

semcore/bulk-textarea/src/BulkTextarea.tsx

@@ -240,7 +240,7 @@ class BulkTextareaRoot<T extends string | string[]> extends Component<
   handleClickClearAll = (e: Event) => {
     this.handlers.showErrors(false);
     this.handlers.errors([]);
-    this.setState({ errorIndex: -1 });
+    this.setState({ errorIndex: -1, isEmptyText: true });
     // @ts-ignore
     this.handlers.value('', e);
     this.handlers.state('normal');

semcore/bulk-textarea/src/components/InputField/InputField.tsx

@@ -110,8 +110,9 @@ class InputField<T extends string | string[]> extends Component<
   }
 
   componentDidMount() {
-    const { autoFocus, disabled, readonly } = this.asProps;
+    const { autoFocus, disabled } = this.asProps;
 
+    this.textarea = this.createContentEditableElement(this.asProps);
     this.containerRef.current?.append(this.textarea);
 
     this.handleValueOutChange();
@@ -243,6 +244,7 @@ class InputField<T extends string | string[]> extends Component<
 
   componentWillUnmount() {
     this.removeEventListeners(this.textarea);
+    this.containerRef.current?.removeChild(this.textarea);
 
     this.observer.disconnect();
   }

stories/components/bulk-textarea/tests/bulk-textarea.stories.tsx

@@ -44,6 +44,7 @@ const sharedArgTypes = {
 
 const basicPropsArgTypes = {
   ...sharedArgTypes,
+  strictMode: { control: { type: 'boolean' } },
   pasteDelimiter: {
     control: { type: 'select' },
     options: ['newline', 'comma', 'semicolon', 'space', 'undefined'],