@true-engineering/true-react-common-ui-kit 3.32.0 → 3.33.1

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

@@ -44,7 +44,7 @@ export function FlexibleTableCell<
   config,
   renderMode,
   isSecond,
-  isSticky,
+  isSticky: isOldSticky,
   isLoading,
   tweakStyles,
   ...valueComponentProps
@@ -63,6 +63,8 @@ export function FlexibleTableCell<
     shouldRenderDataId,
   } = config[columnName] ?? {};
 
+  const isSticky = isOldSticky || position === 'sticky';
+
   const Table = TableRenders[renderMode];
 
   return (
@@ -76,7 +78,7 @@ export function FlexibleTableCell<
         textAlign: cellAlign,
         position: isSticky ? 'sticky' : position,
         right,
-        left: isSticky ? 0 : left,
+        left,
         verticalAlign: cellVerticalAlign,
       }}
       {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}

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

@@ -1,25 +1,25 @@
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
-
-export const useStyles = createThemedStyles('FlexibleTableRow', {
-  root: {
-    position: 'relative',
-  },
-
-  active: {},
-
-  editable: {
-    cursor: 'pointer',
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-
-  nestedComponent: {},
-});
-
-export type IFlexibleTableRowStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakTableCell: IFlexibleTableCellStyles }
->;
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
+
+export const useStyles = createThemedStyles('FlexibleTableRow', {
+  root: {
+    position: 'relative',
+  },
+
+  active: {},
+
+  editable: {
+    cursor: 'pointer',
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+
+  nestedComponent: {},
+});
+
+export type IFlexibleTableRowStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableCell: IFlexibleTableCellStyles }
+>;

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

@@ -28,7 +28,8 @@ export interface IFlexibleTableRowProps<
   isActive?: boolean;
   /** @default false */
   isFocusable?: boolean;
-  /** @default false */
+  /** @deprecated Use {@position}
+   * @default false */
   isFirstColumnSticky?: boolean;
   /** @default false */
   isLoading?: boolean;

package/src/components/FlexibleTable/types.ts

@@ -1,70 +1,70 @@
-import { CSSProperties, ReactNode } from 'react';
-import { IRenderNode } from '../../types';
-
-export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export type ITableRow = Record<string, any>;
-
-export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
-
-export interface ITitleComponentProps<Value> {
-  value?: Value;
-}
-
-export interface IValueComponentProps<Values, Value> {
-  value: Value;
-  row: Values;
-  isFocusedRow?: boolean;
-  isActiveRow?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}
-
-export interface IFlexibleTableRowConfig<
-  Values extends ITableRow,
-  Key extends keyof Values,
-  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
-> {
-  title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
-  component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
-  dateFormat?: string;
-  minWidth?: string | number;
-  width?: string | number;
-  maxWidth?: string | number;
-  /** @default 'left' */
-  titleAlign?: CSSProperties['textAlign'];
-  cellAlign?: CSSProperties['textAlign'];
-  cellVerticalAlign?: CSSProperties['verticalAlign'];
-  position?: CSSProperties['position'];
-  right?: number;
-  left?: number;
-  shouldRenderDataId?: boolean;
-}
-
-export type IFlexibleTableConfigType<
-  Values extends ITableRow,
-  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
-> = {
-  [Key in keyof Values]?: IFlexibleTableRowConfig<Values, Key, HeaderContent>;
-};
-
-export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
-  isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
-}
-
-export interface INestedComponent {
-  isOpen: boolean;
-  component?: ReactNode;
-  cellKey?: string;
-}
+import { CSSProperties, ReactNode } from 'react';
+import { IRenderNode } from '../../types';
+
+export type IFlexibleTableRenderMode = 'table' | 'divs';
+
+export type IFlexibleTableRender = Record<
+  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
+  keyof JSX.IntrinsicElements
+>;
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
+
+export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
+
+export interface ITitleComponentProps<Value> {
+  value?: Value;
+}
+
+export interface IValueComponentProps<Values, Value> {
+  value: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isActiveRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}
+
+export interface IFlexibleTableRowConfig<
+  Values extends ITableRow,
+  Key extends keyof Values,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> {
+  title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
+  component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
+  dateFormat?: string;
+  minWidth?: string | number;
+  width?: string | number;
+  maxWidth?: string | number;
+  /** @default 'left' */
+  titleAlign?: CSSProperties['textAlign'];
+  cellAlign?: CSSProperties['textAlign'];
+  cellVerticalAlign?: CSSProperties['verticalAlign'];
+  position?: CSSProperties['position'];
+  right?: number;
+  left?: number;
+  shouldRenderDataId?: boolean;
+}
+
+export type IFlexibleTableConfigType<
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> = {
+  [Key in keyof Values]?: IFlexibleTableRowConfig<Values, Key, HeaderContent>;
+};
+
+export interface IInfinityScrollConfig {
+  activePage: number;
+  totalPages: number;
+  isLoading: boolean;
+  isLastPage: boolean;
+  onInfinityScroll: (skip: number) => void;
+}
+
+export interface INestedComponent {
+  isOpen: boolean;
+  component?: ReactNode;
+  cellKey?: string;
+}

package/src/components/Icon/Icon.stories.tsx

@@ -1,86 +1,86 @@
-import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-import { IIconType } from './types';
-
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </div>
-);
-
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <div
-          style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
-            display: 'flex',
-            alignItems: 'center',
-            color: '#888',
-          }}
-        >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
-          }}
-        >
-          {type}
-        </div>
-      </div>
-    ))}
-  </div>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Data Display/Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      display: 'flex',
+      // width: number('Container width', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+      // height: number('Container height', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </div>
+);
+
+export const Gallery = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      width: '80vw',
+    }}
+  >
+    {types.map((type) => (
+      <div
+        key={type}
+        style={{
+          width: 100,
+          height: 100,
+          margin: 1,
+          background: '#f7f7f7',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            margin: '10px 0',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#888',
+          }}
+        >
+          <Icon type={type} />
+        </div>
+        <div
+          style={{
+            fontFamily: 'Arial',
+            fontSize: 13,
+            color: '#747679',
+            overflow: 'hidden',
+            padding: '0 5px',
+          }}
+        >
+          {type}
+        </div>
+      </div>
+    ))}
+  </div>
+);

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/index.ts

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