@true-engineering/true-react-common-ui-kit 3.1.1 → 3.4.0

package/package.json

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

package/src/components/AccountInfo/AccountInfo.tsx

@@ -11,6 +11,7 @@ import { ANIMATION_TIMEOUT } from './constants';
 import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
 
 export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
+  /** @default `<Icon type='avatar' />` */
   avatar?: ReactNode;
   accountName: ReactNode;
   options: IListProps['items'];

package/src/components/AddButton/AddButton.tsx

@@ -8,19 +8,22 @@ import { useStyles, IAddButtonStyles } from './AddButton.styles';
 
 export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
   text: string;
+  /** @default 'button' */
   type?: 'submit' | 'button';
+  /** @default false */
   isDisabled?: boolean;
+  /** @default false */
   isFullWidth?: boolean;
-  onClick?(): void | Promise<void>;
+  onClick?: () => void | Promise<void>;
 }
 
 // TODO: Весьма сомнительный компонент
 export const AddButton: FC<IAddButtonProps> = ({
   text,
   type = 'button',
-  isDisabled,
+  isDisabled = false,
   onClick,
-  isFullWidth,
+  isFullWidth = false,
   data,
   testId,
   tweakStyles,

package/src/components/Button/Button.tsx

@@ -11,29 +11,17 @@ import { useStyles, IButtonStyles, getPreloaderStyles } from './Button.styles';
 
 export interface IButtonProps extends ICommonProps<IButtonStyles> {
   children?: ReactNode;
-  /**
-   * @default `button`
-   */
+  /** @default 'button' */
   type?: ButtonHTMLAttributes<unknown>['type'];
-  /**
-   * @default `l`
-   */
+  /** @default 'l' */
   size?: IButtonSize;
-  /**
-   * @default `primary`
-   */
+  /** @default 'primary' */
   view?: IButtonView;
-  /**
-   * @default false
-   */
+  /** @default false */
   shouldSkipTabNavigation?: boolean;
-  /**
-   * @default false
-   */
+  /** @default false */
   isDisabled?: boolean;
-  /**
-   * @default false
-   */
+  /** @default false */
   isFullWidth?: boolean;
   /**
    * Нужно ли убирать скругление у кнопки слева
@@ -45,21 +33,15 @@ export interface IButtonProps extends ICommonProps<IButtonStyles> {
    * @default false
    */
   isLoading?: boolean;
-  /**
-   * @default false
-   */
+  /** @default false */
   isActive?: boolean;
   icon?: IIcon;
-  /**
-   * @default `left`
-   */
+  /** @default 'left' */
   iconPosition?: 'left' | 'right';
-  /**
-   * @default `dots`
-   */
+  /** @default 'dots' */
   preloaderType?: IThemedPreloaderProps['type'];
-  onClick?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
-  onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
 }
 
 export const Button = forwardRef<HTMLButtonElement, IButtonProps>(

package/src/components/Checkbox/Checkbox.tsx

@@ -13,27 +13,29 @@ import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
   isChecked: boolean | undefined;
+  /** @default false */
   isSemiChecked?: boolean;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default false */
   isReadonly?: boolean;
+  /** @default false */
   isInvalid?: boolean;
   value: V;
-  /**
-   * @default `right`
-   */
+  /** @default 'right' */
   labelPosition?: 'right' | 'left';
-  onSelect(value: { value: V; isSelected: boolean }): void;
+  onSelect: (value: { value: V; isSelected: boolean }) => void;
 }
 
 export function Checkbox<V>({
   children,
-  isDisabled,
-  isReadonly,
+  isDisabled = false,
+  isReadonly = false,
   isChecked = false,
   value,
   data,
   testId,
-  isSemiChecked,
+  isSemiChecked = false,
   labelPosition = 'right',
   tweakStyles,
   onSelect,
@@ -45,9 +47,9 @@ export function Checkbox<V>({
   const hasAction = !isDisabled && !isReadonly;
 
   const onToggle = () => {
-    const newValue = !isSelected;
-    onSelect({ value, isSelected: newValue });
-    setIsSelected(newValue);
+    const isSelectedNext = !isSelected;
+    onSelect({ value, isSelected: isSelectedNext });
+    setIsSelected(isSelectedNext);
   };
 
   useEffect(() => {

package/src/components/CloseButton/CloseButton.tsx

@@ -6,8 +6,9 @@ import { Icon } from '../Icon';
 import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
 
 export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
+  /** @default 'close' */
   iconType?: 'close' | 'close-large' | 'close-window';
-  onClose?(): void;
+  onClose?: () => void;
 }
 
 export const CloseButton: FC<ICloseButtonProps> = ({

package/src/components/DateInput/DateInput.tsx

@@ -11,13 +11,16 @@ export interface IDateInputProps
   extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
     ICommonProps<IDateInputStyles> {
   date?: string;
+  /** @default  '' */
   startDate?: string;
+  /** @default '' */
   endDate?: string;
   className?: string;
+  /** @default false */
   isRange?: boolean;
-  onClick?(event: MouseEvent<HTMLDivElement>): void;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   // react-datepicker ожидает event первым аргументом
-  onChange?(event: FormEvent<HTMLInputElement>, value: string): void;
+  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
 }
 
 export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
@@ -30,7 +33,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
       className,
       placeholder,
       data,
-      isRange,
+      isRange = false,
       tweakStyles,
       onClick,
       onChange,

package/src/components/DatePicker/DatePicker.tsx

@@ -22,17 +22,19 @@ export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDa
   selectedDate?: Date | null;
   locale: Locale;
   months?: string[];
-  /**
-   * @default `dd.MM.yyyy`
-   */
+  /** @default 'dd.MM.yyyy' */
   dateFormat?: string;
+  /** @default 1 */
   calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** @default false */
   isRange?: boolean;
+  /** @default false */
   isInline?: boolean;
+  /** @default false */
   shouldRenderPopperInBody?: boolean;
   customInput?: FC<IDateInputProps>;
-  onChangeDate?(date: Date | null, event?: SyntheticEvent): void;
-  onChangeRange?(date: IRange, event?: SyntheticEvent): void;
+  onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
+  onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
 }
 
 export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
@@ -50,14 +52,14 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       dateFormat = DEFAULT_DATE_FORMAT,
       monthsShown,
       placeholder,
-      isRange,
-      isInline,
+      isRange = false,
+      isInline = false,
       isDisabled,
       isClearable,
       strictParsing,
       focusSelectedMonth,
       disabledKeyboardNavigation,
-      shouldRenderPopperInBody,
+      shouldRenderPopperInBody = false,
       allowSameDay = false,
       shouldCloseOnSelect,
       showPreviousMonths,

package/src/components/Description/Description.tsx

@@ -9,7 +9,9 @@ export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
   text: string;
   moreTitle?: string;
   lessTitle?: string;
+  /** @default 150 */
   truncateIndex?: number;
+  /** @default true */
   isAlwaysOpen?: boolean;
 }
 

package/src/components/FiltersPane/FiltersPane.tsx

@@ -14,15 +14,18 @@ export interface IFiltersPaneProps<Values, Content = Values>
   extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
+  /** @default {} */
   values?: Partial<Values>;
   search?: IFiltersPaneSearchProps<keyof Content>;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
+  /** @default false */
   isDisabled?: boolean;
+  /** @default true */
   hasClearButton?: boolean;
-  onChangeFilters(values: Partial<Values>): void;
-  onSettingsButtonClick?(): void;
-  onClear?(): void;
+  onChangeFilters: (values: Partial<Values>) => void;
+  onSettingsButtonClick?: () => void;
+  onClear?: () => void;
 }
 
 export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -34,9 +34,9 @@ export interface IFilterWithDatesProps extends ICommonProps<IFilterWithDatesStyl
   isClearable?: boolean;
   startPickerProps?: IFilterWithDateDatePickerProps;
   endPickerProps?: IFilterWithDateDatePickerProps;
-  onChange(val: IFilterWithDatesValue): void;
-  onStartBtnSubmit?(): void;
-  onEndBtnSubmit(): void;
+  onChange: (val: IFilterWithDatesValue) => void;
+  onStartBtnSubmit?: () => void;
+  onEndBtnSubmit: () => void;
 }
 
 export const FilterWithDates: FC<IFilterWithDatesProps> = ({

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -20,8 +20,8 @@ export interface IFilterWithPeriodProps extends ICommonProps<IFilterWithPeriodSt
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   periods?: IPeriodsList;
-  onChange(period?: IPeriod): void;
-  onClose?(): void;
+  onChange: (period?: IPeriod) => void;
+  onClose?: () => void;
 }
 
 export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -19,7 +19,7 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   filtersPaneRef: RefObject<HTMLDivElement> | null;
-  onChange<V>(value: V): void;
+  onChange: <V>(value: V) => void;
 }
 
 export function FilterWrapper<Values, Key extends keyof Values>({

package/src/components/Flag/Flag.tsx

@@ -6,6 +6,7 @@ import { Icon } from '../Icon';
 import { useStyles, IFlagStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
+  /** @default '' */
   countryCode?: string;
 }
 

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

@@ -22,6 +22,14 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     maxHeight: '100%',
   },
 
+  head: {},
+
+  body: {},
+
+  loaderRow: {},
+
+  loaderCell: {},
+
   loader: {
     position: 'sticky',
     left: 0,
@@ -91,6 +99,12 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
 
+  nothingFoundRow: {},
+
+  nothingFound: {},
+
+  skeletonRow: {},
+
   skeleton: {
     height: 21,
     padding: [14, 7],

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -25,14 +25,15 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
   config: IFlexibleTableConfigType<Values>;
+  /** @default false */
   isHorizontallyScrollable?: boolean;
+  /** @default false */
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
-  /**
-   * @default Индекс строки
-   */
+  /** @default Индекс строки */
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  /** @default false */
   isLoading?: boolean;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
@@ -40,6 +41,8 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   rowAttributes?: Array<keyof Values>;
   refForScroll?: RefObject<HTMLDivElement>;
   nothingFoundContent?: ReactNode;
+  /** @default 'table' */
+  renderMode?: 'table' | 'divs';
   expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
 }
 
@@ -51,11 +54,12 @@ export function FlexibleTable<Values extends Record<string, any>>({
   config,
   activeRows,
   enabledColumns,
-  isHorizontallyScrollable,
-  isFirstColumnSticky,
+  isHorizontallyScrollable = false,
+  isFirstColumnSticky = false,
   infinityScrollConfig,
   uniqueField,
-  isLoading,
+  isLoading = false,
+  renderMode = 'table',
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -104,6 +108,12 @@ export function FlexibleTable<Values extends Record<string, any>>({
     [getDataScrollAttributeSetter],
   );
 
+  const shouldShowNothingFound =
+    !isArrayNotEmpty(content) &&
+    nothingFoundContent !== undefined &&
+    !infinityScrollConfig?.isLoading &&
+    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
+
   const ref = useMergedRefs([
     refForScroll,
     scrollRef,
@@ -166,11 +176,22 @@ export function FlexibleTable<Values extends Record<string, any>>({
     };
   }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
+  const Table = renderMode === 'divs' ? 'div' : 'table';
+  const TableHead = renderMode === 'divs' ? 'div' : 'thead';
+  const TableBody = renderMode === 'divs' ? 'div' : 'tbody';
+  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
+  const TableHeader = renderMode === 'divs' ? 'div' : 'th';
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
   return (
     <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-        <thead>
-          <tr className={classes.headerRow}>
+      <Table
+        className={classes.root}
+        {...addDataTestId(testId)}
+        {...addDataAttributes({ ...data, isLoading })}
+      >
+        <TableHead className={classes.head}>
+          <TableRow className={classes.headerRow}>
             {showedColumns.map((key, i) => {
               const itemConfig = config?.[key];
 
@@ -182,7 +203,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
               }
 
               return (
-                <th
+                <TableHeader
                   className={clsx(classes.header, {
                     [classes.headerSticky]: isFirstColumnSticky && i === 0,
                     [classes.headerSecond]: isFirstColumnSticky && i === 1,
@@ -197,33 +218,31 @@ export function FlexibleTable<Values extends Record<string, any>>({
                   onClick={() => onHeadClick?.(key)}
                 >
                   {titleContent}
-                </th>
+                </TableHeader>
               );
             })}
-          </tr>
-        </thead>
-        <tbody>
+          </TableRow>
+        </TableHead>
+        <TableBody className={classes.body}>
           {isLoading ? (
             indexMap(6, (i) => (
-              <tr key={i}>
+              <TableRow className={classes.skeletonRow} key={i}>
                 {showedColumns.map((_, j) => (
-                  <td key={j} className={classes.skeleton}>
+                  <TableCell className={classes.skeleton} key={j}>
                     <Skeleton />
-                  </td>
+                  </TableCell>
                 ))}
-              </tr>
+              </TableRow>
             ))
           ) : (
             <>
-              {!isArrayNotEmpty(content) &&
-                nothingFoundContent !== undefined &&
-                !infinityScrollConfig?.isLoading &&
-                (infinityScrollConfig?.isLastPage === undefined ||
-                  infinityScrollConfig.isLastPage) && (
-                  <tr>
-                    <td colSpan={showedColumns.length}>{nothingFoundContent}</td>
-                  </tr>
-                )}
+              {shouldShowNothingFound && (
+                <TableRow className={classes.nothingFoundRow}>
+                  <TableCell className={classes.nothingFound} colSpan={showedColumns.length}>
+                    {nothingFoundContent}
+                  </TableCell>
+                </TableRow>
+              )}
 
               {content.map((item, i) => (
                 <FlexibleTableRow
@@ -237,24 +256,25 @@ export function FlexibleTable<Values extends Record<string, any>>({
                   config={config}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
                   rowAttributes={rowAttributes}
+                  renderMode={renderMode}
                   tweakStyles={tweakTableRowStyles}
                   expandableRowComponent={expandableRowComponent}
                 />
               ))}
 
               {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
-                <tr>
-                  <td colSpan={showedColumns.length}>
+                <TableRow className={classes.loaderRow}>
+                  <TableCell className={classes.loaderCell} colSpan={showedColumns.length}>
                     <div ref={initIntersectionObserver} className={classes.loader}>
                       <ThemedPreloader type="dots" />
                     </div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               )}
             </>
           )}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }

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

@@ -11,18 +11,21 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   item: Values;
   columnName: keyof Values;
   config: IFlexibleTableConfigType<Values>;
+  /** @default 'table' */
+  renderMode?: 'table' | 'divs';
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
   isNestedComponentExpanded: boolean;
   isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent(component?: ReactNode): void;
+  onSetNestedComponent: (component?: ReactNode) => void;
 }
 
 export function FlexibleTableCell<Values extends Record<string, any>>({
   item,
   columnName,
   config,
+  renderMode = 'table',
   isFocusedRow,
   isSecond,
   isSticky,
@@ -38,8 +41,10 @@ export function FlexibleTableCell<Values extends Record<string, any>>({
 
   const value = item[columnName];
 
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
   return (
-    <td
+    <TableCell
       key={columnName as string}
       className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
@@ -64,6 +69,6 @@ export function FlexibleTableCell<Values extends Record<string, any>>({
             : formatCellContent(value, config[columnName])}
         </>
       )}
-    </td>
+    </TableCell>
   );
 }

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

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

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

@@ -18,10 +18,12 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   config: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
-  expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
+  /** @default 'table' */
+  renderMode?: 'table' | 'divs';
+  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
   // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?(id?: string): void;
-  onRowClick?(id: string): void;
+  onRowHover?: (id?: string) => void;
+  onRowClick?: (id: string) => void;
 }
 
 function FlexibleTableRowInner<Values extends Record<string, any>>({
@@ -32,6 +34,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   config,
   enabledColumns,
   rowAttributes,
+  renderMode = 'table',
   tweakStyles,
   expandableRowComponent,
   onRowHover,
@@ -100,9 +103,12 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   const items = enabledColumns ?? Object.keys(config);
   const isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
 
+  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
   return (
     <>
-      <tr
+      <TableRow
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,
@@ -133,6 +139,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
             item={item}
             config={config}
             tweakStyles={tweakTableCellStyles}
+            renderMode={renderMode}
             isFocusedRow={isFocused}
             isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
             isRowNestedComponentExpanded={
@@ -141,12 +148,14 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
             onSetNestedComponent={(component) => updateNestedComponent(component, key as string)}
           />
         ))}
-      </tr>
+      </TableRow>
 
       {nestedComponent.isOpen && (
-        <tr className={classes.root}>
-          <td colSpan={items.length}>{nestedComponent.component}</td>
-        </tr>
+        <TableRow className={classes.root}>
+          <TableCell className={classes.nestedComponent} colSpan={items.length}>
+            {nestedComponent.component}
+          </TableCell>
+        </TableRow>
       )}
     </>
   );

package/src/components/IncrementInput/IncrementInput.tsx

@@ -11,6 +11,7 @@ import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.
 export interface IIncrementInputProps
   extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
     ICommonProps<IIncrementInputStyles> {
+  /** @default 1 */
   step?: number;
 }