@true-engineering/true-react-common-ui-kit 1.0.1 → 1.0.2

package/dist/types.d.ts

@@ -1,35 +1,89 @@
 import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
+import {
+  ICommonIcon,
+  IComplexIcon,
+  IPreloaderSvgType,
+  ISvgIcon,
+} from './components';
 export interface IDataAttributes {
-    [key: string]: string | null | undefined;
+  [key: string]: unknown;
 }
 export interface ICommonProps {
-    data?: IDataAttributes;
+  data?: IDataAttributes;
 }
 export interface IDropdownWithPopperOptions {
-    shouldUsePopper?: boolean;
-    shouldRenderInBody?: boolean;
-    scrollParent?: 'auto' | 'document' | Element;
-    shouldHideOnScroll?: boolean;
-    canBeFlipped?: boolean;
-    modifiers?: Array<Partial<Modifier<any, any>>>;
-    placement?: Placement;
-    flipOptions?: Record<string, any>;
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  scrollParent?: 'auto' | 'document' | Element;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  modifiers?: Array<Partial<Modifier<any, any>>>;
+  placement?: Placement;
+  flipOptions?: Record<string, any>;
 }
-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' | 'DatePickerInput' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | '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 ComponentStyles<StyleSheet, Props = unknown> = Partial<
+  Styles<keyof StyleSheet, Props>
+>;
+export declare type ComponentName =
+  | 'AccountInfo'
+  | 'AddButton'
+  | 'Button'
+  | 'CloseButton'
+  | 'Checkbox'
+  | 'CssBaseline'
+  | 'Colors'
+  | 'DateInput'
+  | 'DatePicker'
+  | 'DatePickerInput'
+  | 'DatePickerHeader'
+  | 'Description'
+  | 'DotsPreloader'
+  | 'SvgPreloader'
+  | 'FiltersPane'
+  | 'FilterInterval'
+  | 'FilterSelect'
+  | 'FilterWithDates'
+  | 'FilterWithPeriod'
+  | 'FilterWrapper'
+  | '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 UiKitAnimations = Record<string, any>;
 export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {
-    name: string;
-    components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-    complexIcons?: Partial<Record<IComplexIcon, string>>;
-    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
-    animations?: UiKitAnimations;
-    colors?: Record<string, string>;
-    dimensions?: Record<string, number>;
-    boxShadows?: Record<string, string>;
-    helpers?: UiKitHelpers;
+  name: string;
+  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>;
+  animations?: UiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number>;
+  boxShadows?: Record<string, string>;
+  helpers?: UiKitHelpers;
 }

package/package.json

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

package/src/components/List/List.tsx

@@ -2,7 +2,12 @@ import { FC, Fragment, ReactElement, ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { isNotEmpty, addDataTestId, addDataAttributes } from '../../helpers';
+import {
+  isNotEmpty,
+  getTestId,
+  addDataTestId,
+  addDataAttributes,
+} from '../../helpers';
 import { Icon, IIconType } from '../Icon';
 
 import { ListStyles, styles } from './List.styles';
@@ -53,7 +58,9 @@ export const List: FC<IListProps> = ({
               [classes.disabledItem]: item.disabled,
               [classes.withIconGap]: item.withIconGap,
             })}
-            {...addDataTestId(testId, `item-${idx}`)}
+            {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
+            {...(item.disabled &&
+              addDataAttributes({ disabled: item.disabled }))}
             onClick={item.disabled ? undefined : () => handleItemClick(item)}
           >
             {isNotEmpty(item.icon) && (

package/src/components/Modal/Modal.tsx

@@ -26,7 +26,7 @@ export type IModalPosition = 'center' | 'left' | 'right' | 'static';
 
 export interface IModalProps extends ICommonProps {
   tweakStyles?: ModalStyles;
-  title?: string;
+  title?: ReactNode;
   size?: 'l' | 'm' | 's';
   isFooterSticky?: boolean;
   buttons?: ReactNode[];

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -63,6 +63,8 @@ export const styles = {
     right: 0,
     marginTop: 6,
   },
+
+  tweakList: {},
 };
 
 export type MoreMenuStyles = ComponentStyles<typeof styles>;

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,8 +1,12 @@
+import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
-import React, { FC, useRef, useState } from 'react';
-import { useOnClickOutsideWithRef, useTheme } from '../../hooks';
+import {
+  useTheme,
+  useTweakStyles,
+  useOnClickOutsideWithRef,
+} from '../../hooks';
 import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, addDataTestId, getTestId } from '../../helpers';
 import { IListItem, List } from '../List';
 import { Icon } from '../Icon';
 
@@ -12,66 +16,72 @@ export interface IMoreMenuProps extends ICommonProps {
   tweakStyles?: MoreMenuStyles;
   items: IListItem[];
   isDisabled?: boolean;
-  onMenuOpen?: () => void;
-  onMenuClose?: () => void;
+  /**
+   * @default true
+   */
   hasDefaultStateBackground?: boolean;
   testId?: string;
+  onMenuOpen?(): void;
+  onMenuClose?(): void;
 }
 
 export const MoreMenu: FC<IMoreMenuProps> = ({
   items,
   isDisabled,
+  hasDefaultStateBackground = true,
   data,
+  testId,
   tweakStyles,
   onMenuOpen,
   onMenuClose,
-  hasDefaultStateBackground = true,
-  testId,
 }) => {
-  const { classes } = useTheme('MoreMenu', styles, tweakStyles);
+  const { classes, componentStyles } = useTheme(
+    'MoreMenu',
+    styles,
+    tweakStyles,
+  );
+  const tweakListStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakList',
+  );
 
   const [isMenuShown, setIsMenuShown] = useState(false);
   const list = useRef<HTMLDivElement>(null);
   const button = useRef<HTMLButtonElement>(null);
 
-  const toggleMenu = (event: React.MouseEvent) => {
+  const isButtonDisabled = isDisabled || items.length === 0;
+
+  const toggleMenu = (event: MouseEvent) => {
     const isShown = !isMenuShown;
     event.stopPropagation();
     setIsMenuShown(isShown);
     if (isShown) {
-      if (onMenuOpen !== undefined) {
-        onMenuOpen();
-      }
+      onMenuOpen?.();
     } else {
-      if (onMenuClose !== undefined) {
-        onMenuClose();
-      }
+      onMenuClose?.();
     }
   };
 
   const handleCloseMenu = () => {
     setIsMenuShown(false);
-    if (onMenuClose !== undefined) {
-      onMenuClose();
-    }
+    onMenuClose?.();
   };
 
   useOnClickOutsideWithRef(list, handleCloseMenu, button);
 
-  const isButtonDisabled = isDisabled || items.length === 0;
-
   return (
     <div className={classes.root}>
       <button
+        ref={button}
         className={clsx(classes.button, {
           [classes.hasCircle]: hasDefaultStateBackground,
           [classes.disabled]: isButtonDisabled,
           [classes.active]: isMenuShown,
         })}
-        onClick={!isButtonDisabled ? toggleMenu : undefined}
-        ref={button}
-        data-testid={testId}
+        {...addDataTestId(testId)}
         {...addDataAttributes(data)}
+        onClick={!isButtonDisabled ? toggleMenu : undefined}
       >
         <div className={classes.icon}>
           <Icon type="menu" />
@@ -81,8 +91,9 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
         <div className={classes.menu} ref={list}>
           <List
             items={items}
+            testId={getTestId(testId, 'list')}
+            tweakStyles={tweakListStyles}
             onClick={handleCloseMenu}
-            testId={testId !== undefined ? `${testId}-list` : undefined}
           />
         </div>
       )}

package/src/types.ts

@@ -8,7 +8,7 @@ import {
 } from './components';
 
 export interface IDataAttributes {
-  [key: string]: string | null | undefined;
+  [key: string]: unknown;
 }
 
 export interface ICommonProps {