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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.2",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Checkbox/Checkbox.styles.ts

@@ -4,6 +4,7 @@ export const useStyles = createThemedStyles('Checkbox', {
   root: {
     cursor: 'pointer',
     display: 'flex',
+    alignItems: 'center',
     gap: 14,
     width: 'fit-content',
   },

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
-import { FlexibleTableConfigType } from './types';
+import { IFlexibleTableConfigType } from './types';
 import { IFlexibleTableStyles } from './FlexibleTable.styles';
 
 export default {
@@ -25,7 +25,7 @@ interface ITableContent {
 const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
 const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
 
-const config: FlexibleTableConfigType<ITableContent> = {
+const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {
     title: 'Contract Code',
   },

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -5,7 +5,7 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow } from './components';
-import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
@@ -15,7 +15,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
-  config?: FlexibleTableConfigType<Values>;
+  config?: IFlexibleTableConfigType<Values>;
   isHorizontallyScrollable?: boolean;
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;

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

@@ -3,14 +3,14 @@ import clsx from 'clsx';
 import { format } from 'date-fns';
 import type { ICommonProps } from '../../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
-import type { FlexibleTableConfigType } from '../../types';
+import type { IFlexibleTableConfigType } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
 export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
-  config?: FlexibleTableConfigType<Values>;
+  config?: IFlexibleTableConfigType<Values>;
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;

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

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
-import { FlexibleTableConfigType, INestedComponent } from '../../types';
+import { IFlexibleTableConfigType, INestedComponent } from '../../types';
 import FlexibleTableCell from '../FlexibleTableCell/FlexibleTableCell';
 import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
@@ -14,7 +14,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
   isActive: boolean;
-  config?: FlexibleTableConfigType<Values>;
+  config?: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
   expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;

package/src/components/FlexibleTable/types.ts

@@ -19,7 +19,7 @@ export type IValueComponent<Values, Value> = (props: {
   onSetNestedComponent: (component?: ReactNode) => void;
 }) => JSX.Element | ReactNode;
 
-export type FlexibleTableConfigType<Values> = {
+export type IFlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
     titleComponent?: ITitleComponent<unknown>;

package/src/components/Select/Select.styles.ts

@@ -85,14 +85,16 @@ const baseInputStyles: IInputStyles = {
 };
 
 const readonlyInputBaseStyles: IInputStyles = {
-  inputIcon: {
-    width: 'auto',
+  input: {
+    cursor: 'pointer',
   },
 };
 
 const multiSelectInputBaseStyles: IInputStyles = {
   inputIcon: {
-    width: 'auto',
+    '&:not($loading)': {
+      width: 'auto',
+    },
   },
 };
 

package/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './use-on-click-outside';
 export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
+export * from './use-mixed-styles';

package/src/hooks/use-mixed-styles.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMixedStyles = <StyleSheet>(
+  baseStyles?: StyleSheet,
+  tweakStyles?: StyleSheet,
+): StyleSheet | undefined =>
+  useMemo(
+    () =>
+      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
+        ? mergeStyles(baseStyles, tweakStyles)
+        : baseStyles ?? tweakStyles,
+    [baseStyles, tweakStyles],
+  );