@true-engineering/true-react-common-ui-kit 1.3.0 → 1.4.0

package/src/components/Select/SelectList/SelectList.styles.ts

@@ -1,57 +1,68 @@
-import { colors, dimensions, helpers } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-export const ROW_HEIGHT = 40;
-const CONTAINER_PADDING = 10;
-const CELL_PADDING = [10, 20];
-
-export const styles = {
-  root: {
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
-    boxSizing: 'border-box',
-    padding: [CONTAINER_PADDING, 0],
-    fontSize: 16,
-  },
-
-  list: {
-    height: '100%',
-    maxHeight: ROW_HEIGHT * 6,
-    cursor: 'pointer',
-    backgroundColor: colors.CLASSIC_WHITE,
-
-    ...helpers.withScrollBar,
-  },
-
-  cell: {
-    display: 'flex',
-    cursor: 'pointer',
-    minHeight: ROW_HEIGHT,
-    width: 'auto',
-    padding: CELL_PADDING,
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 14,
-  },
-
-  noMatchesLabel: {
-    pointerEvents: 'none',
-  },
-
-  focused: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  loading: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  defaultCell: {},
-};
-
-export type SelectListStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+export const ROW_HEIGHT = 40;
+const CONTAINER_PADDING = 10;
+const CELL_PADDING = [10, 20];
+
+export const styles = {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
+    boxSizing: 'border-box',
+    padding: [CONTAINER_PADDING, 0],
+    fontSize: 16,
+    overflow: 'hidden',
+  },
+
+  withListHeader: {
+    paddingTop: 0,
+  },
+
+  listHeader: {
+    '& + $list': {
+      borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    },
+  },
+
+  list: {
+    height: '100%',
+    maxHeight: ROW_HEIGHT * 6,
+    cursor: 'pointer',
+    backgroundColor: colors.CLASSIC_WHITE,
+
+    ...helpers.withScrollBar,
+  },
+
+  cell: {
+    display: 'flex',
+    cursor: 'pointer',
+    minHeight: ROW_HEIGHT,
+    width: 'auto',
+    padding: CELL_PADDING,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 14,
+  },
+
+  noMatchesLabel: {
+    pointerEvents: 'none',
+  },
+
+  focused: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  loading: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  defaultCell: {},
+};
+
+export type SelectListStyles = ComponentStyles<typeof styles>;

package/src/components/Select/SelectList/SelectList.tsx

@@ -1,130 +1,139 @@
-import { ReactNode, useMemo } from 'react';
-import clsx from 'clsx';
-import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
-import { useTheme } from '../../../hooks';
-import { ICommonProps } from '../../../types';
-import { addDataAttributes, isNotEmpty } from '../../../helpers';
-import { SelectListStyles, styles } from './SelectList.styles';
-
-export interface ISelectListProps<Value> extends ICommonProps {
-  tweakStyles?: SelectListStyles;
-  options: Value[];
-  focusedIndex?: number;
-  activeValue?: Value;
-  noMatchesLabel?: string;
-  isLoading?: boolean;
-  loadingLabel?: ReactNode;
-  defaultOptionLabel?: string;
-  testId?: string;
-  shouldScrollToList?: boolean;
-  onOptionClick(index: number): void;
-  isOptionDisabled(value: Value): boolean;
-  convertValueToString(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId?(value: Value): string | undefined;
-}
-
-const DEFAULT_OPTION_INDEX = -1;
-
-export function SelectList<Value>({
-  options,
-  focusedIndex,
-  activeValue,
-  defaultOptionLabel,
-  noMatchesLabel = 'Совпадений не найдено',
-  isLoading,
-  loadingLabel = 'Загрузка...',
-  tweakStyles,
-  testId,
-  shouldScrollToList = true,
-  isOptionDisabled,
-  onOptionClick,
-  convertValueToString,
-  convertValueToReactNode,
-  convertValueToId = convertValueToString,
-}: ISelectListProps<Value>): JSX.Element {
-  const { classes } = useTheme('SelectList', styles, tweakStyles);
-  const activeValueId = isNotEmpty(activeValue)
-    ? convertValueToId(activeValue)
-    : undefined;
-
-  const isActiveOption = (item: Value): boolean =>
-    convertValueToId(item) === activeValueId;
-
-  const convertFunction = convertValueToReactNode ?? convertValueToString;
-
-  const optionsDisableMap = useMemo(
-    () => options.map((o) => isOptionDisabled(o)),
-    [options, isOptionDisabled],
-  );
-
-  const listOptions = useMemo(
-    () => options.map((opt, i) => convertFunction(opt, optionsDisableMap[i])),
-    [options, convertFunction, optionsDisableMap],
-  );
-
-  return (
-    <ScrollIntoViewIfNeeded
-      active={shouldScrollToList}
-      className={classes.root}
-    >
-      <div className={classes.list} data-testid={testId}>
-        {isLoading ? (
-          <div className={clsx(classes.cell, classes.loading)}>
-            {loadingLabel}
-          </div>
-        ) : (
-          <>
-            {defaultOptionLabel !== undefined && (
-              <ScrollIntoViewIfNeeded
-                active={focusedIndex === DEFAULT_OPTION_INDEX}
-                options={{ block: 'nearest' }}
-                className={clsx(
-                  classes.cell,
-                  classes.defaultCell,
-                  focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
-                )}
-                onClick={() => onOptionClick(DEFAULT_OPTION_INDEX)}
-              >
-                {defaultOptionLabel}
-              </ScrollIntoViewIfNeeded>
-            )}
-            {listOptions.map((opt, i) => {
-              const optionValue = options[i];
-              const isFocused = i === focusedIndex;
-              const isActive = isActiveOption(optionValue);
-              // проверяем, что опция задизейблена
-              const isDisabled = optionsDisableMap[i];
-
-              return (
-                <ScrollIntoViewIfNeeded
-                  active={isFocused}
-                  options={{ block: 'nearest' }}
-                  key={i}
-                  className={clsx(classes.cell, {
-                    [classes.focused]: isFocused,
-                    [classes.active]: isActive,
-                    [classes.disabled]: isDisabled,
-                  })}
-                  {...addDataAttributes({
-                    disabled: isDisabled,
-                    active: isActive,
-                    focused: isFocused,
-                  })}
-                  onClick={!isDisabled ? () => onOptionClick(i) : undefined}
-                >
-                  {opt}
-                </ScrollIntoViewIfNeeded>
-              );
-            })}
-            {listOptions.length === 0 && (
-              <div className={clsx(classes.cell, classes.noMatchesLabel)}>
-                {noMatchesLabel}
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </ScrollIntoViewIfNeeded>
-  );
-}
+import { ReactNode, useMemo, MouseEvent } from 'react';
+import clsx from 'clsx';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import { useTheme } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { SelectListStyles, styles } from './SelectList.styles';
+
+export interface ISelectListProps<Value> extends ICommonProps {
+  tweakStyles?: SelectListStyles;
+  options: Value[];
+  focusedIndex?: number;
+  activeValue?: Value;
+  noMatchesLabel?: string;
+  isLoading?: boolean;
+  loadingLabel?: ReactNode;
+  defaultOptionLabel?: string;
+  testId?: string;
+  shouldScrollToList?: boolean;
+  customListHeader?: ReactNode;
+  onOptionClick(index: number, event: MouseEvent<HTMLElement>): void;
+  isOptionDisabled(value: Value): boolean;
+  convertValueToString(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
+}
+
+const DEFAULT_OPTION_INDEX = -1;
+
+export function SelectList<Value>({
+  options,
+  focusedIndex,
+  activeValue,
+  defaultOptionLabel,
+  noMatchesLabel = 'Совпадений не найдено',
+  isLoading,
+  loadingLabel = 'Загрузка...',
+  tweakStyles,
+  testId,
+  shouldScrollToList = true,
+  customListHeader,
+  isOptionDisabled,
+  onOptionClick,
+  convertValueToString,
+  convertValueToReactNode,
+  convertValueToId = convertValueToString,
+}: ISelectListProps<Value>): JSX.Element {
+  const { classes } = useTheme('SelectList', styles, tweakStyles);
+  const activeValueId = isNotEmpty(activeValue)
+    ? convertValueToId(activeValue)
+    : undefined;
+
+  const isActiveOption = (item: Value): boolean =>
+    convertValueToId(item) === activeValueId;
+
+  const convertFunction = convertValueToReactNode ?? convertValueToString;
+
+  const optionsDisableMap = useMemo(
+    () => options.map((o) => isOptionDisabled(o)),
+    [options, isOptionDisabled],
+  );
+
+  const listOptions = useMemo(
+    () => options.map((opt, i) => convertFunction(opt, optionsDisableMap[i])),
+    [options, convertFunction, optionsDisableMap],
+  );
+
+  return (
+    <ScrollIntoViewIfNeeded
+      active={shouldScrollToList}
+      className={clsx(classes.root, {
+        [classes.withListHeader]: isNotEmpty(customListHeader),
+      })}
+    >
+      {isNotEmpty(customListHeader) && (
+        <div className={classes.listHeader}>{customListHeader}</div>
+      )}
+      <div className={classes.list} data-testid={testId}>
+        {isLoading ? (
+          <div className={clsx(classes.cell, classes.loading)}>
+            {loadingLabel}
+          </div>
+        ) : (
+          <>
+            {defaultOptionLabel !== undefined && (
+              <ScrollIntoViewIfNeeded
+                active={focusedIndex === DEFAULT_OPTION_INDEX}
+                options={{ block: 'nearest' }}
+                className={clsx(
+                  classes.cell,
+                  classes.defaultCell,
+                  focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
+                )}
+                onClick={(event) => onOptionClick(DEFAULT_OPTION_INDEX, event)}
+              >
+                {defaultOptionLabel}
+              </ScrollIntoViewIfNeeded>
+            )}
+            {listOptions.map((opt, i) => {
+              const optionValue = options[i];
+              const isFocused = i === focusedIndex;
+              const isActive = isActiveOption(optionValue);
+              // проверяем, что опция задизейблена
+              const isDisabled = optionsDisableMap[i];
+
+              return (
+                <ScrollIntoViewIfNeeded
+                  active={isFocused}
+                  options={{ block: 'nearest' }}
+                  key={i}
+                  className={clsx(classes.cell, {
+                    [classes.focused]: isFocused,
+                    [classes.active]: isActive,
+                    [classes.disabled]: isDisabled,
+                  })}
+                  {...addDataAttributes({
+                    disabled: isDisabled,
+                    active: isActive,
+                    focused: isFocused,
+                  })}
+                  onClick={
+                    !isDisabled ? (event) => onOptionClick(i, event) : undefined
+                  }
+                >
+                  {opt}
+                </ScrollIntoViewIfNeeded>
+              );
+            })}
+            {listOptions.length === 0 && (
+              <div className={clsx(classes.cell, classes.noMatchesLabel)}>
+                {noMatchesLabel}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </ScrollIntoViewIfNeeded>
+  );
+}

package/src/components/Select/SelectList/index.ts

@@ -1 +1 @@
-export * from './SelectList';
+export * from './SelectList';

package/src/components/Select/helpers.ts

@@ -1,21 +1,21 @@
-import { isNotEmpty } from '../../helpers';
-
-export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
-  typeof option === 'object' &&
-  option !== null &&
-  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
-
-export const defaultConvertFunction = (v: unknown) =>
-  v === undefined ? undefined : String(v);
-
-export const defaultCompareFunction = <Value>(v1: Value, v2: Value) =>
-  v1 === v2;
-
-export const getActiveValueIndex = <Value>(
-  options: Value[],
-  value: Value | undefined,
-  convertFunc: (v: Value) => string | undefined,
-): number =>
-  isNotEmpty(value)
-    ? options.findIndex((o) => convertFunc(o) === convertFunc(value))
-    : -1;
+import { isNotEmpty } from '../../helpers';
+
+export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
+  typeof option === 'object' &&
+  option !== null &&
+  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
+
+export const defaultConvertFunction = (v: unknown) =>
+  v === undefined ? undefined : String(v);
+
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value) =>
+  v1 === v2;
+
+export const getActiveValueIndex = <Value>(
+  options: Value[],
+  value: Value | undefined,
+  convertFunc: (v: Value) => string | undefined,
+): number =>
+  isNotEmpty(value)
+    ? options.findIndex((o) => convertFunc(o) === convertFunc(value))
+    : -1;

package/src/components/Select/index.ts

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

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -1,63 +1,63 @@
-import { ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { IInputProps } from '../Input';
-import { SmartInput, TSmartType } from './SmartInput';
-
-const types: Array<IInputProps['type']> = [
-  'text',
-  'password',
-  'email',
-  'number',
-];
-const smartTypes: TSmartType[] = [
-  'default',
-  'agencyName',
-  'surname',
-  'name',
-  'email',
-];
-
-export default {
-  title: 'Inputs/SmartInput',
-  component: SmartInput,
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-    smartType: { control: 'inline-radio', options: smartTypes },
-  },
-};
-
-const Template: ComponentStory<typeof SmartInput> = (args) => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div>
-      <div>Фичи умного инпута:</div>
-      <ul>
-        <li>Переключение раскладки при вводе</li>
-        <li>Транслитерация при копировании текста на русском</li>
-        <li>
-          Запрет ввода определённых символов для разных видов полей, например,
-          только буквы, пробелы и дефис для фамилий и т.д.
-        </li>
-        <li>
-          Фильтрация скопированного значения на предмет запрещённых символов
-        </li>
-        <li>Трансформация значения в UPPERCASE</li>
-      </ul>
-
-      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  type: 'text',
-  smartType: 'default',
-  isUpperCase: false,
-  isDisabled: false,
-  hasFloatingLabel: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { IInputProps } from '../Input';
+import { SmartInput, TSmartType } from './SmartInput';
+
+const types: Array<IInputProps['type']> = [
+  'text',
+  'password',
+  'email',
+  'number',
+];
+const smartTypes: TSmartType[] = [
+  'default',
+  'agencyName',
+  'surname',
+  'name',
+  'email',
+];
+
+export default {
+  title: 'Inputs/SmartInput',
+  component: SmartInput,
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+    smartType: { control: 'inline-radio', options: smartTypes },
+  },
+};
+
+const Template: ComponentStory<typeof SmartInput> = (args) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div>
+      <div>Фичи умного инпута:</div>
+      <ul>
+        <li>Переключение раскладки при вводе</li>
+        <li>Транслитерация при копировании текста на русском</li>
+        <li>
+          Запрет ввода определённых символов для разных видов полей, например,
+          только буквы, пробелы и дефис для фамилий и т.д.
+        </li>
+        <li>
+          Фильтрация скопированного значения на предмет запрещённых символов
+        </li>
+        <li>Трансформация значения в UPPERCASE</li>
+      </ul>
+
+      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  smartType: 'default',
+  isUpperCase: false,
+  isDisabled: false,
+  hasFloatingLabel: true,
+};