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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha26",
+  "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/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}
     >