@true-engineering/true-react-common-ui-kit 2.6.0 → 2.7.1

package/dist/types.d.ts

@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
 import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { ICommonIcon, IComplexIcon, IIconType, IPreloaderSvgType, ISvgIcon } from './components';
+import type { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
 export interface IDataAttributes {
     [key: string]: unknown;
 }
@@ -18,9 +17,8 @@ export interface IDropdownWithPopperOptions {
     placement?: Placement;
     flipOptions?: Record<string, any>;
 }
-export declare type IIcon = IIconType | ReactElement;
 export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FilterValueView' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
+export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FilterValueView' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'ListItem' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
 export declare type UiKitAnimations = Record<string, any>;
 export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -83,6 +83,7 @@
     "eslint": "8.36.0",
     "eslint-config-prettier": "8.7.0",
     "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-import": "2.29.0",
     "prettier": "2.8.3",
     "rollup-plugin-swc3": "0.3.0",
     "typescript": "4.9.3",

package/src/components/Button/Button.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import merge from 'lodash-es/merge';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { useTheme } from '../../hooks';
-import { ICommonProps, IIcon } from '../../types';
+import { ICommonProps } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
 import { IButtonSize, IButtonView } from './types';
 import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -9,7 +9,7 @@ import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
-import { IFilterWrapperProps } from '../FilterWrapper';
+import type { IFilterWrapperProps } from '../FilterWrapper';
 
 export interface IFilterProps<Values, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -5,7 +5,7 @@ import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import { defaultConvertFunction, getLocale } from '../../helpers';
 import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
-import { IFilterWrapperProps } from '../FilterWrapper';
+import type { IFilterWrapperProps } from '../FilterWrapper';
 import { styles } from './FilterValueView.styles';
 
 export function FilterValueView<Values, Key extends keyof Values>({

package/src/components/FiltersPane/constants.ts

@@ -1,5 +1,5 @@
 import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
-import {
+import type {
   IFilterLocale,
   IFilterLocaleKey,
   IPeriodGetter,

package/src/components/FiltersPane/types.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
-import {
+import type {
   IFilterIntervalProps,
   IFilterMultiSelectProps,
   IFilterSelectProps,

package/src/components/Icon/{helpers.ts → helpers.tsx}

@@ -1,5 +1,5 @@
 import { complexIcons } from './complexIcons';
-import { IComplexIcon, IIconType, ISvgIcon } from './types';
+import type { IComplexIcon, IIconType, ISvgIcon } from './types';
 
 export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
 

package/src/components/Icon/icons-list.ts

@@ -370,6 +370,26 @@ export const iconsList = checkIcons({
       },
     ],
   },
+  folder: {
+    viewBox: '0 0 20 20',
+    paths: [
+      {
+        d: 'M16.9 5H10.009L8.716 3.795C8.25211 3.34264 7.714 3 7.069 3H3.1C1.942 3 1 3.942 1 5.1V15.9C1 17.058 1.942 18 3.1 18H16.9C18.058 18 19 17.058 19 15.9V7.1C19 5.942 18.058 5 16.9 5Z',
+      },
+    ],
+  },
+  'folder-add': {
+    viewBox: '0 0 20 20',
+    paths: [
+      {
+        d: 'M16.9 5H10.009C10.009 5 9.19158 4.23037 8.716 3.795C8.24042 3.35963 7.714 3 7.069 3H3.1C1.942 3 1 3.942 1 5.1V15.9C1 17.058 1.942 18 3.1 18H16.9C18.058 18 19 17.058 19 15.9V7.1C19 5.942 18.058 5 16.9 5Z',
+      },
+      {
+        d: 'M13 13H11V15C11 15.5523 10.5523 16 10 16C9.44772 16 9 15.5523 9 15V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H9V9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9V11H13C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13Z',
+        fill: 'white',
+      },
+    ],
+  },
   food: {
     viewBox: '0 0 28 28',
     paths: [
@@ -495,6 +515,16 @@ export const iconsList = checkIcons({
       },
     ],
   },
+  presentation: {
+    viewBox: '0 0 20 20',
+    paths: [
+      { d: 'M8 10H12V11H8V10Z' },
+      { d: 'M14 8H6V9H14V8Z' },
+      {
+        d: 'M4 2C2.89543 2 2 2.89543 2 4V13C2 14.1046 2.89543 15 4 15H7.6906L5.76795 18.3301L7.5 19.3301L10 15L12.5004 19.3301L14.2324 18.3301L12.3098 15H16C17.1046 15 18 14.1046 18 13V4C18 2.89543 17.1046 2 16 2H4ZM16 6H4V13H16V6Z',
+      },
+    ],
+  },
   print: {
     paths: [
       {

package/src/components/Icon/index.ts

@@ -1,4 +1,5 @@
 export * from './Icon';
 export * from './types';
 export { iconsList } from './icons-list';
+export * from './snippet';
 export type { IconStyles } from './Icon.styles';

package/src/{helpers/snippets.tsx → components/Icon/snippet.tsx}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Icon } from '../components';
-import { IIcon } from '../types';
+import { Icon } from './Icon';
+import { IIcon } from './types';
 
 export const renderIcon = (icon: IIcon): ReactNode =>
   typeof icon === 'string' ? <Icon type={icon} /> : icon;

package/src/components/Icon/types.ts

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react';
+import { ReactElement, SVGAttributes } from 'react';
 import { complexIcons } from './complexIcons';
 import { iconsList } from './icons-list';
 
@@ -14,3 +14,5 @@ export type ICommonIcon = keyof typeof iconsList;
 export type IComplexIcon = keyof typeof complexIcons;
 
 export type IIconType = ICommonIcon | IComplexIcon;
+
+export type IIcon = IIconType | ReactElement;

package/src/components/Input/Input.tsx

@@ -19,10 +19,9 @@ import {
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps, IIcon } from '../../types';
-import { Icon } from '../Icon';
+import { ICommonProps } from '../../types';
+import { Icon, IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_SIZE } from './constants';
 import { IReactInputMaskProps } from './types';

package/src/components/List/List.stories.tsx

@@ -1,9 +1,8 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { colors } from '../../theme';
-import { List } from './List';
-import { IListItem } from './types';
+import { List, IListProps } from './List';
 
-const listItems: IListItem[] = [
+const listItems: IListProps['items'] = [
   {
     item: 'Печатать билет',
     onClick: console.log,
@@ -12,6 +11,7 @@ const listItems: IListItem[] = [
   { item: 'Выписать', onClick: console.log, withIconGap: true },
   {
     item: 'Аннулировать',
+    view: 'destructive',
     onClick: console.log,
     icon: <>2</>,
   },

package/src/components/List/List.styles.ts

@@ -1,10 +1,6 @@
 import { colors } from '../../theme';
 import { ComponentStyles } from '../../types';
 
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
-
 export const styles = {
   root: {
     minWidth: 180,
@@ -13,40 +9,6 @@ export const styles = {
     listStyle: 'none',
     margin: 0,
   },
-
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 16,
-    whiteSpace: 'nowrap',
-    minHeight: 40,
-    padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
-    cursor: 'pointer',
-  },
-
-  disabledItem: {
-    cursor: 'default',
-  },
-
-  spacer: {
-    height: 1,
-    backgroundColor: colors.BORDER_LIGHT,
-  },
-
-  withIconGap: {
-    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
-  },
-
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    marginRight: ICON_GAP,
-    flexShrink: 0,
-  },
-
-  content: {},
 };
 
 export type ListStyles = ComponentStyles<typeof styles>;

package/src/components/List/List.tsx

@@ -1,15 +1,9 @@
-import { FC, Fragment } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getTestId,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
+import { FC } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { IListItem } from './types';
+import { ListItem, IListItem } from '../ListItem';
 import { ListStyles, styles } from './List.styles';
 
 export interface IListProps extends ICommonProps {
@@ -30,24 +24,12 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {items.map((item, idx) => (
-        <Fragment key={idx}>
-          {item.shouldDrawSpacerAbove && <div className={classes.spacer} />}
-          <div
-            className={clsx(classes.item, {
-              [classes.disabledItem]: item.disabled,
-              [classes.withIconGap]: item.withIconGap,
-            })}
-            onClick={item.disabled ? undefined : () => handleItemClick(item)}
-            {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
-            {...(item.disabled && addDataAttributes({ disabled: item.disabled }))}
-          >
-            {isReactNodeNotEmpty(item.icon) && (
-              <span className={classes.icon}>{renderIcon(item.icon)}</span>
-            )}
-            <span className={classes.content}>{item.item}</span>
-          </div>
-          {item.shouldDrawSpacerBelow && <div className={classes.spacer} />}
-        </Fragment>
+        <ListItem
+          key={idx}
+          {...item}
+          testId={item.testId ?? getTestId(testId, `item-${idx}`)}
+          onClick={() => handleItemClick(item)}
+        />
       ))}
     </div>
   );

package/src/components/List/index.ts

@@ -1,3 +1,2 @@
 export * from './List';
-export * from './types';
 export type { ListStyles } from './List.styles';

package/src/components/ListItem/ListItem.stories.tsx

@@ -0,0 +1,67 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { colors } from '../../theme';
+import { ListItem } from './ListItem';
+import { IListItem } from './types';
+
+const listItems: IListItem[] = [
+  {
+    item: 'Печатать билет',
+    onClick: console.log,
+    icon: 'sign-out',
+  },
+  { item: 'Выписать', onClick: console.log, withIconGap: true },
+  {
+    item: 'Аннулировать',
+    view: 'destructive',
+    onClick: console.log,
+    icon: <>2</>,
+  },
+  {
+    item: 'Вернуть',
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+    shouldDrawSpacerBelow: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    withIconGap: true,
+  },
+];
+
+export default {
+  title: 'ListItem',
+  component: ListItem,
+  args: {
+    items: listItems,
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
+    },
+  },
+} as ComponentMeta<typeof ListItem>;
+
+export const Default: ComponentStory<typeof ListItem> = (args) => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      padding: 40,
+      gap: 10,
+    }}
+  >
+    {listItems.map((item, idx) => (
+      <ListItem key={idx} {...item} {...args} />
+    ))}
+  </div>
+);

package/src/components/ListItem/ListItem.styles.ts

@@ -0,0 +1,48 @@
+import { colors } from '../../theme';
+import type { ComponentStyles } from '../../types';
+
+const ITEM_HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 20;
+const ICON_GAP = 12;
+
+export const styles = {
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 16,
+    whiteSpace: 'nowrap',
+    minHeight: 40,
+    padding: [0, ITEM_HORIZONTAL_PADDING],
+    transition: 'background-color 0.25s ease-in-out',
+    cursor: 'pointer',
+  },
+
+  default: {},
+  destructive: {},
+  custom: {},
+
+  disabledItem: {
+    cursor: 'default',
+  },
+
+  spacer: {
+    height: 1,
+    backgroundColor: colors.BORDER_LIGHT,
+  },
+
+  withIconGap: {
+    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
+  },
+
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    marginRight: ICON_GAP,
+    flexShrink: 0,
+  },
+
+  content: {},
+};
+
+export type ListItemStyles = ComponentStyles<typeof styles>;

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,45 @@
+import { FC, Fragment } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { renderIcon } from '../Icon';
+import { IListItem } from './types';
+import { styles } from './ListItem.styles';
+
+export interface IListItemProps extends ICommonProps, IListItem {}
+
+export const ListItem: FC<IListItemProps> = ({
+  disabled,
+  icon,
+  item,
+  shouldDrawSpacerAbove,
+  shouldDrawSpacerBelow,
+  testId,
+  tweakStyles,
+  view = 'default',
+  withIconGap,
+  onClick,
+}) => {
+  const { classes } = useTheme('ListItem', styles, tweakStyles);
+
+  return (
+    <Fragment>
+      {shouldDrawSpacerAbove && <div className={classes.spacer} />}
+      <div
+        className={clsx(classes.item, classes[view], {
+          [classes.disabledItem]: disabled,
+          [classes.withIconGap]: withIconGap,
+        })}
+        onClick={disabled ? undefined : onClick}
+        {...addDataTestId(testId)}
+        {...(disabled && addDataAttributes({ disabled }))}
+      >
+        {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
+        <span className={classes.content}>{item}</span>
+      </div>
+      {shouldDrawSpacerBelow && <div className={classes.spacer} />}
+    </Fragment>
+  );
+};

package/src/components/ListItem/constants.ts

@@ -0,0 +1,5 @@
+export const LIST_ITEM_VIEW = [
+  'default',
+  'destructive',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;

package/src/components/ListItem/index.ts

@@ -0,0 +1,3 @@
+export * from './ListItem';
+export * from './types';
+export type { ListItemStyles } from './ListItem.styles';

package/src/components/ListItem/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { IIcon } from '../Icon';
+import { LIST_ITEM_VIEW } from './constants';
+import type { ListItemStyles } from './ListItem.styles';
+
+export type IListItemView = (typeof LIST_ITEM_VIEW)[number];
+
+export interface IListItem {
+  item: ReactNode;
+  view?: IListItemView;
+  icon?: IIcon;
+  disabled?: boolean;
+  shouldDrawSpacerAbove?: boolean;
+  shouldDrawSpacerBelow?: boolean;
+  withIconGap?: boolean;
+  testId?: string;
+  tweakStyles?: ListItemStyles;
+  onClick(): void;
+}

package/src/components/MoreMenu/MoreMenu.tsx

@@ -5,12 +5,12 @@ import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
+import { List, IListProps } from '../List';
 import { MoreMenuStyles, styles } from './MoreMenu.styles';
 
 export interface IMoreMenuProps extends ICommonProps {
   tweakStyles?: MoreMenuStyles;
-  items: IListItem[];
+  items: IListProps['items'];
   isDisabled?: boolean;
   /**
    * @default true

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -2,7 +2,8 @@ import { ReactElement } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
-import { Icon, IMultiSelectListValues } from '../../../index';
+import { Icon } from '../../../Icon';
+import type { IMultiSelectListValues } from '../../../MultiSelectList';
 import { styles } from './MultiSelectInput.styles';
 
 export interface IMultiSelectInputProps<Value> extends ICommonProps {

package/src/components/NumberInput/helpers.ts

@@ -1,6 +1,6 @@
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { formatNumber, isSpaceChar } from '../../helpers';
-import { INumberInputProps } from './NumberInput';
+import type { INumberInputProps } from './NumberInput';
 
 const getPrevSpaces = (val: string, position: number): number =>
   val

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { phoneInfo } from '../../constants';
 import { iconsList } from '../Icon';
 import { PhoneInput } from './PhoneInput';
-import { phoneInfo } from './phone-info';
 import { IPhoneValue } from './types';
 
 const iconTypes = [undefined, ...Object.keys(iconsList)];

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -1,5 +1,6 @@
 import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
+import { phoneInfo } from '../../../../constants';
 import {
   checkSearchStringInCountry,
   getCountryTextByLocale,
@@ -12,7 +13,6 @@ import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
 import { Input } from '../../../Input';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { phoneInfo } from '../../phone-info';
 import { IPhoneInfo } from '../../types';
 import { PhoneInputCountryListStyles, styles } from './PhoneInputCountryList.styles';
 

package/src/components/PhoneInput/index.ts

@@ -1,5 +1,4 @@
 export * from './PhoneInput';
-export { phoneInfo } from './phone-info';
 export * from './types';
 export type { PhoneInputStyles } from './PhoneInput.styles';
 export type { PhoneInputCountryListStyles } from './components';

package/src/components/Select/Select.tsx

@@ -22,7 +22,6 @@ import {
   createFilter,
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import {
   useIsMounted,
   useTheme,
@@ -30,7 +29,8 @@ import {
   useDropdown,
   useTweakStyles,
 } from '../../hooks';
-import { IDropdownWithPopperOptions, IIcon } from '../../types';
+import { IDropdownWithPopperOptions } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
 import { IInputProps, Input } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectList } from './components';

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,7 +1,7 @@
 import { rgba } from '../../helpers';
 import { colors, dimensions } from '../../theme';
 import { ComponentStyles } from '../../types';
-import { ITooltipProps } from './Tooltip';
+import type { ITooltipProps } from './Tooltip';
 
 interface IStyleProps {
   type: NonNullable<ITooltipProps['type']>;

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './Icon';
 export * from './IncrementInput';
 export * from './Input';
 export * from './List';
+export * from './ListItem';
 export * from './Modal';
 export * from './MoreMenu';
 export * from './MultiSelect';

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './phone-info';

package/src/{components/PhoneInput → constants}/phone-info.ts

@@ -1,4 +1,4 @@
-import { IPhoneInfo } from './types';
+import type { IPhoneInfo } from '../components';
 
 export const phoneInfo: IPhoneInfo[] = [
   {

package/src/helpers/phone.ts

@@ -1,5 +1,6 @@
 import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
-import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
+import type { IPhoneInfo, IPhoneValue } from '../components';
+import { phoneInfo } from '../constants';
 
 export const findCountryByCode = (
   countryCode?: string,

package/src/index.ts

@@ -2,5 +2,5 @@ export { commonTheme } from './theme';
 export * from './components';
 export * from './hooks';
 export * from './types';
+export * from './constants';
 export * from './helpers';
-export * from './helpers/snippets';