@true-engineering/true-react-common-ui-kit 3.39.0 → 3.40.0

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -1,103 +1,103 @@
-import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
-import { IInputStyles } from '../../../Input';
-
-const ROW_HEIGHT = 40;
-const LIST_PADDING = 10;
-
-export const useStyles = createThemedStyles('PhoneInputCountryList', {
-  root: {
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.CLASSIC_WHITE,
-    border: [1, 'solid', colors.BORDER_MAIN],
-    boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.25)',
-    overflow: 'hidden',
-  },
-
-  searchContainer: {
-    width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    padding: [0, 8, 0, 16],
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-  },
-
-  searchIcon: {
-    extend: 'icon',
-    color: colors.FONT_LABEL,
-    flexShrink: 0,
-  },
-
-  flagList: {
-    maxHeight: ROW_HEIGHT * 6 + 2 * LIST_PADDING,
-    padding: [LIST_PADDING, 0],
-    ...helpers.withScrollBar,
-  },
-
-  listItem: {
-    height: ROW_HEIGHT,
-    padding: [12, 16],
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    fontSize: 14,
-    lineHeight: '20px',
-    letterSpacing: 0.15,
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-  },
-
-  selectedCountry: {
-    backgroundColor: colors.GREY_BACKGROUND,
-  },
-
-  activeCountry: {
-    backgroundColor: colors.GREY_FOCUS,
-  },
-
-  flag: {
-    width: 22,
-    height: 16,
-    flexShrink: 0,
-  },
-
-  countryName: {
-    color: colors.FONT_MAIN,
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    margin: [0, 8, 0, 12],
-  },
-
-  dialCode: {
-    color: colors.GREY_ACTIVE,
-  },
-
-  emptyResult: {
-    color: colors.FONT_LABEL,
-    padding: [6, 16],
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    border: 'none',
-    height: 'calc(var(--control-height) - 2px)',
-  },
-
-  input: {
-    fontSize: 14,
-    lineHeight: '20px',
-    letterSpacing: 0.15,
-  },
-};
-
-export type IPhoneInputCountryListStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakInput: IInputStyles }
->;
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
+
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 10;
+
+export const useStyles = createThemedStyles('PhoneInputCountryList', {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    border: [1, 'solid', colors.BORDER_MAIN],
+    boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.25)',
+    overflow: 'hidden',
+  },
+
+  searchContainer: {
+    width: '100%',
+    height: dimensions.CONTROL_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    padding: [0, 8, 0, 16],
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+  },
+
+  searchIcon: {
+    extend: 'icon',
+    color: colors.FONT_LABEL,
+    flexShrink: 0,
+  },
+
+  flagList: {
+    maxHeight: ROW_HEIGHT * 6 + 2 * LIST_PADDING,
+    padding: [LIST_PADDING, 0],
+    ...helpers.withScrollBar,
+  },
+
+  listItem: {
+    height: ROW_HEIGHT,
+    padding: [12, 16],
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+  },
+
+  selectedCountry: {
+    backgroundColor: colors.GREY_BACKGROUND,
+  },
+
+  activeCountry: {
+    backgroundColor: colors.GREY_FOCUS,
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+    flexShrink: 0,
+  },
+
+  countryName: {
+    color: colors.FONT_MAIN,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    margin: [0, 8, 0, 12],
+  },
+
+  dialCode: {
+    color: colors.GREY_ACTIVE,
+  },
+
+  emptyResult: {
+    color: colors.FONT_LABEL,
+    padding: [6, 16],
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    border: 'none',
+    height: 'calc(var(--control-height) - 2px)',
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+  },
+};
+
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;

package/src/components/PhoneInput/components/PhoneInputCountryList/index.ts

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

package/src/components/PhoneInput/components/index.ts

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

package/src/components/PhoneInput/constants.ts

@@ -1,3 +1,3 @@
-import { IPhoneValue } from './types';
-
-export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };
+import { IPhoneValue } from './types';
+
+export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };

package/src/components/PhoneInput/index.ts

@@ -1,4 +1,4 @@
-export * from './PhoneInput';
-export * from './types';
-export type { IPhoneInputStyles } from './PhoneInput.styles';
-export type { IPhoneInputCountryListStyles } from './components';
+export * from './PhoneInput';
+export * from './types';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

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/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/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,50 +1,50 @@
-import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-
-const LEFT_PADDING = 44;
-
-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,
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    height: 35,
-    borderColor: 'transparent',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  input: {
-    fontSize: 14,
-    paddingLeft: 0,
-  },
-
-  label: {
-    left: LEFT_PADDING,
-    fontSize: 14,
-  },
-};
-
-export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+import { rgba } from '../../helpers';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+const LEFT_PADDING = 44;
+
+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,
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    height: 35,
+    borderColor: 'transparent',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    borderRadius: 18,
+    paddingLeft: LEFT_PADDING,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  input: {
+    fontSize: 14,
+    paddingLeft: 0,
+  },
+
+  label: {
+    left: LEFT_PADDING,
+    fontSize: 14,
+  },
+};
+
+export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;