@dktunited-techoff/techoff-suite-ui 1.13.10 → 1.14.0

package/esm/components/TsMenuButton/TsMenuButton.js

@@ -32,12 +32,16 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
     const menu = showMenu && (React.createElement(React.Fragment, null,
         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: e => {
                 e.stopPropagation();
+                setShowMenu(false);
                 action.onClick && action.onClick(e);
             } },
             action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
                 React.createElement(TsIcon, { name: action.icon, size: "16" }))),
             React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))),
-        React.createElement("div", { onClick: () => setShowMenu(false), style: {
+        React.createElement("div", { onClick: e => {
+                e.stopPropagation();
+                setShowMenu(false);
+            }, style: {
                 position: 'fixed',
                 top: 0,
                 left: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAqB,EAAE,EAAE;IACzF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,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,SAAS,CAAC,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;QACE,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,gCACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE;gBACX,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,KAAK,CAAC,CAAC;gBACnB,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACtC,CAAC;YAEA,MAAM,CAAC,IAAI,IAAI,CACd,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACP;YAED,6BAAK,SAAS,EAAC,oBAAoB,IAAE,MAAM,CAAC,KAAK,CAAO,CACjD,CACV,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CACpC,CACF,CACG;QAGN,6BACE,OAAO,EAAE,CAAC,CAAC,EAAE;gBACX,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EACD,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,EAAE;aACX,GACD,CACD,CACJ,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,GAAG,EAAE,SAAS;YACjB,oBAAC,QAAQ,OAAK,WAAW,EAAE,OAAO,EAAE,cAAc,GAAI,CAClD;QACL,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAC9B,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsModal/TsModal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import './TsModal.css';
+export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;

package/esm/components/TsModal/TsModal.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TsButton } from '../TsButton/TsButton';
+import './TsModal.css';
+export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-modal-container" },
+        React.createElement("div", { className: "ts-modal-blur" }),
+        React.createElement("div", { className: "ts-modal", style: style },
+            React.createElement("div", { className: "ts-modal-header" },
+                React.createElement("div", { className: "ts-modal-title" }, title),
+                React.createElement(TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
+            React.createElement("div", { className: "ts-modal-content" }, children),
+            React.createElement("div", { className: "ts-modal-footer" },
+                React.createElement(TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
+                React.createElement(TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
+};
+//# sourceMappingURL=TsModal.js.map

package/esm/components/TsModal/TsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,QAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+export type TsModalProps = {
+    actionLabel: string;
+    actionIcon?: string;
+    style?: CSSProperties;
+    title: string;
+    onAction: () => void;
+    onClose?: () => void;
+} & PropsWithChildren;

package/esm/components/TsModal/TsModal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsModal.types.js.map

package/esm/components/TsModal/TsModal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.types.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.types.ts"],"names":[],"mappings":""}

package/esm/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/esm/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC"}

package/lib/components/TsMenuButton/TsMenuButton.js

@@ -35,12 +35,16 @@ const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
     const menu = showMenu && (React.createElement(React.Fragment, null,
         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: e => {
                 e.stopPropagation();
+                setShowMenu(false);
                 action.onClick && action.onClick(e);
             } },
             action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
                 React.createElement(TsIcon_1.TsIcon, { name: action.icon, size: "16" }))),
             React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))),
-        React.createElement("div", { onClick: () => setShowMenu(false), style: {
+        React.createElement("div", { onClick: e => {
+                e.stopPropagation();
+                setShowMenu(false);
+            }, style: {
                 position: 'fixed',
                 top: 0,
                 left: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}

package/lib/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsModal/TsModal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import './TsModal.css';
+export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;

package/lib/components/TsModal/TsModal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsModal = void 0;
+const React = require("react");
+const TsButton_1 = require("../TsButton/TsButton");
+require("./TsModal.css");
+const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-modal-container" },
+        React.createElement("div", { className: "ts-modal-blur" }),
+        React.createElement("div", { className: "ts-modal", style: style },
+            React.createElement("div", { className: "ts-modal-header" },
+                React.createElement("div", { className: "ts-modal-title" }, title),
+                React.createElement(TsButton_1.TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
+            React.createElement("div", { className: "ts-modal-content" }, children),
+            React.createElement("div", { className: "ts-modal-footer" },
+                React.createElement(TsButton_1.TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
+                React.createElement(TsButton_1.TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
+};
+exports.TsModal = TsModal;
+//# sourceMappingURL=TsModal.js.map

package/lib/components/TsModal/TsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,mDAAgD;AAChD,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,mBAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,mBAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,OAAO,WA0BlB"}

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

@@ -0,0 +1,9 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+export type TsModalProps = {
+    actionLabel: string;
+    actionIcon?: string;
+    style?: CSSProperties;
+    title: string;
+    onAction: () => void;
+    onClose?: () => void;
+} & PropsWithChildren;

package/lib/components/TsModal/TsModal.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsModal.types.js.map

package/lib/components/TsModal/TsModal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsModal.types.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.types.ts"],"names":[],"mappings":""}

package/lib/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/lib/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';

package/lib/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/TsInput/TsBooleanInput/TsBooleanInput"), expo
 __exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
 __exportStar(require("./components/TsLoader/TsLoader"), exports);
 __exportStar(require("./components/TsMenuButton/TsMenuButton"), exports);
+__exportStar(require("./components/TsModal/TsModal"), exports);
 __exportStar(require("./components/TsSwitcher/TsSwitcher"), exports);
 __exportStar(require("./components/TsTabs/TsTabs"), exports);
 __exportStar(require("./components/TsTooltip/TsTooltip"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,yEAAuD;AACvD,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD;AACpD,0EAAwD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,yEAAuD;AACvD,+DAA6C;AAC7C,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD;AACpD,0EAAwD"}

package/package.json

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

package/src/components/TsMenuButton/TsMenuButton.tsx

@@ -44,6 +44,7 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }: TsMenuButt
               className="ts-menu-item"
               onClick={e => {
                 e.stopPropagation();
+                setShowMenu(false);
                 action.onClick && action.onClick(e);
               }}
             >
@@ -63,7 +64,10 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }: TsMenuButt
 
       {/* Outside click layer */}
       <div
-        onClick={() => setShowMenu(false)}
+        onClick={e => {
+          e.stopPropagation();
+          setShowMenu(false);
+        }}
         style={{
           position: 'fixed',
           top: 0,

package/src/components/TsModal/TsModal.css

@@ -0,0 +1,65 @@
+.ts-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+}
+
+.ts-modal-blur {
+  position: fixed;
+  inset: 0;
+  background: #4e5d6b;
+  opacity: 80%;
+}
+
+.ts-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 485px;
+  padding: 40px 64px;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: #ffffff;
+  z-index: 600;
+}
+
+.ts-modal-header {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.ts-modal-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.ts-modal-content {
+  flex: 1;
+  padding: 16px 32px 0;
+}
+
+.ts-modal-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+.ts-modal-footer > * {
+  margin-right: 16px;
+}
+.ts-modal-footer > *:last-child {
+  margin-right: 0;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/components/TsModal/TsModal.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TsModalProps } from './TsModal.types';
+import { TsButton } from '../TsButton/TsButton';
+import './TsModal.css';
+
+export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => {
+  // Rendering
+  return (
+    <div className="ts-modal-container">
+      <div className="ts-modal-blur" />
+
+      <div className="ts-modal" style={style}>
+        <div className="ts-modal-header">
+          <div className="ts-modal-title">{title}</div>
+
+          <TsButton icon="close" variant="ghost" rounded onClick={onClose} />
+        </div>
+
+        <div className="ts-modal-content">{children}</div>
+
+        <div className="ts-modal-footer">
+          <TsButton variant="secondary" onClick={onClose}>
+            Cancel
+          </TsButton>
+          <TsButton icon={actionIcon} variant="primary" onClick={onAction}>
+            {actionLabel}
+          </TsButton>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TsModal/TsModal.types.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+
+export type TsModalProps = {
+  actionLabel: string;
+  actionIcon?: string;
+  style?: CSSProperties;
+  title: string;
+  onAction: () => void;
+  onClose?: () => void;
+} & PropsWithChildren;

package/src/components/TsModal/__stories__/TsModal.stories.mdx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsModal } from '../TsModal';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Modal" />
+
+export const modalArgTypes = {
+  actionIcon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  actionLabel: {
+    control: 'text',
+    description: 'Label of the modal action button.',
+  },
+  title: {
+    control: 'text',
+    description: 'Title of the modal.',
+  },
+  onCancel: {
+    control: 'function',
+    description: 'Handle action when canceling or closing the modal',
+  },
+  onAction: {
+    control: 'function',
+    description: 'Handle action when clicking on action button',
+  },
+};
+
+# Modal
+
+The Modal Component is the main Component of the Overlay pattern and is used to display a secondary window over the content. It can be used with or without an Illustration and adapts its content accordingly.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'New modal',
+      actionIcon: 'add',
+      actionLabel: 'Create',
+      onAction: () => console.log('Action !'),
+      onClose: () => console.log('Close !'),
+    }}
+    argTypes={modalArgTypes}
+  >
+    {args => (
+      <div style={{ height: '500px' }}>
+        <TsModal {...args}>{args.children}</TsModal>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsModal} />

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsMenuButton/TsMenuButton';
+export * from './components/TsModal/TsModal';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './components/TsTooltip/TsTooltip';