@trackunit/react-components 0.0.192 → 0.0.194

package/components/Menu/{MenuItem.d.ts → MenuItem/MenuItem.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps } from "../../../common";
 export interface MenuItemProps extends CommonProps {
     /**
      * The icon to be rendered in the menu item.

package/components/Menu/{MenuList.d.ts → MenuList/MenuList.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MenuItemProps } from "./MenuItem";
+import { MenuItemProps } from "../MenuItem/MenuItem";
 export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }
@@ -15,15 +15,11 @@ export interface MenuListProps {
     /**
      * List of menu items to be rendered.
      */
-    menuItems: MenuListItemProps[];
+    children: JSX.Element[] | JSX.Element;
     /**
-     * A component width
-     */
-    width?: string;
-    /**
-     * Custom renderer for menu items
+     * List of menu items to be rendered.
      */
-    itemRenderer?: (item: MenuListItemProps, key: string, index: number) => JSX.Element;
+    showDivider?: boolean;
 }
 /**
  * The MenuList component is used for menus and selects.
@@ -31,4 +27,4 @@ export interface MenuListProps {
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, menuItems, width, itemRenderer, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, children, showDivider, ...args }: MenuListProps) => JSX.Element;

package/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CommonProps } from "../../../common/CommonProps";
+import { IconButtonProps } from "../../buttons";
+import { IconProps } from "../../Icon/Icon";
+export declare enum DotsDirection {
+    horizontal = 0,
+    vertical = 1
+}
+export declare enum MenuPlacement {
+    above = 0,
+    below = 1
+}
+declare type FilteredIconProps = Omit<IconProps, "name">;
+declare type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
+export interface MoreMenuProps extends CommonProps {
+    children: JSX.Element;
+    dotsDirection?: DotsDirection;
+    menuPlacement?: MenuPlacement;
+    iconProps?: FilteredIconProps;
+    iconButtonProps?: FilteredIconButtonProps;
+}
+/**
+ * A kebab menu component.
+ * Advice: fill it with MenuList
+ *
+ * @param {MoreMenuProps} props - The props for the MoreMenu component
+ * @returns {JSX.Element} MoreMenu component
+ */
+export declare const MoreMenu: ({ className, dataTestId, dotsDirection, menuPlacement, iconProps, iconButtonProps, children, }: MoreMenuProps) => JSX.Element;
+export {};

package/components/Menu/index.d.ts

@@ -1,2 +1,3 @@
-export * from "./MenuItem";
-export * from "./MenuList";
+export * from "./MenuItem/MenuItem";
+export * from "./MenuList/MenuList";
+export * from "./MoreMenu/MoreMenu";

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, createElement, useRef, memo, useEffect, useContext } from 'react';
+import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, Children, useRef, memo, useEffect, useContext } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
@@ -11,6 +11,7 @@ import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
+import { useClickOutside } from 'react-browser-hooks';
 import usePortal from 'react-useportal';
 import { Helmet } from 'react-helmet';
 import ReactSelect, { components } from 'react-select';
@@ -350,7 +351,7 @@ const Icon$1 = ({
       className: iconSizeClassName
     })
   }, {
-    children: jsx(Root$5, Object.assign({
+    children: jsx(Root$6, Object.assign({
       "$color": color,
       onClick: onClick,
       "data-testid": dataTestId,
@@ -369,7 +370,7 @@ const Icon$1 = ({
 const LoadingDot = tw.span`
   tu-loading-dot
 `;
-const Root$5 = tw.span`
+const Root$6 = tw.span`
   tu-icon
   ${({
   $color
@@ -1451,7 +1452,7 @@ const Label$2 = ({
   disabled,
   isInvalid
 }) => {
-  return jsx(Root$4, Object.assign({
+  return jsx(Root$5, Object.assign({
     id: id || "",
     htmlFor: htmlFor || "",
     className: className,
@@ -1462,7 +1463,7 @@ const Label$2 = ({
     children: children
   }));
 };
-const Root$4 = tw.label`
+const Root$5 = tw.label`
 tu-label
 ${({
   $disabled
@@ -2568,7 +2569,7 @@ const LegendItem = ({
   dataTestId
 }) => {
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-  return jsxs(Root$3, Object.assign({
+  return jsxs(Root$4, Object.assign({
     "data-testid": dataTestId,
     "$disabled": disabled,
     className: className,
@@ -2585,7 +2586,7 @@ const LegendItem = ({
     })]
   }));
 };
-const Root$3 = tw.div`
+const Root$4 = tw.div`
   inline-flex
   items-center
   transition-all
@@ -2695,46 +2696,97 @@ const MenuList = _a => {
   var {
     dataTestId,
     className,
-    menuItems,
-    width,
-    itemRenderer
-  } = _a,
-      args = __rest(_a, ["dataTestId", "className", "menuItems", "width", "itemRenderer"]);
+    children,
+    showDivider = false
+  } = _a;
+      __rest(_a, ["dataTestId", "className", "children", "showDivider"]);
 
-  const containerProps = useContainerProps(Object.assign({
-    className,
-    dataTestId
-  }, args));
-  return jsx(Wrapper, {
-    children: jsx(Container$2, Object.assign({}, containerProps, {
-      style: width ? {
-        width
-      } : undefined,
-      tabIndex: 0
-    }, {
-      children: menuItems.map((props, index) => {
-        const key = `${index}-${props.label}`;
-        const item = itemRenderer ? itemRenderer(props, key, index) : createElement(MenuItem, Object.assign({}, props, {
-          key: key,
-          onClick: props.onClick
-        }));
-        return props.showDivider ? jsxs("div", {
-          children: [jsx(Divider, {}), " ", item]
-        }, key) : item;
-      })
+  const childrenArr = Children.toArray(children);
+
+  const isLastItem = index => index === childrenArr.length - 1;
+
+  return jsx(Container$2, Object.assign({
+    "data-testid": dataTestId,
+    className: className,
+    tabIndex: 0
+  }, {
+    children: Children.map(childrenArr, (menuItem, index) => jsxs(Fragment, {
+      children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})]
     }))
-  });
+  }));
 };
-const Wrapper = tw.div`
-  tu-menu-list__wrapper
-`;
 const Container$2 = tw.div`
   tu-menu-list
 `;
-const Divider = tw.div`
+const Divider = tw.hr`
   tu-menu-list__divider
 `;
 
+var DotsDirection;
+
+(function (DotsDirection) {
+  DotsDirection[DotsDirection["horizontal"] = 0] = "horizontal";
+  DotsDirection[DotsDirection["vertical"] = 1] = "vertical";
+})(DotsDirection || (DotsDirection = {}));
+
+var MenuPlacement;
+
+(function (MenuPlacement) {
+  MenuPlacement[MenuPlacement["above"] = 0] = "above";
+  MenuPlacement[MenuPlacement["below"] = 1] = "below";
+})(MenuPlacement || (MenuPlacement = {}));
+/**
+ * A kebab menu component.
+ * Advice: fill it with MenuList
+ *
+ * @param {MoreMenuProps} props - The props for the MoreMenu component
+ * @returns {JSX.Element} MoreMenu component
+ */
+
+
+const MoreMenu = ({
+  className,
+  dataTestId,
+  dotsDirection = DotsDirection.horizontal,
+  menuPlacement = MenuPlacement.below,
+  iconProps = {
+    size: "medium"
+  },
+  iconButtonProps = {
+    size: "small",
+    circular: true,
+    color: "tertiary"
+  },
+  children
+}) => {
+  const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
+  const dotsName = dotsDirection === DotsDirection.horizontal ? "DotsHorizontalIcon" : "DotsVerticalIcon";
+  const actionMenuRef = useRef(null);
+  useClickOutside(actionMenuRef, () => {
+    setActionMenuIsOpen(false);
+  });
+  return jsxs(Root$3, Object.assign({
+    ref: actionMenuRef,
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [actionMenuIsOpen && menuPlacement === MenuPlacement.above && children, jsx(IconButton, Object.assign({}, iconButtonProps, {
+      icon: jsx(Icon$1, Object.assign({
+        name: dotsName
+      }, iconProps)),
+      onClick: () => {
+        setActionMenuIsOpen(!actionMenuIsOpen);
+      }
+    })), actionMenuIsOpen && menuPlacement === MenuPlacement.below && children]
+  }));
+};
+const Root$3 = tw.div`
+  tu-more-menu
+  ${({
+  variant
+}) => variant === "primary" ? tws`tu-more-menu--primary` : ""}
+`;
+
 /**
  * The Backdrop for the modal.
  *
@@ -5434,4 +5486,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, DotsDirection, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MenuPlacement, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.192",
+  "version": "0.0.194",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -15,6 +15,7 @@
     "date-fns": "^2.29.3",
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.53",
+    "react-browser-hooks": "^2.2.4",
     "react-useportal": "1.0.17",
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "react-router-dom": "6.4.1",