@true-engineering/true-react-common-ui-kit 1.8.1 → 1.10.0

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

@@ -242,6 +242,7 @@ export declare const styles: {
         paddingLeft: number;
     };
     loading: {};
+    withUnits: {};
     tweakPreloader: {};
 };
 export declare type InputStyles = ComponentStyles<typeof styles>;

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

@@ -4,9 +4,11 @@ import { IIconType } from '../Icon';
 import { IDropdownWithPopperOptions } from '../../types';
 import { SelectStyles } from './Select.styles';
 import { ISearchInputProps } from '../SearchInput';
+import { IMultipleSelectValue } from './types';
 export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
     tweakStyles?: SelectStyles;
     defaultOptionLabel?: string;
+    allOptionsLabel?: string;
     noMatchesLabel?: string;
     loadingLabel?: ReactNode;
     optionsMode?: 'search' | 'dynamic' | 'normal';
@@ -17,18 +19,25 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     options: Value[];
     value: Value | undefined;
     shouldScrollToList?: boolean;
+    isMultiSelect?: boolean;
     searchInput?: {
         shouldRenderInList: true;
     } & Pick<ISearchInputProps, 'placeholder'>;
     isOptionDisabled?(option: Value): boolean;
-    onChange(value: Value | undefined): void;
+    onChange(value?: Value): void;
     onBlur?(event: Event | SyntheticEvent): void;
     onType?(value: string): Promise<void>;
     optionsFilter?(options: Value[], query: string): Value[];
     onOpen?(): void;
-    compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
+    compareValuesOnChange?(v1?: Value, v2?: Value): boolean;
     convertValueToString?(value: Value): string | undefined;
     convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
     convertValueToId?(value: Value): string | undefined;
 }
-export declare function Select<Value>({ options, value, defaultOptionLabel, debounceTime, optionsMode, noMatchesLabel, loadingLabel, tweakStyles, testId, isReadonly, isDisabled, dropdownOptions, minSymbolsCountToOpenList, dropdownIcon, shouldScrollToList, searchInput, onChange, onFocus, onBlur, onType, onOpen, isOptionDisabled, compareValuesOnChange, convertValueToString, convertValueToId, convertValueToReactNode, optionsFilter, ...inputProps }: ISelectProps<Value>): JSX.Element;
+export interface IMultipleSelectProps<Value> extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
+    isMultiSelect: true;
+    value: IMultipleSelectValue<Value> | undefined;
+    onChange(value?: IMultipleSelectValue<Value>): void;
+    compareValuesOnChange?(v1?: IMultipleSelectValue<Value>, v2?: IMultipleSelectValue<Value>): boolean;
+}
+export declare function Select<Value>(props: ISelectProps<Value> | IMultipleSelectProps<Value>): JSX.Element;

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

@@ -47,6 +47,16 @@ export declare const styles: {
         input: {
             paddingRight: number;
         };
+        withUnits: {
+            paddingRight: number;
+        };
+        unitsWrapper: {
+            position: string;
+            padding: number[];
+        };
+        fakeValue: {
+            display: string;
+        };
         disabled: {
             '& $input': {
                 cursor: string;

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

@@ -5,18 +5,20 @@ export interface ISelectListProps<Value> extends ICommonProps {
     tweakStyles?: SelectListStyles;
     options: Value[];
     focusedIndex?: number;
-    activeValue?: Value;
+    activeValue?: Value | Value[];
     noMatchesLabel?: string;
     isLoading?: boolean;
     loadingLabel?: ReactNode;
     defaultOptionLabel?: string;
     testId?: string;
+    allOptionsLabel?: string;
     shouldScrollToList?: boolean;
     customListHeader?: ReactNode;
-    onOptionClick(index: number, event: MouseEvent<HTMLElement>): void;
+    onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
+    onToggleCheckbox?(index: number, isSelected: boolean): void;
     isOptionDisabled(value: Value): boolean;
     convertValueToString(value: Value): string | undefined;
     convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-    convertValueToId?(value: Value): string | undefined;
+    convertValueToId(value: Value): string | undefined;
 }
-export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, customListHeader, isOptionDisabled, onOptionClick, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;
+export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, customListHeader, isOptionDisabled, allOptionsLabel, onOptionSelect, onToggleCheckbox, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;

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

@@ -1,5 +1,7 @@
 import { ComponentStyles } from '../../../types';
 export declare const ROW_HEIGHT = 40;
+export declare const CONTAINER_PADDING = 10;
+export declare const CELL_PADDING: number[];
 export declare const styles: {
     root: {
         borderRadius: 6;
@@ -38,6 +40,9 @@ export declare const styles: {
         boxSizing: string;
         fontSize: number;
     };
+    cellWithCheckbox: {
+        padding: number;
+    };
     noMatchesLabel: {
         pointerEvents: string;
     };

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

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

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

@@ -0,0 +1,2 @@
+import { CheckboxStyles } from '../../Checkbox';
+export declare const checkboxStyles: CheckboxStyles;

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_OPTION_INDEX = -2;
+export declare const ALL_OPTION_INDEX = -1;

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

@@ -1,4 +1,7 @@
+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 getActiveValueIndex: <Value>(options: Value[], value: Value | undefined, convertFunc: (v: Value) => string | undefined) => number;
+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;

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

@@ -1,3 +1,4 @@
 export * from './Select';
+export type { IMultipleSelectValue } from './types';
 export type { SelectStyles } from './Select.styles';
 export type { SelectListStyles } from './SelectList/SelectList.styles';

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

@@ -0,0 +1 @@
+export declare type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/dist/helpers/utils.d.ts

@@ -2,7 +2,7 @@ import { IDataAttributes } from '../types';
 import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
 export declare const transformToKebab: (string: string) => string;
 export declare const hasExactParent: (element: Element, parent: Element) => boolean;
-export declare const getParentNode: (element: Element | ShadowRoot) => Element;
+export declare const getParentNode: (element: Element | ShadowRoot | Document) => Element;
 export declare const getStyleComputedProperty: (element: Element) => Partial<CSSStyleDeclaration>;
 export declare const getScrollParent: (element: Element | Document) => Element;
 export declare const isElementOffScreen: (element: HTMLElement, input?: HTMLElement) => boolean;
@@ -16,6 +16,7 @@ export declare const isSpaceChar: (char?: string) => boolean;
 export declare const isInt: (n: number) => boolean;
 export declare const getNumberLength: (n?: number) => number;
 export declare const isNotEmpty: <T>(val: T | null | undefined) => val is T;
+export declare const isStringNotEmpty: <T extends string>(value: T | null | undefined) => value is T;
 export declare const trimStringToMaxLength: (val: string, maxLength: number) => string;
 export declare const addDataAttributes: (data?: IDataAttributes) => IDataAttributes;
 export declare const addDataTestId: (testId: string | undefined, postfix?: string | number | undefined) => {
@@ -24,3 +25,4 @@ export declare const addDataTestId: (testId: string | undefined, postfix?: strin
 export declare const getTestId: (testId: string | undefined, postfix?: string | number) => string | undefined;
 export declare const getSelectKeyHandler: (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => void;
 export declare const addClickHandler: (cb?: ((e: MouseEvent | KeyboardEvent) => void) | undefined, hasAction?: boolean) => HTMLAttributes<unknown>;
+export declare const createFilter: <T>(getter: (item: T) => Array<string | undefined>) => (items: T[], query: string) => T[];