@true-engineering/true-react-common-ui-kit 4.0.0-alpha61 → 4.0.0-alpha63

package/dist/components/List/List.d.ts

@@ -1,9 +1,10 @@
 import { FC, KeyboardEvent, MouseEvent } from 'react';
 import { ICommonProps } from '../../types';
-import { IListItem } from './types';
+import { IListItem, IListSize } from './types';
 import { IListStyles } from './List.styles';
 export interface IListProps extends ICommonProps<IListStyles> {
     items: IListItem[];
+    size?: IListSize;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 export declare const List: FC<IListProps>;

package/dist/components/List/List.styles.d.ts

@@ -1,5 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IWithPopupStyles } from '../WithPopup';
+import { IListSizes } from './types';
 export declare const useStyles: import('../../theme').IUseStyles<"root" | "nestedItems">;
 export declare const withPopupStyles: IWithPopupStyles;
-export type IListStyles = ITweakStyles<typeof useStyles>;
+export type IListStyles = ITweakStyles<typeof useStyles, IListSizes>;

package/dist/components/List/components/ListItem/ListItem.d.ts

@@ -1,12 +1,14 @@
 import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IIcon } from '../../../Icon';
+import { IListSize as IListItemSize } from '../../types';
 import { IListItemStyles } from './ListItem.styles';
 export interface IListItemProps extends ICommonProps<IListItemStyles> {
     item: ReactNode;
     view?: 'default' | 'destructive';
     icon?: IIcon;
     nestedItems?: IListItemProps[];
+    size?: IListItemSize;
     isFocused?: boolean;
     disabled?: boolean;
     shouldDrawSpacerAbove?: boolean;

package/dist/components/List/components/ListItem/ListItem.styles.d.ts

@@ -1,3 +1,4 @@
 import { ITweakStyles } from '../../../../theme';
-export declare const useStyles: import('../../../../theme').IUseStyles<"content" | "root" | "default" | "destructive" | "focused" | "disabledItem" | "spacer" | "withIconGap" | "icon">;
-export type IListItemStyles = ITweakStyles<typeof useStyles>;
+import { IListSizes as IListItemSizes } from '../../types';
+export declare const useStyles: import('../../../../theme').IUseStyles<"content" | "root" | "default" | "destructive" | "focused" | "disabledItem" | "spacer" | "withIconGap" | "icon" | "chevron">;
+export type IListItemStyles = ITweakStyles<typeof useStyles, IListItemSizes>;

package/dist/components/List/index.d.ts

@@ -1,4 +1,4 @@
 export * from './List';
 export type { IListStyles } from './List.styles';
-export type { IListItem } from './types';
+export * from './types';
 export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/dist/components/List/types.d.ts

@@ -1,4 +1,8 @@
 import { IListItemProps } from './components';
+export interface IListSizes {
+}
+export type IListSize = keyof IListSizes;
 export interface IListItem extends IListItemProps {
     isHidden?: boolean;
+    size?: IListSize;
 }

package/dist/components/NewMoreMenu/NewMoreMenu.d.ts

@@ -1,10 +1,13 @@
 import { FC } from 'react';
-import { ICommonProps } from '../../types';
-import { IListItem } from '../List';
+import { ICommonProps, IRenderNode } from '../../types';
+import { IListItem, IListSize } from '../List';
 import { IWithPopupProps } from '../WithPopup';
+import { IWithPopupTriggerProps } from '../WithPopup/types';
 import { INewMoreMenuStyles } from './NewMoreMenu.styles';
 export interface INewMoreMenuProps extends Pick<IWithPopupProps, 'placement' | 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody' | 'canBeFlipped' | 'onToggle'>, ICommonProps<INewMoreMenuStyles> {
     items: IListItem[];
+    renderTrigger?: IRenderNode<IWithPopupTriggerProps>;
+    listSize?: IListSize;
     /** @default false */
     isDisabled?: boolean;
     /** @default true */

package/dist/true-react-common-ui-kit.js

@@ -3157,12 +3157,14 @@ const useStyles$V = createThemedStyles("ListItem", {
   },
   content: {
     flexGrow: 1
-  }
+  },
+  chevron: {}
 });
 const ListItem = ({
   icon,
   item,
   nestedItems,
+  size: size2,
   disabled: isDisabled,
   isFocused,
   shouldDrawSpacerAbove,
@@ -3180,7 +3182,7 @@ const ListItem = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx(classes.root, classes[view], {
+        className: clsx(classes.root, classes[view], isNotEmpty(size2) && classes[size2], {
           [classes.disabledItem]: isDisabled,
           [classes.withIconGap]: withIconGap,
           [classes.focused]: isFocused
@@ -3190,7 +3192,7 @@ const ListItem = ({
         children: [
           isReactNodeNotEmpty(icon) && /* @__PURE__ */ jsx("span", { className: classes.icon, children: renderIcon(icon) }),
           /* @__PURE__ */ jsx("span", { className: classes.content, children: item }),
-          isArrayNotEmpty(nestedItems) && /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { type: "chevron-right" }) })
+          isArrayNotEmpty(nestedItems) && /* @__PURE__ */ jsx("span", { className: clsx(classes.icon, classes.chevron), children: /* @__PURE__ */ jsx(Icon, { type: "chevron-right" }) })
         ]
       }
     ),
@@ -3216,7 +3218,7 @@ const withPopupStyles$1 = {
     width: "100%"
   }
 };
-const List = ({ items, testId, data, tweakStyles, onClick }) => {
+const List = ({ items, size: size2, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles$U({ theme: tweakStyles });
   const handleItemClick = (event, { onClick: itemOnClick }) => {
     if (isNotEmpty(itemOnClick)) {
@@ -3225,27 +3227,35 @@ const List = ({ items, testId, data, tweakStyles, onClick }) => {
     }
   };
   const filteredItems = items.filter(({ isHidden }) => !isHidden);
-  return /* @__PURE__ */ jsx("div", { className: classes.root, ...addDataAttributes$1(data, testId), children: filteredItems.map((item, i) => {
-    const itemProps = {
-      testId: getTestId(testId, `item-${i}`),
-      ...item,
-      shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
-      shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
-      onClick: (event) => handleItemClick(event, item)
-    };
-    return /* @__PURE__ */ jsx(Fragment$1, { children: isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(
-      WithPopup,
-      {
-        eventType: "hover",
-        tweakStyles: withPopupStyles$1,
-        placement: "right-start",
-        popupOffset: 0,
-        shouldRenderInBody: false,
-        trigger: ({ triggerProps }) => /* @__PURE__ */ jsx(ListItem, { ...itemProps, isFocused: triggerProps.isActive }),
-        children: /* @__PURE__ */ jsx("div", { className: classes.nestedItems, children: /* @__PURE__ */ jsx(List, { items: item.nestedItems, onClick }) })
-      }
-    ) : /* @__PURE__ */ jsx(ListItem, { ...itemProps }) }, i);
-  }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.root, isNotEmpty(size2) && classes[size2]),
+      ...addDataAttributes$1(data, testId),
+      children: filteredItems.map((item, i) => {
+        const itemProps = {
+          testId: getTestId(testId, `item-${i}`),
+          size: size2,
+          ...item,
+          shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
+          shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
+          onClick: (event) => handleItemClick(event, item)
+        };
+        return /* @__PURE__ */ jsx(Fragment$1, { children: isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(
+          WithPopup,
+          {
+            eventType: "hover",
+            tweakStyles: withPopupStyles$1,
+            placement: "right-start",
+            popupOffset: 0,
+            shouldRenderInBody: false,
+            trigger: ({ triggerProps }) => /* @__PURE__ */ jsx(ListItem, { ...itemProps, isFocused: triggerProps.isActive }),
+            children: /* @__PURE__ */ jsx("div", { className: classes.nestedItems, children: /* @__PURE__ */ jsx(List, { items: item.nestedItems, size: size2, onClick }) })
+          }
+        ) : /* @__PURE__ */ jsx(ListItem, { ...itemProps }) }, i);
+      })
+    }
+  );
 };
 const ANIMATION_TIMEOUT = 150;
 const useStyles$T = createThemedStyles("AccountInfo", {
@@ -11902,6 +11912,8 @@ const NewMoreMenu = ({
   isDisabled = false,
   hasDefaultStateBackground = true,
   data,
+  renderTrigger,
+  listSize,
   testId,
   tweakStyles,
   ...rest
@@ -11917,27 +11929,28 @@ const NewMoreMenu = ({
     className: "tweakList",
     currentComponentName: "NewMoreMenu"
   });
+  const defaultTrigger = ({ triggerProps, referenceProps }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx(classes.button, {
+        [classes.hasCircle]: hasDefaultStateBackground,
+        [classes.disabled]: triggerProps.isDisabled,
+        [classes.active]: triggerProps.isActive
+      }),
+      disabled: triggerProps.isDisabled,
+      ...addDataAttributes$1(data, testId),
+      ...referenceProps,
+      children: /* @__PURE__ */ jsx("div", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { type: "menu" }) })
+    }
+  );
   return /* @__PURE__ */ jsx(
     WithPopup,
     {
       isDisabled: isDisabled || isArrayEmpty(items),
       tweakStyles: tweakWithPopupStyles,
       ...rest,
-      trigger: ({ triggerProps, referenceProps }) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: triggerProps.isDisabled,
-            [classes.active]: triggerProps.isActive
-          }),
-          disabled: triggerProps.isDisabled,
-          ...addDataAttributes$1(data, testId),
-          ...referenceProps,
-          children: /* @__PURE__ */ jsx("div", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { type: "menu" }) })
-        }
-      ),
-      children: ({ onClose }) => /* @__PURE__ */ jsx(List, { items, tweakStyles: tweakListStyles, onClick: onClose })
+      trigger: renderTrigger ?? defaultTrigger,
+      children: ({ onClose }) => /* @__PURE__ */ jsx(List, { items, size: listSize, tweakStyles: tweakListStyles, onClick: onClose })
     }
   );
 };