@dktunited-techoff/techoff-suite-ui 1.13.7 → 1.13.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/esm/components/TsMenuButton/TsMenuButton.css +3 -3
  2. package/esm/components/TsMenuButton/TsMenuButton.d.ts +2 -4
  3. package/esm/components/TsMenuButton/TsMenuButton.js +10 -18
  4. package/esm/components/TsMenuButton/TsMenuButton.js.map +1 -1
  5. package/esm/components/TsMenuButton/TsMenuButton.types.d.ts +9 -7
  6. package/esm/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +8 -11
  7. package/lib/components/TsMenuButton/TsMenuButton.css +3 -3
  8. package/lib/components/TsMenuButton/TsMenuButton.d.ts +2 -4
  9. package/lib/components/TsMenuButton/TsMenuButton.js +11 -21
  10. package/lib/components/TsMenuButton/TsMenuButton.js.map +1 -1
  11. package/lib/components/TsMenuButton/TsMenuButton.types.d.ts +9 -7
  12. package/lib/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +8 -11
  13. package/package.json +1 -1
  14. package/src/components/TsMenuButton/TsMenuButton.css +3 -3
  15. package/src/components/TsMenuButton/TsMenuButton.tsx +23 -30
  16. package/src/components/TsMenuButton/TsMenuButton.types.ts +9 -7
  17. package/src/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +8 -11
package/esm/components/TsMenuButton/TsMenuButton.css CHANGED
@@ -25,7 +25,7 @@
25
25
  display: flex;
26
26
  align-items: center;
27
27
  width: 100%;
28
- min-height: 36px;
28
+ min-height: 32px;
29
29
  border: none;
30
30
  background: #ffffff;
31
31
  cursor: pointer;
@@ -38,8 +38,8 @@
38
38
  display: flex;
39
39
  align-items: center;
40
40
  justify-content: center;
41
- width: 36px;
42
- height: 36px;
41
+ width: 32px;
42
+ height: 32px;
43
43
  }
44
44
  /* ######### */
45
45
  /* DIVIDER */
package/esm/components/TsMenuButton/TsMenuButton.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { TsMenuButtonProps, TsMenuItemProps } from './TsMenuButton.types';
2
+ import { TsMenuButtonProps } from './TsMenuButton.types';
3
3
  import './TsMenuButton.css';
4
- export declare const TsMenuDivider: () => React.JSX.Element;
5
- export declare const TsMenuItem: ({ icon, label, onClick }: TsMenuItemProps) => React.JSX.Element;
6
- export declare const TsMenuButton: ({ menuAlignment, mainButton, items }: TsMenuButtonProps) => React.JSX.Element;
4
+ export declare const TsMenuButton: ({ actions, buttonProps, menuAlignment }: TsMenuButtonProps) => React.JSX.Element;
package/esm/components/TsMenuButton/TsMenuButton.js CHANGED
@@ -1,25 +1,13 @@
1
1
  import * as React from 'react';
2
2
  import { useEffect, useRef, useState } from 'react';
3
+ import { createPortal } from 'react-dom';
4
+ import { TsButton } from '../TsButton/TsButton';
3
5
  import { TsIcon } from '../TsIcon/TsIcon';
4
6
  import { useClickOutside } from '../../hooks/use-click-outside';
5
7
  import './TsMenuButton.css';
6
- export const TsMenuDivider = () => {
7
- // #########
8
- // Rendering
9
- return React.createElement("div", { className: "ts-menu-divider" });
10
- };
11
- export const TsMenuItem = ({ icon, label, onClick }) => {
12
- // #########
13
- // Rendering
14
- return (React.createElement("button", { className: "ts-menu-item", onClick: onClick },
15
- icon && (React.createElement("div", { className: "ts-menu-item-icon" },
16
- React.createElement(TsIcon, { name: icon, size: "16" }))),
17
- React.createElement("div", { className: "ts-menu-item-label" }, label)));
18
- };
19
- export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }) => {
8
+ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
20
9
  const [showMenu, setShowMenu] = useState(false);
21
10
  const containerRef = useClickOutside(() => {
22
- console.log('JE PASSE ICI');
23
11
  setShowMenu(false);
24
12
  });
25
13
  const buttonRef = useRef(null);
@@ -45,11 +33,15 @@ export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items
45
33
  });
46
34
  }
47
35
  }, [showMenu]);
48
- const menu = showMenu && (React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, items));
36
+ const menu = showMenu && (React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, actions.map(action => !action.divider ? (React.createElement("button", { className: "ts-menu-item", onClick: action.onClick },
37
+ action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
38
+ React.createElement(TsIcon, { name: action.icon, size: "16" }))),
39
+ React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))));
49
40
  // #########
50
41
  // Rendering
51
42
  return (React.createElement("div", { className: "ts-menu-button", ref: containerRef },
52
- React.createElement("div", { ref: buttonRef }, React.cloneElement(mainButton, { onClick: handleShowMenu })),
53
- menu));
43
+ React.createElement("div", { ref: buttonRef },
44
+ React.createElement(TsButton, { ...buttonProps, onClick: handleShowMenu })),
45
+ createPortal(menu, document.body)));
54
46
  };
55
47
  //# sourceMappingURL=TsMenuButton.js.map
package/esm/components/TsMenuButton/TsMenuButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
package/esm/components/TsMenuButton/TsMenuButton.types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
- import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
2
- export type TsMenuItemProps = {
3
- label: string;
1
+ import { MouseEvent } from 'react';
2
+ import { TsButtonProps } from '../TsButton/TsButton.types';
3
+ export type Action = {
4
+ label?: string;
4
5
  icon?: string;
5
- onClick: (e: MouseEvent<HTMLElement>) => void;
6
+ divider?: boolean;
7
+ onClick?: (e: MouseEvent<HTMLElement>) => void;
6
8
  };
7
9
  export type TsMenuButtonProps = {
8
10
  menuAlignment?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
9
- mainButton: ReactElement;
10
- items: ReactElement;
11
- } & ButtonHTMLAttributes<HTMLButtonElement>;
11
+ buttonProps: TsButtonProps;
12
+ actions: Action[];
13
+ };
package/esm/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsMenuButton, TsMenuItem, TsMenuDivider } from '../TsMenuButton';
4
- import { TsButton } from '../../TsButton/TsButton';
3
+ import { TsMenuButton } from '../TsMenuButton';
5
4
 
6
5
  <Meta title="Components/MenuButton" />
7
6
 
@@ -25,15 +24,13 @@ A MenuButton can be used to group a set of actions that are related.
25
24
  name="Overview"
26
25
  args={{
27
26
  menuAlignment: 'bottom-start',
28
- mainButton: <TsButton icon="dots-vertical" variant="secondary" />,
29
- items: (
30
- <>
31
- <TsMenuItem icon="edit" label="Edit" />
32
- <TsMenuItem icon="file-copy" label="Duplicate" />
33
- <TsMenuDivider />
34
- <TsMenuItem icon="delete-bin" label="Delete" />
35
- </>
36
- ),
27
+ buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
28
+ actions: [
29
+ { icon: 'edit', label: 'Edit' },
30
+ { icon: 'file-copy', label: 'Duplicate' },
31
+ { divider: true },
32
+ { icon: 'delete-bin', label: 'Delete' },
33
+ ],
37
34
  }}
38
35
  argTypes={menuButtonArgTypes}
39
36
  >
package/lib/components/TsMenuButton/TsMenuButton.css CHANGED
@@ -25,7 +25,7 @@
25
25
  display: flex;
26
26
  align-items: center;
27
27
  width: 100%;
28
- min-height: 36px;
28
+ min-height: 32px;
29
29
  border: none;
30
30
  background: #ffffff;
31
31
  cursor: pointer;
@@ -38,8 +38,8 @@
38
38
  display: flex;
39
39
  align-items: center;
40
40
  justify-content: center;
41
- width: 36px;
42
- height: 36px;
41
+ width: 32px;
42
+ height: 32px;
43
43
  }
44
44
  /* ######### */
45
45
  /* DIVIDER */
package/lib/components/TsMenuButton/TsMenuButton.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { TsMenuButtonProps, TsMenuItemProps } from './TsMenuButton.types';
2
+ import { TsMenuButtonProps } from './TsMenuButton.types';
3
3
  import './TsMenuButton.css';
4
- export declare const TsMenuDivider: () => React.JSX.Element;
5
- export declare const TsMenuItem: ({ icon, label, onClick }: TsMenuItemProps) => React.JSX.Element;
6
- export declare const TsMenuButton: ({ menuAlignment, mainButton, items }: TsMenuButtonProps) => React.JSX.Element;
4
+ export declare const TsMenuButton: ({ actions, buttonProps, menuAlignment }: TsMenuButtonProps) => React.JSX.Element;
package/lib/components/TsMenuButton/TsMenuButton.js CHANGED
@@ -1,30 +1,16 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TsMenuButton = exports.TsMenuItem = exports.TsMenuDivider = void 0;
3
+ exports.TsMenuButton = void 0;
4
4
  const React = require("react");
5
5
  const react_1 = require("react");
6
+ const react_dom_1 = require("react-dom");
7
+ const TsButton_1 = require("../TsButton/TsButton");
6
8
  const TsIcon_1 = require("../TsIcon/TsIcon");
7
9
  const use_click_outside_1 = require("../../hooks/use-click-outside");
8
10
  require("./TsMenuButton.css");
9
- const TsMenuDivider = () => {
10
- // #########
11
- // Rendering
12
- return React.createElement("div", { className: "ts-menu-divider" });
13
- };
14
- exports.TsMenuDivider = TsMenuDivider;
15
- const TsMenuItem = ({ icon, label, onClick }) => {
16
- // #########
17
- // Rendering
18
- return (React.createElement("button", { className: "ts-menu-item", onClick: onClick },
19
- icon && (React.createElement("div", { className: "ts-menu-item-icon" },
20
- React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))),
21
- React.createElement("div", { className: "ts-menu-item-label" }, label)));
22
- };
23
- exports.TsMenuItem = TsMenuItem;
24
- const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }) => {
11
+ const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
25
12
  const [showMenu, setShowMenu] = (0, react_1.useState)(false);
26
13
  const containerRef = (0, use_click_outside_1.useClickOutside)(() => {
27
- console.log('JE PASSE ICI');
28
14
  setShowMenu(false);
29
15
  });
30
16
  const buttonRef = (0, react_1.useRef)(null);
@@ -50,12 +36,16 @@ const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }) =>
50
36
  });
51
37
  }
52
38
  }, [showMenu]);
53
- const menu = showMenu && (React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, items));
39
+ const menu = showMenu && (React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, actions.map(action => !action.divider ? (React.createElement("button", { className: "ts-menu-item", onClick: action.onClick },
40
+ action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
41
+ React.createElement(TsIcon_1.TsIcon, { name: action.icon, size: "16" }))),
42
+ React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))));
54
43
  // #########
55
44
  // Rendering
56
45
  return (React.createElement("div", { className: "ts-menu-button", ref: containerRef },
57
- React.createElement("div", { ref: buttonRef }, React.cloneElement(mainButton, { onClick: handleShowMenu })),
58
- menu));
46
+ React.createElement("div", { ref: buttonRef },
47
+ React.createElement(TsButton_1.TsButton, { ...buttonProps, onClick: handleShowMenu })),
48
+ (0, react_dom_1.createPortal)(menu, document.body)));
59
49
  };
60
50
  exports.TsMenuButton = TsMenuButton;
61
51
  //# sourceMappingURL=TsMenuButton.js.map
package/lib/components/TsMenuButton/TsMenuButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA+E;AAC/E,yCAAyC;AACzC,mDAAgD;AAChD,6CAA0C;AAC1C,qEAAgE;AAEhE,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAqB,EAAE,EAAE;IACzF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE;QACxC,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAgB,EAAE,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,WAAW;IACX,WAAW;IACX,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,SAAS,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACpD,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAC7D,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;YAC1C,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAClE,MAAM,UAAU,GAAG,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC;YAEtD,YAAY,CAAC;gBACX,GAAG,EAAE,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,GAAG,CAAC,IAAI;gBACrG,IAAI,EAAE,GAAG,UAAU,CAAC,IAAI,IAAI;aAC7B,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,IAAI,GAAG,QAAQ,IAAI,CACvB,6BAAK,SAAS,EAAE,4CAA4C,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,IACxG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAChB,gCAAQ,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO;QACrD,MAAM,CAAC,IAAI,IAAI,CACd,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,eAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACP;QAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,MAAM,CAAC,KAAK,CAAO,CACjD,CACV,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CACpC,CACF,CACG,CACP,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,YAAY;QAC/C,6BAAK,GAAG,EAAE,SAAS;YACjB,oBAAC,mBAAQ,OAAK,WAAW,EAAE,OAAO,EAAE,cAAc,GAAI,CAClD;QACL,IAAA,wBAAY,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAC9B,CACP,CAAC;AACJ,CAAC,CAAC;AA9DW,QAAA,YAAY,gBA8DvB"}
package/lib/components/TsMenuButton/TsMenuButton.types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
- import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
2
- export type TsMenuItemProps = {
3
- label: string;
1
+ import { MouseEvent } from 'react';
2
+ import { TsButtonProps } from '../TsButton/TsButton.types';
3
+ export type Action = {
4
+ label?: string;
4
5
  icon?: string;
5
- onClick: (e: MouseEvent<HTMLElement>) => void;
6
+ divider?: boolean;
7
+ onClick?: (e: MouseEvent<HTMLElement>) => void;
6
8
  };
7
9
  export type TsMenuButtonProps = {
8
10
  menuAlignment?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
9
- mainButton: ReactElement;
10
- items: ReactElement;
11
- } & ButtonHTMLAttributes<HTMLButtonElement>;
11
+ buttonProps: TsButtonProps;
12
+ actions: Action[];
13
+ };
package/lib/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsMenuButton, TsMenuItem, TsMenuDivider } from '../TsMenuButton';
4
- import { TsButton } from '../../TsButton/TsButton';
3
+ import { TsMenuButton } from '../TsMenuButton';
5
4
 
6
5
  <Meta title="Components/MenuButton" />
7
6
 
@@ -25,15 +24,13 @@ A MenuButton can be used to group a set of actions that are related.
25
24
  name="Overview"
26
25
  args={{
27
26
  menuAlignment: 'bottom-start',
28
- mainButton: <TsButton icon="dots-vertical" variant="secondary" />,
29
- items: (
30
- <>
31
- <TsMenuItem icon="edit" label="Edit" />
32
- <TsMenuItem icon="file-copy" label="Duplicate" />
33
- <TsMenuDivider />
34
- <TsMenuItem icon="delete-bin" label="Delete" />
35
- </>
36
- ),
27
+ buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
28
+ actions: [
29
+ { icon: 'edit', label: 'Edit' },
30
+ { icon: 'file-copy', label: 'Duplicate' },
31
+ { divider: true },
32
+ { icon: 'delete-bin', label: 'Delete' },
33
+ ],
37
34
  }}
38
35
  argTypes={menuButtonArgTypes}
39
36
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.13.7",
3
+ "version": "1.13.8",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsMenuButton/TsMenuButton.css CHANGED
@@ -25,7 +25,7 @@
25
25
  display: flex;
26
26
  align-items: center;
27
27
  width: 100%;
28
- min-height: 36px;
28
+ min-height: 32px;
29
29
  border: none;
30
30
  background: #ffffff;
31
31
  cursor: pointer;
@@ -38,8 +38,8 @@
38
38
  display: flex;
39
39
  align-items: center;
40
40
  justify-content: center;
41
- width: 36px;
42
- height: 36px;
41
+ width: 32px;
42
+ height: 32px;
43
43
  }
44
44
  /* ######### */
45
45
  /* DIVIDER */
package/src/components/TsMenuButton/TsMenuButton.tsx CHANGED
@@ -1,37 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react';
3
- // import { createPortal } from 'react-dom';
4
- import { TsMenuButtonProps, TsMenuItemProps } from './TsMenuButton.types';
3
+ import { createPortal } from 'react-dom';
4
+ import { TsButton } from '../TsButton/TsButton';
5
5
  import { TsIcon } from '../TsIcon/TsIcon';
6
6
  import { useClickOutside } from '../../hooks/use-click-outside';
7
+ import { TsMenuButtonProps } from './TsMenuButton.types';
7
8
  import './TsMenuButton.css';
8
9
 
9
- export const TsMenuDivider = () => {
10
- // #########
11
- // Rendering
12
- return <div className="ts-menu-divider" />;
13
- };
14
-
15
- export const TsMenuItem = ({ icon, label, onClick }: TsMenuItemProps) => {
16
- // #########
17
- // Rendering
18
- return (
19
- <button className="ts-menu-item" onClick={onClick}>
20
- {icon && (
21
- <div className="ts-menu-item-icon">
22
- <TsIcon name={icon} size="16" />
23
- </div>
24
- )}
25
-
26
- <div className="ts-menu-item-label">{label}</div>
27
- </button>
28
- );
29
- };
30
-
31
- export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items }: TsMenuButtonProps) => {
10
+ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }: TsMenuButtonProps) => {
32
11
  const [showMenu, setShowMenu] = useState<boolean>(false);
33
12
  const containerRef = useClickOutside(() => {
34
- console.log('JE PASSE ICI');
35
13
  setShowMenu(false);
36
14
  });
37
15
  const buttonRef = useRef<HTMLDivElement>(null);
@@ -63,7 +41,21 @@ export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items
63
41
 
64
42
  const menu = showMenu && (
65
43
  <div className={`ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`} style={menuStyle} ref={menuRef}>
66
- {items}
44
+ {actions.map(action =>
45
+ !action.divider ? (
46
+ <button className="ts-menu-item" onClick={action.onClick}>
47
+ {action.icon && (
48
+ <div className="ts-menu-item-icon">
49
+ <TsIcon name={action.icon} size="16" />
50
+ </div>
51
+ )}
52
+
53
+ <div className="ts-menu-item-label">{action.label}</div>
54
+ </button>
55
+ ) : (
56
+ <div className="ts-menu-divider" />
57
+ ),
58
+ )}
67
59
  </div>
68
60
  );
69
61
 
@@ -71,9 +63,10 @@ export const TsMenuButton = ({ menuAlignment = 'bottom-start', mainButton, items
71
63
  // Rendering
72
64
  return (
73
65
  <div className="ts-menu-button" ref={containerRef}>
74
- <div ref={buttonRef}>{React.cloneElement(mainButton, { onClick: handleShowMenu })}</div>
75
- {menu}
76
- {/* {createPortal(menu, document.body)} */}
66
+ <div ref={buttonRef}>
67
+ <TsButton {...buttonProps} onClick={handleShowMenu} />
68
+ </div>
69
+ {createPortal(menu, document.body)}
77
70
  </div>
78
71
  );
79
72
  };
package/src/components/TsMenuButton/TsMenuButton.types.ts CHANGED
@@ -1,13 +1,15 @@
1
- import { ButtonHTMLAttributes, ReactElement, MouseEvent } from 'react';
1
+ import { MouseEvent } from 'react';
2
+ import { TsButtonProps } from '../TsButton/TsButton.types';
2
3
 
3
- export type TsMenuItemProps = {
4
- label: string;
4
+ export type Action = {
5
+ label?: string;
5
6
  icon?: string;
6
- onClick: (e: MouseEvent<HTMLElement>) => void;
7
+ divider?: boolean;
8
+ onClick?: (e: MouseEvent<HTMLElement>) => void;
7
9
  };
8
10
 
9
11
  export type TsMenuButtonProps = {
10
12
  menuAlignment?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
11
- mainButton: ReactElement;
12
- items: ReactElement;
13
- } & ButtonHTMLAttributes<HTMLButtonElement>;
13
+ buttonProps: TsButtonProps;
14
+ actions: Action[];
15
+ };
package/src/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsMenuButton, TsMenuItem, TsMenuDivider } from '../TsMenuButton';
4
- import { TsButton } from '../../TsButton/TsButton';
3
+ import { TsMenuButton } from '../TsMenuButton';
5
4
 
6
5
  <Meta title="Components/MenuButton" />
7
6
 
@@ -25,15 +24,13 @@ A MenuButton can be used to group a set of actions that are related.
25
24
  name="Overview"
26
25
  args={{
27
26
  menuAlignment: 'bottom-start',
28
- mainButton: <TsButton icon="dots-vertical" variant="secondary" />,
29
- items: (
30
- <>
31
- <TsMenuItem icon="edit" label="Edit" />
32
- <TsMenuItem icon="file-copy" label="Duplicate" />
33
- <TsMenuDivider />
34
- <TsMenuItem icon="delete-bin" label="Delete" />
35
- </>
36
- ),
27
+ buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
28
+ actions: [
29
+ { icon: 'edit', label: 'Edit' },
30
+ { icon: 'file-copy', label: 'Duplicate' },
31
+ { divider: true },
32
+ { icon: 'delete-bin', label: 'Delete' },
33
+ ],
37
34
  }}
38
35
  argTypes={menuButtonArgTypes}
39
36
  >