@true-engineering/true-react-common-ui-kit 3.0.0-alpha.9 → 3.0.0

package/dist/types.d.ts

@@ -1,6 +1,4 @@
-import { ReactElement } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { IIconType } from './components';
 export interface IDataAttributes {
     [key: string]: unknown;
 }
@@ -19,4 +17,3 @@ export interface IDropdownWithPopperOptions {
     placement?: Placement;
     flipOptions?: Record<string, any>;
 }
-export declare type IIcon = IIconType | ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0",
   "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

@@ -2,9 +2,9 @@ import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps, IIcon } from '../../types';
+import { ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
 import { ThemedPreloader, IThemedPreloaderProps } from '../ThemedPreloader';
 import { IButtonSize, IButtonView } from './types';
 import { useStyles, IButtonStyles, getPreloaderStyles } 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 { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
 export function FilterValueView<Values, Key extends keyof Values>({

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts

@@ -1,5 +1,5 @@
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
-import { IFilterValueViewStyles } from '../FilterValueView';
+import type { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWrapper', {

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/FlexibleTable/FlexibleTable.stories.tsx

@@ -336,6 +336,7 @@ export const Default = Template.bind({});
 Default.args = {
   isHorizontallyScrollable: true,
   isFirstColumnSticky: true,
+  isLoading: false,
 };
 
 Default.parameters = {

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,6 +1,6 @@
 import { rgba } from '../../helpers';
 import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IFlexibleTableRowStyles } from './components';
+import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
 
@@ -90,6 +90,11 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+
+  skeleton: {
+    height: 21,
+    padding: [14, 7],
+  },
 });
 
 export type IFlexibleTableStyles = ITweakStyles<

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,11 +1,19 @@
-import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataTestId,
+  indexMap,
+  isArrayNotEmpty,
+  isEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
+import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow } from './components';
+import { hasHorizontalScrollBar } from './helpers';
 import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
@@ -16,7 +24,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isHorizontallyScrollable?: boolean;
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
@@ -25,6 +33,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
    */
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  isLoading?: boolean;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
   onRowHover?: (id?: string) => void;
@@ -46,6 +55,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   isFirstColumnSticky,
   infinityScrollConfig,
   uniqueField,
+  isLoading,
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -63,11 +73,44 @@ export function FlexibleTable<Values extends Record<string, any>>({
     currentComponentName: 'FlexibleTable',
   });
 
-  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
-
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const showedColumns = useMemo(
+    () => enabledColumns ?? Object.keys(config),
+    [enabledColumns, config],
+  );
+
+  const getDataScrollAttributeSetter = useCallback(
+    (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
+      if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
+        el.dataset[key] = 'true';
+      } else {
+        el?.removeAttribute(`data-${key}`);
+      }
+    },
+    [isHorizontallyScrollable],
+  );
+
+  // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
+  const setHasScrollBarAttribute = useCallback(
+    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+    [getDataScrollAttributeSetter],
+  );
+
+  // Когда таблица проскроллена - добавляем аттрибут scrolled
+  const setIsScrolledAttribute = useCallback(
+    getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+    [getDataScrollAttributeSetter],
+  );
+
+  const ref = useMergedRefs([
+    refForScroll,
+    scrollRef,
+    setHasScrollBarAttribute,
+    setIsScrolledAttribute,
+  ]);
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -101,27 +144,34 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   useEffect(() => {
-    const scrollContainer = (refForScroll ?? scrollRef).current;
-    if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
+    const scrollContainer = scrollRef.current;
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
       return;
     }
-    const scrollHandler = (e: Event) => {
-      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+
+    const scrollHandler = () => {
+      setIsScrolledAttribute(scrollContainer);
+    };
+
+    const resizeHandler = () => {
+      setHasScrollBarAttribute(scrollContainer);
     };
+
     scrollContainer.addEventListener('scroll', scrollHandler);
-    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
-  }, [scrollRef]);
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   return (
-    <div
-      ref={refForScroll ?? scrollRef}
-      className={clsx({ [classes.scroll]: isHorizontallyScrollable })}
-      data-scrolled={isHorizontallyScrolled ? true : undefined}
-    >
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
       <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>
-            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
+            {showedColumns.map((key, i) => {
               const itemConfig = config?.[key];
 
               let titleContent = itemConfig?.title ?? '';
@@ -134,8 +184,8 @@ export function FlexibleTable<Values extends Record<string, any>>({
               return (
                 <th
                   className={clsx(classes.header, {
-                    [classes.headerSticky]: isFirstColumnSticky && idx === 0,
-                    [classes.headerSecond]: isFirstColumnSticky && idx === 1,
+                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
                   })}
                   style={{
                     minWidth: itemConfig?.minWidth,
@@ -153,42 +203,55 @@ export function FlexibleTable<Values extends Record<string, any>>({
           </tr>
         </thead>
         <tbody>
-          {content.length === 0 &&
-            nothingFoundContent !== undefined &&
-            !infinityScrollConfig?.isLoading &&
-            (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage) && (
-              <tr>
-                <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
-                  {nothingFoundContent}
-                </td>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <tr key={i}>
+                {showedColumns.map((_, j) => (
+                  <td key={j} className={classes.skeleton}>
+                    <Skeleton />
+                  </td>
+                ))}
               </tr>
-            )}
-
-          {content.map((item, i) => (
-            <FlexibleTableRow
-              item={item}
-              uniqueField={uniqueField}
-              isActive={activeRows?.includes(i) ?? false}
-              isFirstColumnSticky={isFirstColumnSticky}
-              onRowClick={onRowClick}
-              onRowHover={onRowHover}
-              enabledColumns={enabledColumns}
-              config={config}
-              key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-              rowAttributes={rowAttributes}
-              tweakStyles={tweakTableRowStyles}
-              expandableRowComponent={expandableRowComponent}
-            />
-          ))}
-
-          {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
-            <tr>
-              <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
-                <div ref={initIntersectionObserver} className={classes.loader}>
-                  <ThemedPreloader type="dots" />
-                </div>
-              </td>
-            </tr>
+            ))
+          ) : (
+            <>
+              {!isArrayNotEmpty(content) &&
+                nothingFoundContent !== undefined &&
+                !infinityScrollConfig?.isLoading &&
+                (infinityScrollConfig?.isLastPage === undefined ||
+                  infinityScrollConfig.isLastPage) && (
+                  <tr>
+                    <td colSpan={showedColumns.length}>{nothingFoundContent}</td>
+                  </tr>
+                )}
+
+              {content.map((item, i) => (
+                <FlexibleTableRow
+                  item={item}
+                  uniqueField={uniqueField}
+                  isActive={activeRows?.includes(i) ?? false}
+                  isFirstColumnSticky={isFirstColumnSticky}
+                  onRowClick={onRowClick}
+                  onRowHover={onRowHover}
+                  enabledColumns={enabledColumns}
+                  config={config}
+                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
+                  rowAttributes={rowAttributes}
+                  tweakStyles={tweakTableRowStyles}
+                  expandableRowComponent={expandableRowComponent}
+                />
+              ))}
+
+              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+                <tr>
+                  <td colSpan={showedColumns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </>
           )}
         </tbody>
       </table>

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { ICommonProps } from '../../../../types';
-import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { formatCellContent } from '../../helpers';
 import type { IFlexibleTableConfigType } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
@@ -10,7 +10,7 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
@@ -19,7 +19,7 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   onSetNestedComponent(component?: ReactNode): void;
 }
 
-function FlexibleTableCell<Values extends Record<string, any>>({
+export function FlexibleTableCell<Values extends Record<string, any>>({
   item,
   columnName,
   config,
@@ -33,41 +33,37 @@ function FlexibleTableCell<Values extends Record<string, any>>({
 }: IFlexibleTableCellProps<Values>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const itemConfig = config?.[columnName];
-  const value = item[columnName];
-  let content = null;
+  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+    config[columnName] ?? {};
 
-  if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component;
-    content = ValueComponent({
-      value,
-      row: item,
-      isFocusedRow,
-      isNestedComponentExpanded,
-      isRowNestedComponentExpanded,
-      onSetNestedComponent,
-    });
-  } else if (typeof value === 'string' || typeof value === 'number') {
-    content = value;
-  } else if ((value as any) instanceof Date) {
-    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
-  }
+  const value = item[columnName];
 
   return (
     <td
       key={columnName as string}
       className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
-        textAlign: itemConfig?.cellAlign,
-        position: isSticky ? 'sticky' : itemConfig?.position,
-        right: itemConfig?.right,
-        left: isSticky ? 0 : itemConfig?.left,
-        verticalAlign: itemConfig?.cellVerticalAlign,
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
       }}
     >
-      {content}
+      {isNotEmpty(value) && (
+        <>
+          {isNotEmpty(component)
+            ? component({
+                value,
+                row: item,
+                isFocusedRow,
+                isNestedComponentExpanded,
+                isRowNestedComponentExpanded,
+                onSetNestedComponent,
+              })
+            : formatCellContent(value, config[columnName])}
+        </>
+      )}
     </td>
   );
 }
-
-export default FlexibleTableCell;

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts

@@ -11,6 +11,10 @@ export const useStyles = createThemedStyles('FlexibleTableRow', {
   editable: {
     cursor: 'pointer',
   },
+
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export type IFlexibleTableRowStyles = ITweakStyles<

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,10 +1,11 @@
 import { ReactNode, useState, memo } from 'react';
 import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
 import { IFlexibleTableConfigType, INestedComponent } from '../../types';
-import FlexibleTableCell from '../FlexibleTableCell/FlexibleTableCell';
+import { FlexibleTableCell } from '../FlexibleTableCell';
 import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
@@ -14,7 +15,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
   isActive: boolean;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
   expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
@@ -81,7 +82,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
       onRowClick?.(item[uniqueField]);
     }
 
-    if (expandableRowComponent !== undefined) {
+    if (isNotEmpty(expandableRowComponent)) {
       const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
 
       if (!nestedComponent.isOpen && newNestedComponent !== null) {
@@ -96,16 +97,16 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
     }
   };
 
-  const items = enabledColumns ?? Object.keys(item);
+  const items = enabledColumns ?? Object.keys(config);
 
   return (
     <>
       <tr
-        className={clsx(
-          classes.root,
-          isActive && classes.active,
-          (onRowClick !== undefined || onRowHover !== undefined) && classes.editable,
-        )}
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isNotEmpty(onRowClick) || isNotEmpty(onRowHover),
+          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+        })}
         onMouseEnter={(e) => {
           if (uniqueField !== undefined && onRowHover !== undefined) {
             e.stopPropagation();
@@ -120,11 +121,11 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
           isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
         })}
       >
-        {items.map((key, idx) => (
+        {items.map((key, i) => (
           <FlexibleTableCell
             columnName={key}
-            isSticky={isFirstColumnSticky && idx === 0}
-            isSecond={isFirstColumnSticky && idx === 1}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
             key={key as string}
             item={item}
             config={config}

package/src/components/FlexibleTable/helpers.ts

@@ -0,0 +1,15 @@
+import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { IFlexibleTableConfigType } from './types';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+
+export const formatCellContent = <Values>(
+  value: unknown,
+  config?: IFlexibleTableConfigType<Values>[keyof Values],
+): string =>
+  value instanceof Date
+    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
+    : String(value);

package/src/components/FlexibleTable/types.ts

@@ -23,7 +23,7 @@ export type IFlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
     titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, Values[Key]>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;

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

@@ -2,3 +2,4 @@ export * from './Icon';
 export * from './types';
 export { iconsList } from './icons-list';
 export type { IIconStyles } from './Icon.styles';
+export * from './snippet';

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 { useTweakStyles } from '../../hooks';
-import { ICommonProps, IIcon } from '../../types';
-import { Icon } from '../Icon';
+import { ICommonProps } from '../../types';
+import { renderIcon, Icon, IIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_SIZE } from './constants';
 import { IReactInputMaskProps } from './types';