nntc-ui 0.0.12 → 0.0.13

package/index.css

@@ -514,6 +514,29 @@ button[disabled] {
   overflow: auto scroll;
 }
 
+/* src/components/common/ButtonsGroup/buttonsGroup.module.css */
+.buttonsGroup_root {
+  display: flex;
+  align-items: center;
+}
+.buttonsGroup_fillEvenly > * {
+  flex-grow: 1;
+  width: 0;
+}
+.buttonsGroup_root > *:nth-child(n+1) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.buttonsGroup_root > *:nth-child(n+2) {
+  margin-left: 1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.buttonsGroup_root > *:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 /* src/components/navigation/Menu/menu.module.css */
 .menu_root {
   display: flex;
@@ -692,29 +715,6 @@ button[disabled] {
   height: 0;
 }
 
-/* src/components/common/ButtonsGroup/buttonsGroup.module.css */
-.buttonsGroup_root {
-  display: flex;
-  align-items: center;
-}
-.buttonsGroup_fillEvenly > * {
-  flex-grow: 1;
-  width: 0;
-}
-.buttonsGroup_root > *:nth-child(n+1) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.buttonsGroup_root > *:nth-child(n+2) {
-  margin-left: 1px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.buttonsGroup_root > *:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
 /* src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css */
 .calendarPopover_root {
   display: flex;

package/index.d.ts

@@ -181,11 +181,19 @@ interface Divider {
     name?: string;
 }
 
+type SubButtonVariant = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal' | 'link';
 interface Item$2 {
     type: 'item';
     name: string;
     icon?: ReactNode;
-    description?: ReactNode;
+    description?: string | number;
+    subButtons?: {
+        variant?: SubButtonVariant;
+        icon?: ReactNode;
+        textSecondary?: boolean;
+        isActive?: boolean;
+        onClick?: () => void;
+    }[];
     onClick?: () => void;
     selected?: boolean;
     disabled?: boolean;

package/index.js

@@ -413,6 +413,22 @@ import { useContext as useContext4 } from "react";
 import classnames5 from "classnames";
 import { useCallback } from "react";
 
+// src/components/common/ButtonsGroup/ButtonsGroup.tsx
+import classNames from "classnames";
+
+// src/components/common/ButtonsGroup/buttonsGroup.module.css
+var buttonsGroup_default = {
+  root: "buttonsGroup_root",
+  fillEvenly: "buttonsGroup_fillEvenly"
+};
+
+// src/components/common/ButtonsGroup/ButtonsGroup.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ButtonsGroup = (props) => {
+  const { children, fillEvenly, classes } = props;
+  return /* @__PURE__ */ jsx9("div", { className: classNames(buttonsGroup_default.root, fillEvenly && buttonsGroup_default.fillEvenly, classes?.root), children });
+};
+
 // src/components/navigation/Menu/menu.module.css
 var menu_default = {
   root: "menu_root",
@@ -429,7 +445,7 @@ var menu_default = {
 };
 
 // src/components/navigation/Menu/Menu.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function Menu(props) {
   const { items: items2, size = "medium", classes } = props;
   const handleClick = useCallback(
@@ -439,9 +455,10 @@ function Menu(props) {
     },
     []
   );
-  return /* @__PURE__ */ jsx9("div", { className: classnames5(menu_default.root, menu_default[size], classes?.root), children: items2.map(
-    (item, index) => item.type === "item" ? /* @__PURE__ */ jsx9(
-      "button",
+  return /* @__PURE__ */ jsx10("div", { className: classnames5(menu_default.root, menu_default[size], classes?.root), children: items2.map((item, index) => {
+    const Component = item.type === "item" && item.subButtons?.length ? "div" : "button";
+    return item.type === "item" ? /* @__PURE__ */ jsx10(
+      Component,
       {
         tabIndex: -10,
         className: classnames5(
@@ -455,7 +472,7 @@ function Menu(props) {
         onClick: !item.disabled ? handleClick(item) : void 0,
         title: item.name,
         children: /* @__PURE__ */ jsxs4("span", { className: classnames5(menu_default.stateLayer), children: [
-          !!item.icon && /* @__PURE__ */ jsx9(
+          !!item.icon && /* @__PURE__ */ jsx10(
             "span",
             {
               className: classnames5(
@@ -467,7 +484,7 @@ function Menu(props) {
               children: item.icon
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "span",
             {
               className: classnames5(
@@ -479,7 +496,7 @@ function Menu(props) {
               children: item.name
             }
           ),
-          !!item.description && /* @__PURE__ */ jsx9(
+          !!item.description && /* @__PURE__ */ jsx10(
             "span",
             {
               className: classnames5(
@@ -490,20 +507,46 @@ function Menu(props) {
               ),
               children: item.description
             }
+          ),
+          !!item.subButtons?.length && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: classnames5(
+                menu_default.itemDescription,
+                classes?.itemDescription,
+                item.selected ? classes?.itemSelectedDescription : void 0,
+                item.disabled ? classes?.itemDisabledDescription : void 0
+              ),
+              children: /* @__PURE__ */ jsx10(ButtonsGroup, { children: item.subButtons.map((sb, sbIndex) => /* @__PURE__ */ jsx10(
+                Button,
+                {
+                  variant: sb.variant,
+                  size,
+                  textSecondary: sb.textSecondary,
+                  isActive: sb.isActive,
+                  icon: sb.icon,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    sb.onClick?.();
+                  }
+                },
+                `subButton-${sbIndex}`
+              )) })
+            }
           )
         ] })
       },
       `menu-item-${item.name}-${index}`
-    ) : /* @__PURE__ */ jsx9("div", { className: classnames5(menu_default.divider, classes?.divider), children: item.name }, `menu-divider-${item.name}-${index}`)
-  ) });
+    ) : /* @__PURE__ */ jsx10("div", { className: classnames5(menu_default.divider, classes?.divider), children: item.name }, `menu-divider-${item.name}-${index}`);
+  }) });
 }
 
 // src/components/common/Select/ui/SelectPopover/SelectPopover.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function SelectPopover(props) {
   const { items: items2, componentSize, selectedValue, changeSelectedItem, classes } = props;
   const popoverContext = useContext4(PopoverContext);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Menu,
     {
       size: componentSize,
@@ -529,7 +572,7 @@ function SelectPopover(props) {
 }
 
 // src/components/common/Select/Select.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select(props) {
   const {
     variant = "filled",
@@ -584,7 +627,7 @@ function Select(props) {
         maxWidth: fullWidth ? "100%" : void 0
       },
       children: [
-        !!label && /* @__PURE__ */ jsx11(
+        !!label && /* @__PURE__ */ jsx12(
           Typography,
           {
             className: classnames6(select_default.label, classes?.label),
@@ -606,7 +649,7 @@ function Select(props) {
               classes?.wrapper
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "input",
                 {
                   ref: mergeRefs2([inputRef, ref]),
@@ -621,10 +664,10 @@ function Select(props) {
                   disabled
                 }
               ),
-              !!icon && /* @__PURE__ */ jsx11("span", { onClick: inputClickHandler, className: classnames6(select_default.icon, classes?.icon), children: icon }),
-              !!selectedItem?.icon && /* @__PURE__ */ jsx11("span", { onClick: inputClickHandler, className: classnames6(select_default.itemIcon, classes?.itemIcon), children: selectedItem?.icon }),
-              /* @__PURE__ */ jsx11("span", { onClick: inputClickHandler, className: classnames6(select_default.arrow, classes?.arrow), children: /* @__PURE__ */ jsx11(Arrow, {}) }),
-              /* @__PURE__ */ jsx11(
+              !!icon && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(select_default.icon, classes?.icon), children: icon }),
+              !!selectedItem?.icon && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(select_default.itemIcon, classes?.itemIcon), children: selectedItem?.icon }),
+              /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(select_default.arrow, classes?.arrow), children: /* @__PURE__ */ jsx12(Arrow, {}) }),
+              /* @__PURE__ */ jsx12(
                 Popover,
                 {
                   placement: "bottom-start",
@@ -633,7 +676,7 @@ function Select(props) {
                     ...classes?.popover
                   },
                   containerOffset: 4,
-                  description: /* @__PURE__ */ jsx11(
+                  description: /* @__PURE__ */ jsx12(
                     SelectPopover,
                     {
                       items: items2,
@@ -643,7 +686,7 @@ function Select(props) {
                       changeSelectedItem
                     }
                   ),
-                  children: /* @__PURE__ */ jsx11("div", { ref: popoverTargetRef, className: classnames6(select_default.popoverTarget) })
+                  children: /* @__PURE__ */ jsx12("div", { ref: popoverTargetRef, className: classnames6(select_default.popoverTarget) })
                 }
               )
             ]
@@ -677,22 +720,6 @@ import classNames2 from "classnames";
 import dayjs from "dayjs";
 import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
 
-// src/components/common/ButtonsGroup/ButtonsGroup.tsx
-import classNames from "classnames";
-
-// src/components/common/ButtonsGroup/buttonsGroup.module.css
-var buttonsGroup_default = {
-  root: "buttonsGroup_root",
-  fillEvenly: "buttonsGroup_fillEvenly"
-};
-
-// src/components/common/ButtonsGroup/ButtonsGroup.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ButtonsGroup = (props) => {
-  const { children, fillEvenly, classes } = props;
-  return /* @__PURE__ */ jsx12("div", { className: classNames(buttonsGroup_default.root, fillEvenly && buttonsGroup_default.fillEvenly, classes?.root), children });
-};
-
 // src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css
 var calendarPopover_default = {
   root: "calendarPopover_root",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "React UI-kit for NNTC",
   "type": "module",
   "exports": {