@dktunited-techoff/techoff-suite-ui 1.13.1 → 1.13.3

package/esm/components/TsMenuButton/TsMenuButton.js

@@ -19,10 +19,16 @@ export const TsMenuItem = ({ icon, label, onClick }) => {
 export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }) => {
     const [showMenu, setShowMenu] = useState(false);
     const dropdownRef = useClickOutside(() => setShowMenu(false));
+    // ########
+    // Hanlders
+    const handleShowMenu = (e) => {
+        e.stopPropagation();
+        setShowMenu(true);
+    };
     // #########
     // Rendering
     return (React.createElement("div", { className: "ts-menu-button", ref: dropdownRef },
-        React.cloneElement(mainButton, { onClick: () => setShowMenu(true) }),
+        React.cloneElement(mainButton, { onClick: handleShowMenu }),
         showMenu && React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}` }, items)));
 };
 //# sourceMappingURL=TsMenuButton.js.map

package/esm/components/TsMenuButton/TsMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;QAC9C,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1C,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,aAAa,GAAG,cAAc,EAAE,UAAU,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,WAAW;QAC7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;QACpE,QAAQ,IAAI,6BAAK,SAAS,EAAE,4CAA4C,aAAa,EAAE,IAAG,KAAK,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;QAC9C,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1C,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,aAAa,GAAG,cAAc,EAAE,UAAU,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,WAAW;QAC7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;QAC3D,QAAQ,IAAI,6BAAK,SAAS,EAAE,4CAA4C,aAAa,EAAE,IAAG,KAAK,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsMenuButton/TsMenuButton.types.d.ts

@@ -1,8 +1,8 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
 export type TsMenuItemProps = {
     label: string;
     icon?: string;
-    onClick: () => void;
+    onClick: (e: MouseEvent<HTMLElement>) => void;
 };
 export type TsMenuButtonProps = {
     menuAlignment?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';

package/lib/components/TsMenuButton/TsMenuButton.js

@@ -24,10 +24,16 @@ exports.TsMenuItem = TsMenuItem;
 const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }) => {
     const [showMenu, setShowMenu] = (0, react_1.useState)(false);
     const dropdownRef = (0, use_click_outside_1.useClickOutside)(() => setShowMenu(false));
+    // ########
+    // Hanlders
+    const handleShowMenu = (e) => {
+        e.stopPropagation();
+        setShowMenu(true);
+    };
     // #########
     // Rendering
     return (React.createElement("div", { className: "ts-menu-button", ref: dropdownRef },
-        React.cloneElement(mainButton, { onClick: () => setShowMenu(true) }),
+        React.cloneElement(mainButton, { onClick: handleShowMenu }),
         showMenu && React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}` }, items)));
 };
 exports.TsMenuButton = TsMenuButton;

package/lib/components/TsMenuButton/TsMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AAEjC,6CAA0C;AAC1C,qEAAgE;AAChE,8BAA4B;AAErB,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CAAC;AAC7C,CAAC,CAAC;AAJW,QAAA,aAAa,iBAIxB;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;QAC9C,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1C,CACV,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,UAAU,cAcrB;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,aAAa,GAAG,cAAc,EAAE,UAAU,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,WAAW;QAC7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;QACpE,QAAQ,IAAI,6BAAK,SAAS,EAAE,4CAA4C,aAAa,EAAE,IAAG,KAAK,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,YAAY,gBAYvB"}
+{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA6C;AAE7C,6CAA0C;AAC1C,qEAAgE;AAChE,8BAA4B;AAErB,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CAAC;AAC7C,CAAC,CAAC;AAJW,QAAA,aAAa,iBAIxB;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;QAC9C,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1C,CACV,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,UAAU,cAcrB;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,aAAa,GAAG,cAAc,EAAE,UAAU,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,WAAW;QAC7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;QAC3D,QAAQ,IAAI,6BAAK,SAAS,EAAE,4CAA4C,aAAa,EAAE,IAAG,KAAK,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}

package/lib/components/TsMenuButton/TsMenuButton.types.d.ts

@@ -1,8 +1,8 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
 export type TsMenuItemProps = {
     label: string;
     icon?: string;
-    onClick: () => void;
+    onClick: (e: MouseEvent<HTMLElement>) => void;
 };
 export type TsMenuButtonProps = {
     menuAlignment?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/TsMenuButton/TsMenuButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
 import { TsMenuButtonProps, TsMenuItemProps } from './TsMenuButton.types';
 import { TsIcon } from '../TsIcon/TsIcon';
 import { useClickOutside } from '../../hooks/use-click-outside';
@@ -31,11 +31,18 @@ export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items
   const [showMenu, setShowMenu] = useState<boolean>(false);
   const dropdownRef = useClickOutside(() => setShowMenu(false));
 
+  // ########
+  // Hanlders
+  const handleShowMenu = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setShowMenu(true);
+  };
+
   // #########
   // Rendering
   return (
     <div className="ts-menu-button" ref={dropdownRef}>
-      {React.cloneElement(mainButton, { onClick: () => setShowMenu(true) })}
+      {React.cloneElement(mainButton, { onClick: handleShowMenu })}
       {showMenu && <div className={`ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`}>{items}</div>}
     </div>
   );

package/src/components/TsMenuButton/TsMenuButton.types.ts

@@ -1,9 +1,9 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
 
 export type TsMenuItemProps = {
   label: string;
   icon?: string;
-  onClick: () => void;
+  onClick: (e: MouseEvent<HTMLElement>) => void;
 };
 
 export type TsMenuButtonProps = {