@true-engineering/true-react-common-ui-kit 2.3.1 → 2.3.2

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

@@ -1,71 +1,71 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const FILTER_HEIGHT = 36;
-
-export const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 8,
-    width: '100%',
-  },
-
-  settings: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 18,
-    boxSizing: 'border-box',
-    width: 40,
-    height: FILTER_HEIGHT,
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-  },
-
-  settingsIcon: {
-    width: 16,
-    height: 16,
-  },
-
-  clear: {
-    display: 'flex',
-    alignItems: 'center',
-    height: FILTER_HEIGHT,
-  },
-
-  filterWithClearButton: {
-    display: 'flex',
-    gap: 16,
-    minWidth: 0,
-  },
-
-  // TODO: удалить когда появятся текстовые кнопки
-  tweakClearButton: {
-    s: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      minWidth: 'unset',
-    },
-
-    text: {
-      background: 'none',
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MAIN,
-      },
-
-      '&:hover, &:focus, &:active': {
-        background: 'none',
-        borderColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type FiltersPaneStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const FILTER_HEIGHT = 36;
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    width: '100%',
+  },
+
+  settings: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+  },
+
+  settingsIcon: {
+    width: 16,
+    height: 16,
+  },
+
+  clear: {
+    display: 'flex',
+    alignItems: 'center',
+    height: FILTER_HEIGHT,
+  },
+
+  filterWithClearButton: {
+    display: 'flex',
+    gap: 16,
+    minWidth: 0,
+  },
+
+  // TODO: удалить когда появятся текстовые кнопки
+  tweakClearButton: {
+    s: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      minWidth: 'unset',
+    },
+
+    text: {
+      background: 'none',
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MAIN,
+      },
+
+      '&:hover, &:focus, &:active': {
+        background: 'none',
+        borderColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type FiltersPaneStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,151 +1,151 @@
-import { useMemo, useRef } from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { FilterWrapper } from './FilterWrapper';
-import { FiltersPaneStyles, styles } from './FiltersPane.styles';
-import { IFiltersPaneSearchProps, FiltersPaneSearch } from './FiltersPaneSearch';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
-import { ConfigType } from './types';
-
-export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
-  tweakStyles?: FiltersPaneStyles;
-  filtersConfig: ConfigType<Values>;
-  enabledFilters?: Array<keyof ConfigType<Values>>;
-  values?: Partial<Values>;
-  search?: IFiltersPaneSearchProps<keyof Content>;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  isDisabled?: boolean;
-  hasClearButton?: boolean;
-  onClear?: () => void;
-  onChangeFilters: (values: Partial<Values>) => void;
-  onSettingsButtonClick?: () => void;
-  testId?: string;
-}
-
-export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
-  data,
-  tweakStyles,
-  filtersConfig,
-  enabledFilters,
-  values = {} as Values,
-  localeKey,
-  locale,
-  search,
-  isDisabled = false,
-  hasClearButton = true,
-  onChangeFilters,
-  onSettingsButtonClick,
-  onClear,
-  testId,
-}: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPane', styles, tweakStyles);
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
-
-  const handleClear = () => {
-    if (onClear !== undefined) {
-      onClear();
-      return;
-    }
-    onChangeFilters({});
-    if (search !== undefined) {
-      search.onChange({});
-    }
-  };
-
-  const shouldShowClearButton =
-    hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
-
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
-  const clearButton = (
-    <div className={classes.clear}>
-      <Button
-        onClick={handleClear}
-        size="s"
-        view="text"
-        isDisabled={isDisabled}
-        testId={testId !== undefined ? `${testId}-clear-button` : undefined}
-        tweakStyles={tweakClearButtonStyles}
-      >
-        {translates.clear}
-      </Button>
-    </div>
-  );
-
-  return (
-    <div className={classes.root} ref={ref} {...addDataAttributes(data)} data-testid={testId}>
-      {/* Settings */}
-      {onSettingsButtonClick !== undefined && (
-        <div
-          className={classes.settings}
-          onClick={!isDisabled ? onSettingsButtonClick : undefined}
-          tabIndex={0}
-          data-testid={testId !== undefined ? `${testId}-settings-button` : undefined}
-        >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
-        </div>
-      )}
-      {/* Search */}
-      {search !== undefined && (
-        <FiltersPaneSearch
-          {...search}
-          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
-          localeKey={search.localeKey ?? localeKey}
-          isDisabled={search.isDisabled ?? isDisabled}
-          testId={testId !== undefined ? `${testId}-search` : undefined}
-        />
-      )}
-      {/* Filters */}
-      {filtersKeys.map((key, index) => {
-        const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
-        if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
-          if (isLast) {
-            return clearButton;
-          }
-          return null;
-        }
-
-        const filterWrapper = (
-          <FilterWrapper
-            filter={filter}
-            locale={locale}
-            localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
-            value={currentValue}
-            key={key as string}
-            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
-            filtersPaneRef={ref}
-            testId={testId !== undefined ? `${testId}-filter-${String(key)}` : undefined}
-          />
-        );
-
-        if (isLast) {
-          return (
-            <div className={classes.filterWithClearButton} key={key as string}>
-              {filterWrapper}
-              {shouldShowClearButton && <>{clearButton}</>}
-            </div>
-          );
-        }
-
-        return filterWrapper;
-      })}
-    </div>
-  );
-}
+import { useMemo, useRef } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { FilterWrapper } from './FilterWrapper';
+import { IFiltersPaneSearchProps, FiltersPaneSearch } from './FiltersPaneSearch';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
+import { ConfigType } from './types';
+import { FiltersPaneStyles, styles } from './FiltersPane.styles';
+
+export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
+  tweakStyles?: FiltersPaneStyles;
+  filtersConfig: ConfigType<Values>;
+  enabledFilters?: Array<keyof ConfigType<Values>>;
+  values?: Partial<Values>;
+  search?: IFiltersPaneSearchProps<keyof Content>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  isDisabled?: boolean;
+  hasClearButton?: boolean;
+  onClear?: () => void;
+  onChangeFilters: (values: Partial<Values>) => void;
+  onSettingsButtonClick?: () => void;
+  testId?: string;
+}
+
+export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
+  data,
+  tweakStyles,
+  filtersConfig,
+  enabledFilters,
+  values = {} as Values,
+  localeKey,
+  locale,
+  search,
+  isDisabled = false,
+  hasClearButton = true,
+  onChangeFilters,
+  onSettingsButtonClick,
+  onClear,
+  testId,
+}: IFiltersPaneProps<Values, Content>): JSX.Element {
+  const { classes, componentStyles } = useTheme('FiltersPane', styles, tweakStyles);
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+
+  const handleClear = () => {
+    if (onClear !== undefined) {
+      onClear();
+      return;
+    }
+    onChangeFilters({});
+    if (search !== undefined) {
+      search.onChange({});
+    }
+  };
+
+  const shouldShowClearButton =
+    hasClearButton &&
+    (search !== undefined ||
+      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+
+  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
+
+  const clearButton = (
+    <div className={classes.clear}>
+      <Button
+        onClick={handleClear}
+        size="s"
+        view="text"
+        isDisabled={isDisabled}
+        testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+        tweakStyles={tweakClearButtonStyles}
+      >
+        {translates.clear}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={classes.root} ref={ref} {...addDataAttributes(data)} data-testid={testId}>
+      {/* Settings */}
+      {onSettingsButtonClick !== undefined && (
+        <div
+          className={classes.settings}
+          onClick={!isDisabled ? onSettingsButtonClick : undefined}
+          tabIndex={0}
+          data-testid={testId !== undefined ? `${testId}-settings-button` : undefined}
+        >
+          <div className={classes.settingsIcon}>
+            <Icon type="filter" />
+          </div>
+        </div>
+      )}
+      {/* Search */}
+      {search !== undefined && (
+        <FiltersPaneSearch
+          {...search}
+          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
+          localeKey={search.localeKey ?? localeKey}
+          isDisabled={search.isDisabled ?? isDisabled}
+          testId={testId !== undefined ? `${testId}-search` : undefined}
+        />
+      )}
+      {/* Filters */}
+      {filtersKeys.map((key, index) => {
+        const isLast = index === filtersKeys.length - 1;
+        const currentValue = values[key];
+        const filter = filtersConfig[key];
+        if (filter === undefined) {
+          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          if (isLast) {
+            return clearButton;
+          }
+          return null;
+        }
+
+        const filterWrapper = (
+          <FilterWrapper
+            filter={filter}
+            locale={locale}
+            localeKey={localeKey}
+            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            value={currentValue}
+            key={key as string}
+            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
+            filtersPaneRef={ref}
+            testId={testId !== undefined ? `${testId}-filter-${String(key)}` : undefined}
+          />
+        );
+
+        if (isLast) {
+          return (
+            <div className={classes.filterWithClearButton} key={key as string}>
+              {filterWrapper}
+              {shouldShowClearButton && <>{clearButton}</>}
+            </div>
+          );
+        }
+
+        return filterWrapper;
+      })}
+    </div>
+  );
+}

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

@@ -1,109 +1,109 @@
-import { rgba } from '../../../helpers';
-import { colors, dimensions } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-import { FILTER_HEIGHT } from '../FiltersPane.styles';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    position: 'relative',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    border: [1, 'transparent', 'solid'],
-    borderRadius: 18,
-    paddingRight: 8,
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  disabled: {
-    '& $selectBlock': {
-      cursor: 'default',
-    },
-  },
-
-  selectWrapper: {
-    position: 'relative',
-    display: 'flex',
-    flexShrink: 0,
-  },
-
-  selectBlock: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-    cursor: 'pointer',
-    height: '100%',
-  },
-
-  selectLabel: {
-    flexShrink: 0,
-    fontSize: 14,
-    userSelect: 'none',
-  },
-
-  chevronIcon: {
-    flexShrink: 0,
-    width: 20,
-    height: 20,
-    marginRight: 4,
-    transition: 'transform .2s ease',
-    opacity: 0.5,
-  },
-
-  open: {
-    transform: 'rotate(180deg)',
-  },
-
-  dropdown: {
-    position: 'absolute',
-    top: FILTER_HEIGHT - 2,
-    right: 0,
-    zIndex: 20,
-    minWidth: 200,
-    marginTop: 6,
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.CLASSIC_WHITE,
-    overflow: 'hidden',
-  },
-
-  dropdownInput: {
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  active: {
-    fontWeight: 'bold',
-  },
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: FILTER_HEIGHT - 2,
-        fontSize: 14,
-        minWidth: 140,
-      },
-
-      focused: {
-        backgroundColor: 'transparent',
-        border: 'none',
-      },
-    },
-  },
-
-  tweakSelect: {
-    root: {
-      borderRadius: 0,
-      borderBottomLeftRadius: 6,
-      borderBottomRightRadius: 6,
-      boxShadow: 'none',
-    },
-  },
-};
-
-export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../../helpers';
+import { colors, dimensions } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+import { FILTER_HEIGHT } from '../FiltersPane.styles';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    position: 'relative',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    border: [1, 'transparent', 'solid'],
+    borderRadius: 18,
+    paddingRight: 8,
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  disabled: {
+    '& $selectBlock': {
+      cursor: 'default',
+    },
+  },
+
+  selectWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+  },
+
+  selectBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    cursor: 'pointer',
+    height: '100%',
+  },
+
+  selectLabel: {
+    flexShrink: 0,
+    fontSize: 14,
+    userSelect: 'none',
+  },
+
+  chevronIcon: {
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    transition: 'transform .2s ease',
+    opacity: 0.5,
+  },
+
+  open: {
+    transform: 'rotate(180deg)',
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: FILTER_HEIGHT - 2,
+    right: 0,
+    zIndex: 20,
+    minWidth: 200,
+    marginTop: 6,
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    overflow: 'hidden',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  active: {
+    fontWeight: 'bold',
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: FILTER_HEIGHT - 2,
+        fontSize: 14,
+        minWidth: 140,
+      },
+
+      focused: {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    },
+  },
+
+  tweakSelect: {
+    root: {
+      borderRadius: 0,
+      borderBottomLeftRadius: 6,
+      borderBottomRightRadius: 6,
+      boxShadow: 'none',
+    },
+  },
+};
+
+export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;