@true-engineering/true-react-common-ui-kit 3.50.0 → 3.51.0

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,37 +1,37 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('RadioButton', {
-  input: {
-    appearance: 'none',
-    cursor: 'pointer',
-    borderRadius: '50%',
-    width: 18,
-    height: 18,
-    outline: 'none',
-    transition: '0.1s all ease-in-out',
-    margin: 0,
-    border: [1, 'solid', '#000'],
-
-    '&:checked': {
-      border: [5, 'solid', '#000'],
-    },
-  },
-
-  label: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  content: {
-    marginLeft: 8,
-  },
-
-  isDisabled: {
-    cursor: 'default',
-  },
-
-  isInvalid: {},
-});
-
-export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('RadioButton', {
+  input: {
+    appearance: 'none',
+    cursor: 'pointer',
+    borderRadius: '50%',
+    width: 18,
+    height: 18,
+    outline: 'none',
+    transition: '0.1s all ease-in-out',
+    margin: 0,
+    border: [1, 'solid', '#000'],
+
+    '&:checked': {
+      border: [5, 'solid', '#000'],
+    },
+  },
+
+  label: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  content: {
+    marginLeft: 8,
+  },
+
+  isDisabled: {
+    cursor: 'default',
+  },
+
+  isInvalid: {},
+});
+
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,57 +1,57 @@
-import { ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
-
-export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
-  children?: ReactNode;
-  value: Value;
-  groupName: string;
-  isChecked?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  onChange: (value: Value) => void | Promise<void>;
-}
-
-export function RadioButton<Value extends string>({
-  children,
-  value,
-  groupName,
-  isChecked,
-  isDisabled = false,
-  isInvalid = false,
-  data,
-  testId,
-  tweakStyles,
-  onChange,
-}: IRadioButtonProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
-      htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        id={`${groupName}--${value}`}
-        type="radio"
-        value={value}
-        name={groupName}
-        checked={isChecked}
-        disabled={isDisabled}
-        onChange={(event) => onChange(event.target.value as Value)}
-        className={clsx(classes.input, {
-          [classes.isDisabled]: isDisabled,
-          [classes.isInvalid]: isInvalid,
-        })}
-      />
-      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
-    </label>
-  );
-}
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
+
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
+  children?: ReactNode;
+  value: Value;
+  groupName: string;
+  isChecked?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  onChange: (value: Value) => void | Promise<void>;
+}
+
+export function RadioButton<Value extends string>({
+  children,
+  value,
+  groupName,
+  isChecked,
+  isDisabled = false,
+  isInvalid = false,
+  data,
+  testId,
+  tweakStyles,
+  onChange,
+}: IRadioButtonProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <label
+      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      htmlFor={`${groupName}--${value}`}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        id={`${groupName}--${value}`}
+        type="radio"
+        value={value}
+        name={groupName}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={(event) => onChange(event.target.value as Value)}
+        className={clsx(classes.input, {
+          [classes.isDisabled]: isDisabled,
+          [classes.isInvalid]: isInvalid,
+        })}
+      />
+      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
+    </label>
+  );
+}

package/src/components/RadioButton/index.ts

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

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -1,54 +1,54 @@
-import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
-import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
-import {
-  ScrollIntoViewIfNeededDefaultElementType,
-  ScrollIntoViewIfNeededDefaultProps,
-} from './constants';
-
-export interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
-  active?: boolean;
-  children?: ReactNode;
-  elementType?: string;
-  options?: StandardBehaviorOptions;
-}
-
-export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
-  node: RefObject<HTMLElement> = createRef();
-
-  public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
-
-  componentDidMount() {
-    const { active } = this.props;
-    if (active) {
-      this.handleScrollIntoViewIfNeeded();
-    }
-  }
-
-  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps) {
-    const { active: isNowActive } = this.props;
-    if (!active && isNowActive) {
-      this.handleScrollIntoViewIfNeeded();
-    }
-  }
-
-  handleScrollIntoViewIfNeeded = () => {
-    const { options } = this.props;
-    const { current: node } = this.node;
-
-    if (node) {
-      scrollIntoViewIfNeeded(node, options);
-    }
-  };
-
-  render() {
-    const { active, elementType, children, options, ...wrapperProps } = this.props;
-
-    return createElement(
-      elementType ?? ScrollIntoViewIfNeededDefaultElementType,
-      { ref: this.node, ...wrapperProps },
-      children,
-    );
-  }
-}
-
-export default ScrollIntoViewIfNeeded;
+import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
+import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
+import {
+  ScrollIntoViewIfNeededDefaultElementType,
+  ScrollIntoViewIfNeededDefaultProps,
+} from './constants';
+
+export interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
+  active?: boolean;
+  children?: ReactNode;
+  elementType?: string;
+  options?: StandardBehaviorOptions;
+}
+
+export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
+  node: RefObject<HTMLElement> = createRef();
+
+  public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
+
+  componentDidMount() {
+    const { active } = this.props;
+    if (active) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps) {
+    const { active: isNowActive } = this.props;
+    if (!active && isNowActive) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  handleScrollIntoViewIfNeeded = () => {
+    const { options } = this.props;
+    const { current: node } = this.node;
+
+    if (node) {
+      scrollIntoViewIfNeeded(node, options);
+    }
+  };
+
+  render() {
+    const { active, elementType, children, options, ...wrapperProps } = this.props;
+
+    return createElement(
+      elementType ?? ScrollIntoViewIfNeededDefaultElementType,
+      { ref: this.node, ...wrapperProps },
+      children,
+    );
+  }
+}
+
+export default ScrollIntoViewIfNeeded;

package/src/components/ScrollIntoViewIfNeeded/constants.ts

@@ -1,12 +1,12 @@
-import type { IScrollIntoViewIfNeededProps } from './ScrollIntoViewIfNeeded';
-
-export const ScrollIntoViewIfNeededDefaultElementType = 'div';
-
-export const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
-  active: true,
-  elementType: ScrollIntoViewIfNeededDefaultElementType,
-  options: {
-    behavior: 'smooth',
-    scrollMode: 'if-needed',
-  },
-};
+import type { IScrollIntoViewIfNeededProps } from './ScrollIntoViewIfNeeded';
+
+export const ScrollIntoViewIfNeededDefaultElementType = 'div';
+
+export const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
+  active: true,
+  elementType: ScrollIntoViewIfNeededDefaultElementType,
+  options: {
+    behavior: 'smooth',
+    scrollMode: 'if-needed',
+  },
+};

package/src/components/ScrollIntoViewIfNeeded/index.ts

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

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,23 +1,23 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SearchInput } from './SearchInput';
-
-export default {
-  title: 'Inputs/SearchInput',
-  component: SearchInput,
-};
-
-const Template: ComponentStory<typeof SearchInput> = (args) => {
-  const [value, setValue] = useState('');
-  return (
-    <div style={{ width: 320 }}>
-      <SearchInput {...args} value={value} onChange={setValue} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Поиск',
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { SearchInput } from './SearchInput';
+
+export default {
+  title: 'Inputs/SearchInput',
+  component: SearchInput,
+};
+
+const Template: ComponentStory<typeof SearchInput> = (args) => {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ width: 320 }}>
+      <SearchInput {...args} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  placeholder: 'Поиск',
+};

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,52 +1,52 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-
-export const useStyles = createThemedStyles('SearchInput', {
-  root: {
-    position: 'relative',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    zIndex: 2,
-    color: colors.GREY_ACTIVE,
-  },
-
-  iconClickable: {
-    cursor: 'pointer',
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    height: 35,
-    borderColor: 'transparent',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    borderRadius: 18,
-    paddingLeft: 44,
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  input: {
-    fontSize: 14,
-    paddingLeft: 0,
-  },
-
-  label: {
-    left: 0,
-    fontSize: 14,
-  },
-};
-
-export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+export const useStyles = createThemedStyles('SearchInput', {
+  root: {
+    position: 'relative',
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    left: 12,
+    height: '100%',
+    width: 20,
+    zIndex: 2,
+    color: colors.GREY_ACTIVE,
+  },
+
+  iconClickable: {
+    cursor: 'pointer',
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    height: 35,
+    borderColor: 'transparent',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    borderRadius: 18,
+    paddingLeft: 44,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  input: {
+    fontSize: 14,
+    paddingLeft: 0,
+  },
+
+  label: {
+    left: 0,
+    fontSize: 14,
+  },
+};
+
+export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,68 +1,68 @@
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import {
-  addClickHandler,
-  addDataAttributes,
-  getTestId,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IInputProps, Input } from '../Input';
-import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
-
-export interface ISearchInputProps
-  extends ICommonProps<ISearchInputStyles>,
-    Omit<
-      IInputProps,
-      | 'type'
-      | 'isInvalid'
-      | 'errorMessage'
-      | 'label'
-      | 'isActive'
-      | 'errorPosition'
-      | 'hasFloatingLabel'
-      | 'border'
-      | 'tweakStyles'
-    > {
-  // TODO: Можно будет удалить в 4й версии
-  onSearchIconClick?: () => void;
-}
-
-export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
-  ({ isClearable = true, tweakStyles, testId, data, onSearchIconClick, ...props }, ref) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakInputStyles = useTweakStyles({
-      innerStyles: inputStyles,
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'SearchInput',
-    });
-
-    return (
-      <div className={classes.root} {...addDataAttributes(data, testId)}>
-        <div
-          className={clsx(classes.icon, { [classes.iconClickable]: isNotEmpty(onSearchIconClick) })}
-          {...addClickHandler(onSearchIconClick)}
-        >
-          <Icon type="search" />
-        </div>
-        <Input
-          ref={ref}
-          inputMode="search"
-          isClearable={isClearable}
-          isActive={props.value !== '' && props.value !== undefined}
-          testId={getTestId(testId, 'input')}
-          tweakStyles={tweakInputStyles}
-          hasFloatingLabel={false}
-          label={props.placeholder}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-
-SearchInput.displayName = 'SearchInput';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import {
+  addClickHandler,
+  addDataAttributes,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
+
+export interface ISearchInputProps
+  extends ICommonProps<ISearchInputStyles>,
+    Omit<
+      IInputProps,
+      | 'type'
+      | 'isInvalid'
+      | 'errorMessage'
+      | 'label'
+      | 'isActive'
+      | 'errorPosition'
+      | 'hasFloatingLabel'
+      | 'border'
+      | 'tweakStyles'
+    > {
+  // TODO: Можно будет удалить в 4й версии
+  onSearchIconClick?: () => void;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, tweakStyles, testId, data, onSearchIconClick, ...props }, ref) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
+
+    return (
+      <div className={classes.root} {...addDataAttributes(data, testId)}>
+        <div
+          className={clsx(classes.icon, { [classes.iconClickable]: isNotEmpty(onSearchIconClick) })}
+          {...addClickHandler(onSearchIconClick)}
+        >
+          <Icon type="search" />
+        </div>
+        <Input
+          ref={ref}
+          inputMode="search"
+          isClearable={isClearable}
+          isActive={props.value !== '' && props.value !== undefined}
+          testId={getTestId(testId, 'input')}
+          tweakStyles={tweakInputStyles}
+          hasFloatingLabel={false}
+          label={props.placeholder}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = 'SearchInput';

package/src/components/SearchInput/index.ts

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