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

package/package.json

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

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,6 +1,10 @@
 import { useMemo } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
@@ -70,7 +74,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
-    if (onClear !== undefined) {
+    if (isNotEmpty(onClear)) {
       onClear();
       return;
     }
@@ -82,8 +86,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const shouldShowClearButton =
     hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+    (isNotEmpty(search) || filtersKeys.some((key) => isNotEmpty(filtersConfig[key])));
 
   const clearButton = (
     <div className={classes.clear}>
@@ -101,7 +104,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   );
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {/* Settings */}
       {onSettingsButtonClick !== undefined && (
         <div

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { getLocale } from '../../helpers';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
@@ -32,7 +33,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-select` : undefined}
+        testId={getTestId(testId, 'select')}
         {...filter}
       />
     );
@@ -48,7 +49,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-period` : undefined}
+        testId={getTestId(testId, 'period')}
         {...filter}
       />
     );
@@ -64,14 +65,14 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onEndBtnSubmit={() => onChange(undefined)}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-dates` : undefined}
+        testId={getTestId(testId, 'dates')}
         {...filter}
       />
     );
   }
 
   if (filter.type === 'multiSelect') {
-    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
+    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
 
     return (
       <FilterMultiSelect
@@ -80,7 +81,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+        testId={getTestId(testId, 'multiSelect')}
         {...filter}
       />
     );
@@ -96,26 +97,24 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         localeKey={translatesLocaleKey}
         locale={translates}
         labelName={filter.name}
-        testId={testId !== undefined ? `${testId}-interval` : undefined}
+        testId={getTestId(testId, 'interval')}
         {...filter}
       />
     );
   }
 
-  if (filter.type === 'boolean') {
-    return null;
-  }
-
   if (filter.type === 'custom' && filter.component) {
     const Component = filter.component;
 
-    return <Component {...props} filter={filter} />;
+    return <Component {...props} filter={filter} testId={getTestId(testId, 'dropdown')} />;
   }
 
-  console.warn(
-    `%cДля фильтра ${filter.name} не задан тип или component`,
-    'background: red; color: black',
-  );
+  if (filter.type !== 'boolean') {
+    console.warn(
+      `%cДля фильтра ${filter.name} не задан тип или component`,
+      'background: red; color: black',
+    );
+  }
 
   return null;
 }

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/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -1,4 +1,5 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { PERIODS, PERIODS_GETTERS } from '../../constants';
@@ -146,7 +147,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             locale={translates}
             tweakStyles={tweakSelectStyles}
             getValueView={getPeriodTranslate}
-            testId={testId !== undefined ? `${testId}-select` : undefined}
+            testId={getTestId(testId, 'select')}
           />
         </div>
       )}
@@ -168,7 +169,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             onChange={handleCustomDateChange}
             localeKey={localeKey}
             locale={translates}
-            testId={testId !== undefined ? `${testId}-dates` : undefined}
+            testId={getTestId(testId, 'dates')}
           />
         </div>
       )}

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,7 +1,10 @@
 import { MouseEventHandler } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataAttributes,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -93,8 +96,7 @@ export function FilterWrapper<Values extends Record<string, unknown>, Key extend
             [classes.boolean]: isBoolean,
             [classes.disabled]: isDisabled,
           })}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
           {...referenceProps}
         >
           <div
@@ -102,7 +104,7 @@ export function FilterWrapper<Values extends Record<string, unknown>, Key extend
             className={clsx(classes.item, { [classes.booleanItem]: isBoolean })}
           >
             <div className={classes.name}>{filter.name}</div>
-            {!isBoolean && value !== undefined && value !== null && (
+            {!isBoolean && isNotEmpty(value) && (
               <div className={classes.value}>
                 <FilterValueView
                   value={value}

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,6 +1,11 @@
 import { ReactNode, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -89,11 +94,6 @@ export function FiltersPaneSearch<Value>({
     setIsOpen(false);
   };
 
-  const selectedFieldLabel = useMemo(
-    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
-    [field],
-  );
-
   return (
     <div
       className={clsx(classes.root, {
@@ -101,8 +101,7 @@ export function FiltersPaneSearch<Value>({
         [classes.disabled]: isDisabled,
       })}
       ref={refRoot}
-      data-testid={testId}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <SearchInput
         value={value}
@@ -111,7 +110,7 @@ export function FiltersPaneSearch<Value>({
         tweakStyles={tweakSearchInputStyles}
         onFocus={() => setIsInputFocused(true)}
         onBlur={() => setIsInputFocused(false)}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
         maxLength={maxLength}
         isDisabled={isDisabled}
       />
@@ -122,15 +121,10 @@ export function FiltersPaneSearch<Value>({
           <div
             className={classes.selectBlock}
             onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
-            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+            {...addDataTestId(testId, 'select')}
           >
-            <div
-              className={clsx(
-                classes.selectLabel,
-                selectedFieldLabel !== undefined && classes.active,
-              )}
-            >
-              {selectedFieldLabel ?? translates.displayedFields}
+            <div className={clsx(classes.selectLabel, { [classes.active]: isNotEmpty(field) })}>
+              {isNotEmpty(field) ? getValueView?.(field) : translates.displayedFields}
             </div>
             <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
               <Icon type="chevron-down" />
@@ -152,7 +146,7 @@ export function FiltersPaneSearch<Value>({
               onChange={handleFieldsChange}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
-              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+              testId={getTestId(testId, 'dropdown')}
             />
           </div>
         )}

package/src/components/FiltersPane/types.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import type {
@@ -84,7 +85,7 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export interface ICustomComponentProps<Value> {
+export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;

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}
     >