@codezee/sixtify-brahma 0.2.43 → 0.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/TabBar/Tab.d.ts

@@ -0,0 +1,21 @@
+import type { TabProps as MuiTabProps } from "@mui/material";
+import type { MouseEvent } from "react";
+import type { MenuProps } from "./TabsMenus";
+export type OnArrowClickFunction = (e: MouseEvent<SVGElement>) => void;
+export type TabModel = {
+    label: string;
+    value: string | number;
+    hint?: string;
+    showDot?: boolean;
+    menu?: MenuProps[];
+    trimLabel?: boolean;
+    totalData: number;
+};
+export type TabProps = MuiTabProps & TabModel & {
+    activeTab: TabModel;
+    index: number;
+    onArrowClick: OnArrowClickFunction;
+    menuAnchor: HTMLElement | null;
+};
+export declare function Tab({ label, value, showDot, menu, trimLabel, activeTab, index, onArrowClick, menuAnchor, totalData, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/packages/shared-components/dist/TabBar/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabBar/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAS7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,QAAQ,GAAG;IACT,SAAS,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,oBAAoB,CAAC;IACnC,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,CAAC;AAGJ,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,GAAG,IAAI,EACR,EAAE,QAAQ,2CAsFV"}

package/packages/shared-components/dist/TabBar/Tab.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = Tab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const material_1 = require("@mui/material");
+const truncate_1 = __importDefault(require("lodash/truncate"));
+const Chips_1 = require("../Chips");
+const TRIM_LABEL_LENGTH = 15;
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function Tab({ label, value, showDot, menu, trimLabel = true, activeTab, index, onArrowClick, menuAnchor, totalData, ...rest }) {
+    const theme = (0, material_1.useTheme)();
+    const { butterflyBlue } = theme.palette.app.color;
+    const isActive = value === activeTab.value;
+    const fallbackTag = label.toLowerCase().replaceAll(/[ _]/g, "-");
+    const trimmed = (0, truncate_1.default)(label, {
+        length: trimLabel ? TRIM_LABEL_LENGTH : label.length,
+        omission: trimLabel ? "..." : "",
+    });
+    const labelText = isActive ? label : trimmed;
+    const props = {
+        key: label,
+        iconPosition: "end",
+        "data-cy": fallbackTag,
+        "data-ptag": fallbackTag,
+        value: value ?? index,
+        label: ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "6px", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: labelText }), (0, jsx_runtime_1.jsx)(Chips_1.Chip, { label: totalData, sx: { height: "20px" }, size: "small", color: "info" })] })),
+    };
+    if (label.length > TRIM_LABEL_LENGTH && !isActive) {
+        props.title = label;
+    }
+    if (value === activeTab.value && menu?.length) {
+        props.icon = ((0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, { onClick: onArrowClick, id: `tabDropDown-${value}`, "aria-controls": menuAnchor !== null ? `dropDownMenu-${value}` : undefined, "aria-expanded": menuAnchor !== null ? "true" : undefined, "aria-haspopup": "true", "data-cy": `${fallbackTag}-arrowicon`, "data-ptag": `${fallbackTag}-arrowicon` }));
+    }
+    return showDot ? ((0, jsx_runtime_1.jsx)(material_1.Tab, { sx: {
+            borderRadius: "5px",
+            borderBottom: "2px solid",
+            borderBottomColor: isActive ? butterflyBlue[900] : "white",
+            overflow: "visible",
+            [`&.${material_1.tabClasses.root}`]: {
+                minHeight: "40px",
+                height: "40px",
+            },
+        }, ...props, ...rest })) : ((0, jsx_runtime_1.jsx)(material_1.Tab, { sx: {
+            borderRadius: "5px",
+            borderBottom: "2px solid",
+            borderBottomColor: isActive ? butterflyBlue[900] : "white",
+            [`&.${material_1.tabClasses.root}`]: {
+                minHeight: "40px",
+                height: "40px",
+            },
+        }, ...props, ...rest }));
+}

package/packages/shared-components/dist/TabBar/TabBar.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { TabModel } from "./Tab";
+export type TabBarProps = {
+    tabs: TabModel[];
+    activeIndex?: number;
+    ariaLabel?: string;
+    addButton?: ReactNode;
+    actionButton?: ReactNode;
+    onChange?: (value: TabModel) => void;
+};
+export declare function TabBar({ tabs, onChange, addButton, actionButton, ariaLabel, activeIndex, }: Readonly<TabBarProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/packages/shared-components/dist/TabBar/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/TabBar/TabBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAe,GAChB,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAsFvB"}

package/packages/shared-components/dist/TabBar/TabBar.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBar = TabBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const Tab_1 = require("./Tab");
+const TabsMenus_1 = require("./TabsMenus");
+function TabBar({ tabs, onChange, addButton, actionButton, ariaLabel, activeIndex = 0, }) {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(tabs[activeIndex]);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const activeTabIndex = tabs.findIndex((tab) => tab.value === activeTab.value);
+        if (activeTabIndex === -1) {
+            if (onChange && tabs[0]) {
+                onChange(tabs[0]);
+            }
+            setActiveTab(tabs[0]);
+        }
+    }, [tabs, activeTab, onChange]);
+    (0, react_1.useEffect)(() => {
+        setActiveTab(tabs[activeIndex]);
+    }, [activeIndex]);
+    const tabChangeHandler = (_event, newTabValue) => {
+        const newActiveTab = tabs.find((tab) => tab.value === newTabValue);
+        if (newActiveTab) {
+            setActiveTab(newActiveTab);
+            // eslint-disable-next-line sonarjs/no-gratuitous-expressions
+            if (onChange && newActiveTab) {
+                onChange(newActiveTab);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(TabsMenus_1.TabsMenus, { activeTab: activeTab, tabs: tabs, onClose: () => setAnchorEl(null), onMenuItemClick: () => setAnchorEl(null), menuAnchor: anchorEl }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(material_1.Tabs, { value: activeTab.value, onChange: tabChangeHandler, TabIndicatorProps: {
+                                sx: {
+                                    display: "none",
+                                },
+                            }, variant: "scrollable", scrollButtons: "auto", ScrollButtonComponent: material_1.TabScrollButton, "aria-label": ariaLabel ?? "Tabs", children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(Tab_1.Tab, { index: index, activeTab: activeTab, onArrowClick: (event) => {
+                                    setAnchorEl(event.target);
+                                }, menuAnchor: anchorEl, ...tab }, tab.value))) }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", alignItems: "center", children: [addButton, actionButton] })] })] }));
+}

package/packages/shared-components/dist/TabBar/TabsMenus.d.ts

@@ -0,0 +1,15 @@
+import type { TabModel } from "./Tab";
+export type MenuProps = {
+    label: string;
+    disabled?: boolean;
+    onClick: (tab: TabModel) => void;
+};
+export type TabsMenusProps = {
+    tabs: TabModel[];
+    menuAnchor: HTMLElement | null;
+    activeTab: TabModel;
+    onClose: () => void;
+    onMenuItemClick: () => void;
+};
+export declare function TabsMenus({ tabs, activeTab, menuAnchor, onClose, onMenuItemClick, }: Readonly<TabsMenusProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabsMenus.d.ts.map

package/packages/shared-components/dist/TabBar/TabsMenus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsMenus.d.ts","sourceRoot":"","sources":["../../src/TabBar/TabsMenus.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,QAAQ,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,OAAO,EACP,eAAe,GAChB,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAgC1B"}

package/packages/shared-components/dist/TabBar/TabsMenus.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsMenus = TabsMenus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function TabsMenus({ tabs, activeTab, menuAnchor, onClose, onMenuItemClick, }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tabs
+            .filter((tab) => !!tab.menu)
+            .map((tab) => ((0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: menuAnchor, open: tab.value === activeTab.value && !!menuAnchor, onClose: onClose, id: `dropDownMenu-${tab.value}`, MenuListProps: {
+                "aria-labelledby": `tabDropDown-${tab.value}`,
+            }, children: tab.menu?.map((menuItem) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+                    onMenuItemClick();
+                    menuItem.onClick(activeTab);
+                }, disabled: menuItem.disabled, children: menuItem.label }, menuItem.label))) }, tab.value))) }));
+}

package/packages/shared-components/dist/TabBar/index.d.ts

@@ -0,0 +1,7 @@
+export { TabBar } from "./TabBar";
+export type { TabBarProps } from "./TabBar";
+export { Tab } from "./Tab";
+export type { OnArrowClickFunction, TabModel, TabProps } from "./Tab";
+export { TabsMenus } from "./TabsMenus";
+export type { MenuProps as TabMenuProps, TabsMenusProps } from "./TabsMenus";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/TabBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TabBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,SAAS,IAAI,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/packages/shared-components/dist/TabBar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsMenus = exports.Tab = exports.TabBar = void 0;
+var TabBar_1 = require("./TabBar");
+Object.defineProperty(exports, "TabBar", { enumerable: true, get: function () { return TabBar_1.TabBar; } });
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
+var TabsMenus_1 = require("./TabsMenus");
+Object.defineProperty(exports, "TabsMenus", { enumerable: true, get: function () { return TabsMenus_1.TabsMenus; } });

package/packages/shared-components/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from "./Pagination";
 export * from "./Stepper";
 export * from "./Svgs";
 export * from "./Tab";
+export * from "./TabBar";
 export * from "./Timeline";
 export * from "./Toast";
 export * from "./Tooltip";

package/packages/shared-components/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/packages/shared-components/dist/index.js

@@ -36,6 +36,7 @@ __exportStar(require("./Pagination"), exports);
 __exportStar(require("./Stepper"), exports);
 __exportStar(require("./Svgs"), exports);
 __exportStar(require("./Tab"), exports);
+__exportStar(require("./TabBar"), exports);
 __exportStar(require("./Timeline"), exports);
 __exportStar(require("./Toast"), exports);
 __exportStar(require("./Tooltip"), exports);