@true-engineering/true-react-common-ui-kit 3.0.0-alpha.6 → 3.0.0-alpha.7

package/package.json

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

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -72,7 +72,6 @@ type ConfigValues = {
 
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
-  multiselectWidth: number;
   isSearchDisabled: boolean;
   isSearchAutosizeable: boolean;
   shouldShowSettingsButton: boolean;
@@ -83,7 +82,6 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
 
 function FiltersPaneWithCustomProps<Values, Content>({
   containerWidth,
-  multiselectWidth,
   isSearchDisabled,
   isSearchAutosizeable,
   shouldShowSettingsButton,
@@ -141,7 +139,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
-      width: multiselectWidth,
       pageSize: 15,
       checkboxPosition,
       isGroupingEnabled,
@@ -163,7 +160,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
       isGroupingEnabled,
       checkboxPosition,
       searchMaxLength: 12,
-      width: multiselectWidth,
       fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
         if (q === '' || q === 'undefined' || q === '123') {
           return new Promise((resolve) => setTimeout(() => resolve([])));
@@ -265,9 +261,6 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
     },
-    multiselectWidth: {
-      control: { type: 'range', min: 100, max: 400, step: 50 },
-    },
     checkboxPosition: {
       control: 'inline-radio',
       options: ['left', 'right'],
@@ -288,7 +281,6 @@ Default.args = {
   hasClearButton: true,
   isDisabled: false,
   containerWidth: 400,
-  multiselectWidth: 200,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,
   checkboxPosition: 'left',

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IInputStyles } from '../../../Input';
@@ -49,7 +50,7 @@ export const inputStyles: IInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterIntervalStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
@@ -8,6 +9,7 @@ const LIST_GAP = 12;
 
 export const useStyles = createThemedStyles('FilterSelect', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -127,7 +129,7 @@ export const searchInputStyles: ISearchInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterSelectStyles = ITweakStyles<
   typeof useStyles,

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

@@ -30,10 +30,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectSty
    * @default false
    */
   isGroupingEnabled?: boolean;
-  /**
-   * @default `220px`
-   */
-  width?: string | number;
   localeKey?: IFilterLocaleKey;
   locale?: Partial<ISelectLocale>;
   options?: Value[];
@@ -54,7 +50,6 @@ export function FilterSelect<Value>({
   value,
   isSearchEnabled = false,
   isGroupingEnabled = false,
-  width = 220,
   localeKey,
   locale,
   onChange,
@@ -225,7 +220,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -31,7 +32,7 @@ export const useStyles = createThemedStyles('FilterWithDates', {
   datepicker: {},
 });
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -104,6 +104,7 @@ export const selectStyles: ISelectStyles = {
     borderBottomLeftRadius: 6,
     borderBottomRightRadius: 6,
     boxShadow: 'none',
+    width: '100%',
   },
 };
 

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

@@ -7,7 +7,7 @@ import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
-import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import { FilterSelect } from '../FilterSelect';
 import {
   useStyles,
   IFiltersPaneSearchStyles,
@@ -26,7 +26,6 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
   getValueString?: (value: Value) => string;
-  selectWidth?: IFilterSelectProps<Value>['width'];
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
@@ -43,7 +42,6 @@ export function FiltersPaneSearch<Value>({
   getValueId,
   getValueView,
   getValueString,
-  selectWidth = '100%',
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
@@ -155,7 +153,6 @@ export function FiltersPaneSearch<Value>({
               localeKey={localeKey}
               locale={translates}
               onChange={handleFieldsChange}
-              width={selectWidth}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
               testId={testId !== undefined ? `${testId}-dropdown` : undefined}

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -8,6 +8,7 @@ const TOP_GAP = 12;
 
 export const useStyles = createThemedStyles('MultiSelectList', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -22,7 +22,6 @@ import {
 export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
   value?: Value;
   isSearchEnabled?: boolean;
-  width?: number | string;
   localeKey?: IMultiSelectLocaleKey;
   locale?: Partial<IMultiSelectLocale>;
   onClose?: () => void;
@@ -43,7 +42,6 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   tweakStyles,
   data,
   isSearchEnabled = false,
-  width = 220,
   localeKey = DEFAULT_LOCALE,
   locale = MultiSelectLocales[localeKey],
   onChange,
@@ -329,7 +327,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/helpers/phone.ts

@@ -18,7 +18,7 @@ export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): str
   locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
 
 /**
- * Мутирует!
+ * Мутирует countriesList!
  */
 export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
   countriesList.sort((countryA, countryB) =>