@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha4

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

@@ -1,73 +1,73 @@
-import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
-
-export const ROW_HEIGHT = 40;
-export const CONTAINER_PADDING = 10;
-export const CELL_PADDING = [10, 20];
-
-export const useStyles = createThemedStyles('SelectList', {
-  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,
-  },
-
-  withListFooter: {
-    paddingBottom: 0,
-  },
-
-  listHeader: {},
-
-  listFooter: {},
-
-  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,
-  },
-
-  cellWithCheckbox: {
-    padding: 0,
-  },
-
-  noMatchesLabel: {
-    pointerEvents: 'none',
-  },
-
-  focused: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  loading: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  defaultCell: {},
-});
-
-export type ISelectListStyles = ITweakStyles<typeof useStyles>;
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+
+export const ROW_HEIGHT = 40;
+export const CONTAINER_PADDING = 10;
+export const CELL_PADDING = [10, 20];
+
+export const useStyles = createThemedStyles('SelectList', {
+  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,
+  },
+
+  withListFooter: {
+    paddingBottom: 0,
+  },
+
+  listHeader: {},
+
+  listFooter: {},
+
+  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,
+  },
+
+  cellWithCheckbox: {
+    padding: 0,
+  },
+
+  noMatchesLabel: {
+    pointerEvents: 'none',
+  },
+
+  focused: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  loading: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  defaultCell: {},
+});
+
+export type ISelectListStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,152 +1,152 @@
-import { useMemo, type ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getArray,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { type ICommonProps } from '../../../../types';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
-import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
-import { useStyles, 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[];
-  noMatchesLabel?: string;
-  isLoading?: boolean;
-  loadingLabel?: ReactNode;
-  defaultOptionLabel?: ReactNode;
-  allOptionsLabel?: ReactNode;
-  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 function SelectList<Value>({
-  options,
-  focusedIndex,
-  activeValue,
-  defaultOptionLabel,
-  noMatchesLabel = 'Совпадений не найдено',
-  isLoading,
-  loadingLabel = 'Загрузка...',
-  tweakStyles,
-  testId,
-  shouldScrollToList = true,
-  areAllOptionsSelected,
-  customListHeader,
-  customListFooter,
-  isMultiSelect,
-  isOptionDisabled,
-  allOptionsLabel,
-  onOptionSelect,
-  onToggleCheckbox,
-  convertValueToString,
-  convertValueToReactNode = convertValueToString,
-  convertValueToId,
-}: ISelectListProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
-  const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
-
-  const optionsDisableMap = useMemo(
-    () => options.map(isOptionDisabled),
-    [options, isOptionDisabled],
-  );
-
-  const listOptions = useMemo(
-    () => options.map((option, index) => convertValueToReactNode(option, optionsDisableMap[index])),
-    [options, convertValueToReactNode, optionsDisableMap],
-  );
-
-  const activeOptionsIds = useMemo(
-    () => new Set((getArray(activeValue) as Value[]).map(convertValueToId)),
-    [activeValue, convertValueToId],
-  );
-
-  return (
-    <ScrollIntoViewIfNeeded
-      active={shouldScrollToList && !isMultiSelect}
-      className={clsx(classes.root, {
-        [classes.withListHeader]: isHeaderNotEmpty,
-        [classes.withListFooter]: isFooterNotEmpty,
-      })}
-    >
-      {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
-      <div className={classes.list} {...addDataTestId(testId)}>
-        {isLoading ? (
-          <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
-        ) : (
-          <>
-            {isReactNodeNotEmpty(defaultOptionLabel) && (
-              <ScrollIntoViewIfNeeded
-                active={focusedIndex === DEFAULT_OPTION_INDEX}
-                options={{ block: 'nearest' }}
-                className={clsx(
-                  classes.cell,
-                  classes.defaultCell,
-                  focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
-                )}
-                onClick={(event) => onOptionSelect(DEFAULT_OPTION_INDEX, event)}
-              >
-                {defaultOptionLabel}
-              </ScrollIntoViewIfNeeded>
-            )}
-            {isReactNodeNotEmpty(allOptionsLabel) && (
-              <SelectListItem
-                classes={classes}
-                index={ALL_OPTION_INDEX}
-                isSemiChecked={activeOptionsIds.size > 0 && !areAllOptionsSelected}
-                isActive={areAllOptionsSelected}
-                isFocused={focusedIndex === ALL_OPTION_INDEX}
-                isMultiSelect={isMultiSelect}
-                onOptionSelect={onOptionSelect}
-                onToggleCheckbox={onToggleCheckbox}
-              >
-                {allOptionsLabel}
-              </SelectListItem>
-            )}
-            {listOptions.map((opt, i) => {
-              const optionValue = options[i];
-              const isFocused = focusedIndex === i;
-              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
-              // проверяем, что опция задизейблена
-              const isDisabled = optionsDisableMap[i];
-
-              return (
-                <SelectListItem
-                  key={i}
-                  classes={classes}
-                  index={i}
-                  isDisabled={isDisabled}
-                  isActive={isActive}
-                  isFocused={isFocused}
-                  isMultiSelect={isMultiSelect}
-                  onOptionSelect={onOptionSelect}
-                  onToggleCheckbox={onToggleCheckbox}
-                >
-                  {opt}
-                </SelectListItem>
-              );
-            })}
-            {listOptions.length === 0 && (
-              <div className={clsx(classes.cell, classes.noMatchesLabel)}>{noMatchesLabel}</div>
-            )}
-          </>
-        )}
-      </div>
-      {isFooterNotEmpty && <div className={classes.listFooter}>{customListFooter}</div>}
-    </ScrollIntoViewIfNeeded>
-  );
-}
+import { useMemo, type ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getArray,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { type ICommonProps } from '../../../../types';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
+import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
+import { useStyles, 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[];
+  noMatchesLabel?: string;
+  isLoading?: boolean;
+  loadingLabel?: ReactNode;
+  defaultOptionLabel?: ReactNode;
+  allOptionsLabel?: ReactNode;
+  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 function SelectList<Value>({
+  options,
+  focusedIndex,
+  activeValue,
+  defaultOptionLabel,
+  noMatchesLabel = 'Совпадений не найдено',
+  isLoading,
+  loadingLabel = 'Загрузка...',
+  tweakStyles,
+  testId,
+  shouldScrollToList = true,
+  areAllOptionsSelected,
+  customListHeader,
+  customListFooter,
+  isMultiSelect,
+  isOptionDisabled,
+  allOptionsLabel,
+  onOptionSelect,
+  onToggleCheckbox,
+  convertValueToString,
+  convertValueToReactNode = convertValueToString,
+  convertValueToId,
+}: ISelectListProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
+  const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
+
+  const optionsDisableMap = useMemo(
+    () => options.map(isOptionDisabled),
+    [options, isOptionDisabled],
+  );
+
+  const listOptions = useMemo(
+    () => options.map((option, index) => convertValueToReactNode(option, optionsDisableMap[index])),
+    [options, convertValueToReactNode, optionsDisableMap],
+  );
+
+  const activeOptionsIds = useMemo(
+    () => new Set((getArray(activeValue) as Value[]).map(convertValueToId)),
+    [activeValue, convertValueToId],
+  );
+
+  return (
+    <ScrollIntoViewIfNeeded
+      active={shouldScrollToList && !isMultiSelect}
+      className={clsx(classes.root, {
+        [classes.withListHeader]: isHeaderNotEmpty,
+        [classes.withListFooter]: isFooterNotEmpty,
+      })}
+    >
+      {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
+      <div className={classes.list} {...addDataTestId(testId)}>
+        {isLoading ? (
+          <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
+        ) : (
+          <>
+            {isReactNodeNotEmpty(defaultOptionLabel) && (
+              <ScrollIntoViewIfNeeded
+                active={focusedIndex === DEFAULT_OPTION_INDEX}
+                options={{ block: 'nearest' }}
+                className={clsx(
+                  classes.cell,
+                  classes.defaultCell,
+                  focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
+                )}
+                onClick={(event) => onOptionSelect(DEFAULT_OPTION_INDEX, event)}
+              >
+                {defaultOptionLabel}
+              </ScrollIntoViewIfNeeded>
+            )}
+            {isReactNodeNotEmpty(allOptionsLabel) && (
+              <SelectListItem
+                classes={classes}
+                index={ALL_OPTION_INDEX}
+                isSemiChecked={activeOptionsIds.size > 0 && !areAllOptionsSelected}
+                isActive={areAllOptionsSelected}
+                isFocused={focusedIndex === ALL_OPTION_INDEX}
+                isMultiSelect={isMultiSelect}
+                onOptionSelect={onOptionSelect}
+                onToggleCheckbox={onToggleCheckbox}
+              >
+                {allOptionsLabel}
+              </SelectListItem>
+            )}
+            {listOptions.map((opt, i) => {
+              const optionValue = options[i];
+              const isFocused = focusedIndex === i;
+              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              // проверяем, что опция задизейблена
+              const isDisabled = optionsDisableMap[i];
+
+              return (
+                <SelectListItem
+                  key={i}
+                  classes={classes}
+                  index={i}
+                  isDisabled={isDisabled}
+                  isActive={isActive}
+                  isFocused={isFocused}
+                  isMultiSelect={isMultiSelect}
+                  onOptionSelect={onOptionSelect}
+                  onToggleCheckbox={onToggleCheckbox}
+                >
+                  {opt}
+                </SelectListItem>
+              );
+            })}
+            {listOptions.length === 0 && (
+              <div className={clsx(classes.cell, classes.noMatchesLabel)}>{noMatchesLabel}</div>
+            )}
+          </>
+        )}
+      </div>
+      {isFooterNotEmpty && <div className={classes.listFooter}>{customListFooter}</div>}
+    </ScrollIntoViewIfNeeded>
+  );
+}

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

@@ -1,2 +1,2 @@
-export * from './SelectList';
-export type { ISelectListStyles } from './SelectList.styles';
+export * from './SelectList';
+export type { ISelectListStyles } from './SelectList.styles';

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

@@ -1,14 +1,14 @@
-import { ICheckboxStyles } from '../../../Checkbox';
-import { CELL_PADDING } from '../SelectList/SelectList.styles';
-
-export const checkboxStyles: ICheckboxStyles = {
-  root: {
-    padding: CELL_PADDING,
-    width: '100%',
-  },
-
-  input: {
-    // иначе будет фокуситься и энтер будет вызывать изменение нескольких опций
-    display: 'none',
-  },
-};
+import { ICheckboxStyles } from '../../../Checkbox';
+import { CELL_PADDING } from '../SelectList/SelectList.styles';
+
+export const checkboxStyles: ICheckboxStyles = {
+  root: {
+    padding: CELL_PADDING,
+    width: '100%',
+  },
+
+  input: {
+    // иначе будет фокуситься и энтер будет вызывать изменение нескольких опций
+    display: 'none',
+  },
+};

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -1,76 +1,76 @@
-import {
-  type ChangeEvent,
-  type FC,
-  type KeyboardEvent,
-  type MouseEvent,
-  type ReactNode,
-} from 'react';
-import clsx from 'clsx';
-import { type Classes } from 'jss';
-import { addDataAttributes } from '../../../../helpers';
-import { Checkbox } from '../../../Checkbox';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { checkboxStyles } from './SelectListItem.styles';
-
-export interface ISelectListItemProps {
-  index: number;
-  isSemiChecked?: boolean;
-  isDisabled?: boolean;
-  isActive?: boolean;
-  isFocused?: boolean;
-  children: ReactNode;
-  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
-  isMultiSelect?: boolean;
-  onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-  onToggleCheckbox: (
-    index: number,
-    isSelected: boolean,
-    event: ChangeEvent<HTMLElement> | KeyboardEvent,
-  ) => void;
-}
-
-export const SelectListItem: FC<ISelectListItemProps> = ({
-  classes,
-  index,
-  isSemiChecked,
-  isDisabled,
-  isActive,
-  children,
-  isFocused,
-  isMultiSelect,
-  onOptionSelect,
-  onToggleCheckbox,
-}) => {
-  const multiSelectContent = isMultiSelect && (
-    <Checkbox
-      isChecked={isActive || isSemiChecked}
-      isSemiChecked={isSemiChecked}
-      isDisabled={isDisabled}
-      tweakStyles={checkboxStyles}
-      onSelect={({ isSelected }, event) => onToggleCheckbox(index, isSelected, event)}
-    >
-      {children}
-    </Checkbox>
-  );
-
-  return (
-    <ScrollIntoViewIfNeeded
-      active={isFocused}
-      options={{ block: 'nearest' }}
-      className={clsx(classes.cell, {
-        [classes.cellWithCheckbox]: isMultiSelect,
-        [classes.focused]: isFocused,
-        [classes.active]: isActive && !isMultiSelect,
-        [classes.disabled]: isDisabled,
-      })}
-      {...addDataAttributes({
-        disabled: isDisabled,
-        active: isActive,
-        focused: isFocused,
-      })}
-      onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
-    >
-      {isMultiSelect ? multiSelectContent : children}
-    </ScrollIntoViewIfNeeded>
-  );
-};
+import {
+  type ChangeEvent,
+  type FC,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import { type Classes } from 'jss';
+import { addDataAttributes } from '../../../../helpers';
+import { Checkbox } from '../../../Checkbox';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { checkboxStyles } from './SelectListItem.styles';
+
+export interface ISelectListItemProps {
+  index: number;
+  isSemiChecked?: boolean;
+  isDisabled?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  children: ReactNode;
+  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
+  isMultiSelect?: boolean;
+  onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
+  onToggleCheckbox: (
+    index: number,
+    isSelected: boolean,
+    event: ChangeEvent<HTMLElement> | KeyboardEvent,
+  ) => void;
+}
+
+export const SelectListItem: FC<ISelectListItemProps> = ({
+  classes,
+  index,
+  isSemiChecked,
+  isDisabled,
+  isActive,
+  children,
+  isFocused,
+  isMultiSelect,
+  onOptionSelect,
+  onToggleCheckbox,
+}) => {
+  const multiSelectContent = isMultiSelect && (
+    <Checkbox
+      isChecked={isActive || isSemiChecked}
+      isSemiChecked={isSemiChecked}
+      isDisabled={isDisabled}
+      tweakStyles={checkboxStyles}
+      onSelect={({ isSelected }, event) => onToggleCheckbox(index, isSelected, event)}
+    >
+      {children}
+    </Checkbox>
+  );
+
+  return (
+    <ScrollIntoViewIfNeeded
+      active={isFocused}
+      options={{ block: 'nearest' }}
+      className={clsx(classes.cell, {
+        [classes.cellWithCheckbox]: isMultiSelect,
+        [classes.focused]: isFocused,
+        [classes.active]: isActive && !isMultiSelect,
+        [classes.disabled]: isDisabled,
+      })}
+      {...addDataAttributes({
+        disabled: isDisabled,
+        active: isActive,
+        focused: isFocused,
+      })}
+      onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
+    >
+      {isMultiSelect ? multiSelectContent : children}
+    </ScrollIntoViewIfNeeded>
+  );
+};

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

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

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

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

package/src/components/Select/constants.ts

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