@true-engineering/true-react-common-ui-kit 3.24.0 → 3.25.0

package/README.md

@@ -11,6 +11,27 @@
 
 # Release Notes
 
+## 3.25.0
+
+### Changes
+
+- **Select**: Добавлена поддержка проп `header` и `footer`
+- **Select**: Исправлено отображение дропдауна в случае, если у поля есть `errorMessage`
+- **Select**: Добавлен `tabIndex` для списка, с целью корректной работы для [Keyboard-focusable scroll containers](https://chromestatus.com/feature/5231964663578624)
+
+### Chore
+
+- **Select**: Исправлен каст типа `Styles` на `CSSProperties`
+- **Select**: Удалён type guard для проверки `isMultiSelect`
+- **SelectList**: Исправлены проверки на `isMultiSelect`
+- **TextWithTooltip**: Исправлен каст типа `Styles` на `CSSProperties`
+
+## 3.24.1
+
+### Changes
+
+- Фикс бага с перерендером внутренних компонентов таблицы
+
 ## 3.24.0
 
 ### Changes

package/dist/components/Select/CustomSelect.stories.d.ts

@@ -1,5 +1,5 @@
 import { type ISelectProps } from './Select';
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
     shouldUsePopper?: boolean;
     shouldRenderInBody?: boolean;
     shouldHideOnScroll?: boolean;

package/dist/components/Select/MultiSelect.stories.d.ts

@@ -1,5 +1,5 @@
-import { ISelectProps } from './Select';
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+import { IMultipleSelectProps } from './Select';
+interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
     valuesType: 'strings' | 'objects';
     shouldUseReactNodes?: boolean;
     shouldUsePopper?: boolean;

package/dist/components/Select/Select.d.ts

@@ -1,11 +1,13 @@
-import { ReactNode, KeyboardEvent, MouseEvent, SyntheticEvent, ChangeEvent, FormEvent } from 'react';
-import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
-import { IIcon } from '../Icon';
-import { IInputProps } from '../Input';
-import { ISearchInputProps } from '../SearchInput';
+import { type ChangeEvent, type FormEvent, type KeyboardEvent, type MouseEvent, type ReactNode, type SyntheticEvent } from 'react';
+import { IDropdownWithPopperOptions, type ICommonProps } from '../../types';
+import { type IIcon } from '../Icon';
+import { type IInputProps } from '../Input';
+import { type ISearchInputProps } from '../SearchInput';
 import { IMultipleSelectValue } from './types';
-import { ISelectStyles } from './Select.styles';
-export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>, ICommonProps<ISelectStyles> {
+import { type ISelectStyles } from './Select.styles';
+export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'isActive' | 'tweakStyles'>, ICommonProps<ISelectStyles> {
+    header?: ReactNode;
+    footer?: ReactNode;
     defaultOptionLabel?: ReactNode;
     allOptionsLabel?: string;
     noMatchesLabel?: string;
@@ -23,7 +25,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     value: Value | undefined;
     /** @default true */
     shouldScrollToList?: boolean;
-    isMultiSelect?: boolean;
+    isMultiSelect?: false;
     searchInput?: {
         shouldRenderInList: true;
     } & Pick<ISearchInputProps, 'placeholder'>;
@@ -34,11 +36,14 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     optionsFilter?: (options: Value[], query: string) => Value[];
     onOpen?: () => void;
     compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
+    /** @description Функция должна быть мемоизирована с целью избежания ререндера */
     convertValueToString?: (value: Value) => string | undefined;
+    /** @description Функция должна быть мемоизирована с целью избежания ререндера */
     convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
+    /** @description Функция должна быть мемоизирована с целью избежания ререндера */
     convertValueToId?: (value: Value) => string | undefined;
 }
-export interface IMultipleSelectProps<Value> extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
+export interface IMultipleSelectProps<Value> extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange' | 'isMultiSelect'> {
     isMultiSelect: true;
     value: IMultipleSelectValue<Value> | undefined;
     onChange: (value: IMultipleSelectValue<Value> | undefined, event: MouseEvent<HTMLElement> | KeyboardEvent | ChangeEvent<HTMLElement> | FormEvent<HTMLElement>) => void;

package/dist/components/Select/Select.styles.d.ts

@@ -1,7 +1,7 @@
-import { ITweakStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-import { ISearchInputStyles } from '../SearchInput';
-import { ISelectListStyles } from './components';
+import { type ITweakStyles } from '../../theme';
+import { type IInputStyles } from '../Input';
+import { type ISearchInputStyles } from '../SearchInput';
+import { type ISelectListStyles } from './components';
 export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
 export declare const readonlyInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "clearIcon" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
     tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
@@ -23,7 +23,7 @@ export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"bo
 }>;
 export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;
-    isMultiSelect: boolean;
+    isMultiSelect?: boolean | undefined;
 }) => IInputStyles;
 export declare const searchInputStyles: ISearchInputStyles;
 export type ISelectStyles = ITweakStyles<typeof useStyles, {

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../../../types';
-import { ISelectListItemProps } from '../SelectListItem';
-import { ISelectListStyles } from './SelectList.styles';
-export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>, Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect'> {
+import { type ReactNode } from 'react';
+import { type ICommonProps } from '../../../../types';
+import { type ISelectListItemProps } from '../SelectListItem';
+import { type ISelectListStyles } from './SelectList.styles';
+export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>, Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
     options: Value[] | Readonly<Value[]>;
     focusedIndex?: number;
     activeValue?: Value | Value[];
@@ -14,9 +14,10 @@ export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>
     areAllOptionsSelected?: boolean;
     shouldScrollToList?: boolean;
     customListHeader?: ReactNode;
+    customListFooter?: ReactNode;
     isOptionDisabled: (value: Value) => boolean;
     convertValueToString: (value: Value) => string | undefined;
     convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
     convertValueToId: (value: Value) => string | undefined;
 }
-export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, areAllOptionsSelected, customListHeader, isOptionDisabled, allOptionsLabel, onOptionSelect, onToggleCheckbox, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;
+export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, areAllOptionsSelected, customListHeader, customListFooter, isMultiSelect, isOptionDisabled, allOptionsLabel, onOptionSelect, onToggleCheckbox, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.styles.d.ts

@@ -2,5 +2,5 @@ import { ITweakStyles } from '../../../../theme';
 export declare const ROW_HEIGHT = 40;
 export declare const CONTAINER_PADDING = 10;
 export declare const CELL_PADDING: number[];
-export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "cell" | "active" | "disabled" | "loading" | "list" | "focused" | "withListHeader" | "listHeader" | "cellWithCheckbox" | "noMatchesLabel" | "defaultCell", unknown>;
+export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "cell" | "active" | "disabled" | "loading" | "list" | "focused" | "withListHeader" | "withListFooter" | "listHeader" | "listFooter" | "cellWithCheckbox" | "noMatchesLabel" | "defaultCell", unknown>;
 export type ISelectListStyles = ITweakStyles<typeof useStyles>;

package/dist/components/Select/components/SelectListItem/SelectListItem.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, MouseEvent, FC, KeyboardEvent, ChangeEvent } from 'react';
-import { Classes } from 'jss';
+import { type ChangeEvent, type FC, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
+import { type Classes } from 'jss';
 export interface ISelectListItemProps {
     index: number;
     isSemiChecked?: boolean;
@@ -8,7 +8,8 @@ export interface ISelectListItemProps {
     isFocused?: boolean;
     children: ReactNode;
     classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>;
+    isMultiSelect?: boolean;
     onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-    onToggleCheckbox?: (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => void;
+    onToggleCheckbox: (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => void;
 }
 export declare const SelectListItem: FC<ISelectListItemProps>;

package/dist/components/Select/helpers.d.ts

@@ -1,7 +1,4 @@
-import type { IMultipleSelectProps, ISelectProps } from './Select';
-import { IMultipleSelectValue } from './types';
 export declare const defaultIsOptionDisabled: <Value>(option: Value) => boolean;
 export declare const defaultConvertFunction: (v: unknown) => string | undefined;
 export declare const defaultCompareFunction: <Value>(v1: Value, v2: Value) => boolean;
 export declare const getDefaultConvertToIdFunction: <Value>(convertValueToString: (value: Value) => string | undefined) => (value: Value) => string | undefined;
-export declare const isMultiSelectValue: <Value>(props: ISelectProps<Value> | IMultipleSelectProps<Value>, _value: Value | IMultipleSelectValue<Value> | undefined) => _value is IMultipleSelectValue<Value> | undefined;