@true-engineering/true-react-common-ui-kit 4.0.0-alpha25 → 4.0.0-alpha27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha25",
+  "version": "4.0.0-alpha27",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -1,8 +1,14 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataTestId,
+  getTestId,
+  isReactNodeNotEmpty,
+  addDataAttributes,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useIsMounted, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -227,7 +233,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput
@@ -235,7 +241,7 @@ export function FilterSelect<Value>({
             placeholder={translates.searchPlaceholder}
             onChange={handleOnChange}
             tweakStyles={tweakSearchInputStyles}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
+            testId={getTestId(testId, 'search')}
             shouldFocusOnMount
           />
         </div>
@@ -243,19 +249,17 @@ export function FilterSelect<Value>({
 
       {!isLoading && (
         <>
-          {allOptions.length !== 0 && (
+          {isArrayNotEmpty(allOptions) && (
             <div
-              className={clsx(classes.list, hasClearButton && classes.withClearButton)}
-              data-testid={testId !== undefined ? `${testId}-list` : undefined}
+              className={clsx(classes.list, { [classes.withClearButton]: hasClearButton })}
+              {...addDataTestId(testId, 'list')}
             >
-              {isGroupingEnabled && value !== undefined && (
+              {isGroupingEnabled && isNotEmpty(value) && (
                 <>
                   <div
-                    className={clsx(
-                      classes.label,
-                      classes.labelChosen,
-                      !isSearchEnabled && classes.withoutTopGap,
-                    )}
+                    className={clsx(classes.label, classes.labelChosen, {
+                      [classes.withoutTopGap]: !isSearchEnabled,
+                    })}
                   >
                     {translates.chosen}
                   </div>
@@ -269,7 +273,7 @@ export function FilterSelect<Value>({
                 </>
               )}
               {allOptions.map((item, index) => {
-                const isActive = value !== undefined && getValueId(value) === getValueId(item);
+                const isActive = isNotEmpty(value) && getValueId(value) === getValueId(item);
                 if (isGroupingEnabled && isActive) {
                   return null;
                 }
@@ -287,8 +291,7 @@ export function FilterSelect<Value>({
                     }
                     onClick={() => handleChange(item)}
                   >
-                    {/* data нужно ли? */}
-                    <div className={classes.option} data-option={id}>
+                    <div className={classes.option} {...addDataAttributes({ id, option: id })}>
                       {view}
                     </div>
                     {isActive && (
@@ -320,17 +323,13 @@ export function FilterSelect<Value>({
           )}
 
           {/* Nothing found */}
-          {allOptions.length === 0 && (
+          {!isArrayNotEmpty(allOptions) && (
             <div className={classes.nothingFound}>{translates.nothingFound}</div>
           )}
 
           {/* Controls and footer */}
           {(hasClearButton || hasFooter) && (
-            <div
-              className={clsx(classes.panel, {
-                [classes.panelWithFooter]: hasFooter,
-              })}
-            >
+            <div className={clsx(classes.panel, { [classes.panelWithFooter]: hasFooter })}>
               {hasFooter && <div className={classes.footer}>{footer}</div>}
 
               {hasClearButton && (
@@ -339,7 +338,7 @@ export function FilterSelect<Value>({
                     onClick={handleClear}
                     size="s"
                     view="text"
-                    testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+                    testId={getTestId(testId, 'clear-button')}
                     tweakStyles={tweakClearButtonStyles}
                   >
                     {translates.clear}

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,15 +1,16 @@
 import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   applyAction,
+  getTestId,
   indexMap,
   isArrayNotEmpty,
   isEmpty,
   isNotEmpty,
+  isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useMergedRefs, useTweakStyles } from '../../hooks';
+import { useIntersectionRef, useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
@@ -81,7 +82,7 @@ export function FlexibleTable<
   isFirstColumnSticky = false,
   isHorizontallyScrollable = false,
   isRowFocusable = false,
-  infinityScrollConfig,
+  infinityScrollConfig: infinityScrollConfigDeprecated,
   renderMode = 'table',
   refForScroll,
   nothingFoundContent,
@@ -101,13 +102,10 @@ export function FlexibleTable<
     currentComponentName: 'FlexibleTable',
   });
 
-  const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
 
-  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
-
   const getTableRowProps = (
     item: Row,
     index: number,
@@ -148,12 +146,6 @@ export function FlexibleTable<
     [getDataScrollAttributeSetter],
   );
 
-  const shouldShowNothingFound =
-    !isArrayNotEmpty(content) &&
-    nothingFoundContent !== undefined &&
-    !infinityScrollConfig?.isLoading &&
-    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
-
   const ref = useMergedRefs([
     refForScroll,
     scrollRef,
@@ -161,37 +153,25 @@ export function FlexibleTable<
     setIsScrolledAttribute,
   ]);
 
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (
-        !hasInfiniteScroll ||
-        infinityScrollConfig.isLoading ||
-        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-      ) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-        }
-      });
+  const infinityScrollConfig = infinityScrollConfigDeprecated && {
+    isLoading: infinityScrollConfigDeprecated.isLoading,
+    onInfinityScroll: () =>
+      infinityScrollConfigDeprecated.onInfinityScroll(
+        (infinityScrollConfigDeprecated.activePage ?? 0) + 1,
+      ),
+    isEnabled:
+      infinityScrollConfigDeprecated.isEnabled ?? !infinityScrollConfigDeprecated.isLastPage,
+  };
+  const intersectionRef = useIntersectionRef({
+    isDisabled: !infinityScrollConfig?.isEnabled || infinityScrollConfig.isLoading,
+    onIntersection: infinityScrollConfig?.onInfinityScroll,
+  });
 
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [
-      hasInfiniteScroll,
-      infinityScrollConfig?.activePage,
-      infinityScrollConfig?.totalPages,
-      infinityScrollConfig?.onInfinityScroll,
-    ],
-  );
+  const shouldShowNothingFound =
+    isReactNodeNotEmpty(nothingFoundContent) &&
+    !isArrayNotEmpty(content) &&
+    !infinityScrollConfig?.isLoading &&
+    !infinityScrollConfig?.isEnabled;
 
   useEffect(() => {
     const scrollContainer = scrollRef.current;
@@ -222,11 +202,7 @@ export function FlexibleTable<
 
   return (
     <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <Table.Root
-        className={classes.root}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, isLoading })}
-      >
+      <Table.Root className={classes.root} {...addDataAttributes({ ...data, isLoading }, testId)}>
         {shouldRenderHeader && (
           <Table.Head className={classes.head}>
             <Table.Row className={classes.headerRow}>
@@ -291,11 +267,11 @@ export function FlexibleTable<
                 />
               ))}
 
-              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
+              {infinityScrollConfig?.isEnabled && (
                 <Table.Row className={classes.loaderRow}>
                   <Table.Cell className={classes.loaderCell} colSpan={columns.length}>
-                    <div ref={initIntersectionObserver} className={classes.loader}>
-                      <ThemedPreloader type="dots" />
+                    <div ref={intersectionRef} className={classes.loader}>
+                      <ThemedPreloader type="dots" testId={getTestId(testId, 'loader')} />
                     </div>
                   </Table.Cell>
                 </Table.Row>

package/src/components/FlexibleTable/types.ts

@@ -64,11 +64,19 @@ export type IFlexibleTableConfigType<
 };
 
 export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
+  isEnabled?: boolean;
   isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
+  onInfinityScroll: {
+    (_: never): void;
+    /** @deprecated use activePage directly */
+    (skip: number): void; // eslint-disable-line @typescript-eslint/unified-signatures
+  };
+  /** @deprecated use activePage in onInfinityScroll  */
+  activePage?: number;
+  /** @deprecated use isEnabled */
+  isLastPage?: boolean;
+  /** @deprecated use isEnabled */
+  totalPages?: number;
 }
 
 export interface INestedComponent<T extends PropertyKey = string> {

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { isArrayNotEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useIsMounted, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
@@ -330,7 +335,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
     !isLoading && (isArrayNotEmpty(allOptions) || isArrayNotEmpty(chosenValues));
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput
@@ -339,16 +344,13 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             onChange={handleOnChange}
             tweakStyles={tweakSearchInputStyles}
             maxLength={searchMaxLength}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
+            testId={getTestId(testId, 'search')}
             shouldFocusOnMount
           />
         </div>
       )}
       {shouldShowOptionsList && (
-        <div
-          className={classes.list}
-          data-testid={testId !== undefined ? `${testId}-list` : undefined}
-        >
+        <div className={classes.list} {...addDataTestId(testId, 'list')}>
           {/* Выбранные */}
           {hasSelectedOptionsGroup && (
             <>
@@ -379,8 +381,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -417,8 +420,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -449,7 +453,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             onClick={handleClear}
             size="s"
             view="text"
-            testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+            testId={getTestId(testId, 'clear-button')}
             tweakStyles={tweakClearButtonStyles}
           >
             {translates.clear}

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -119,8 +119,9 @@ export function SelectList<Value>({
             )}
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
+              const id = convertValueToId(optionValue);
               const isFocused = focusedIndex === i;
-              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              const isActive = activeOptionsIds.has(id);
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
@@ -135,6 +136,7 @@ export function SelectList<Value>({
                   isMultiSelect={isMultiSelect}
                   onOptionSelect={onOptionSelect}
                   onToggleCheckbox={onToggleCheckbox}
+                  data={{ id }}
                 >
                   {opt}
                 </SelectListItem>

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -7,12 +7,13 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { type Classes } from 'jss';
-import { addDataAttributes } from '../../../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
+import { IDataAttributesProps } from '../../../../types';
 import { Checkbox } from '../../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { checkboxStyles } from './SelectListItem.styles';
 
-export interface ISelectListItemProps {
+export interface ISelectListItemProps extends IDataAttributesProps {
   index: number;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -38,6 +39,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
   children,
   isFocused,
   isMultiSelect,
+  data,
   onOptionSelect,
   onToggleCheckbox,
 }) => {
@@ -67,6 +69,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
         disabled: isDisabled,
         active: isActive,
         focused: isFocused,
+        ...data,
       })}
       onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
     >

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
 export * from './use-merged-refs';
 export * from './use-merge';
+export * from './use-intersection-ref';

package/src/hooks/use-intersection-ref.ts

@@ -0,0 +1,30 @@
+import { useRef, useMemo, RefCallback } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+
+export interface IInsertionRefOptions {
+  /** @default false */
+  isDisabled?: boolean;
+  onIntersection?: VoidFunction;
+  onIntersectionEnd?: VoidFunction;
+}
+
+export const useIntersectionRef = (options?: IInsertionRefOptions): RefCallback<Element> => {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  return useMemo(() => {
+    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+      const { current } = optionsRef;
+      if (current?.isDisabled) {
+        return;
+      }
+      if (isIntersecting) {
+        current?.onIntersection?.();
+      } else {
+        current?.onIntersectionEnd?.();
+      }
+    });
+
+    return (node) => (isNotEmpty(node) ? observer.observe(node) : observer.disconnect());
+  }, []);
+};