@codezee/sixtify-brahma 0.2.43 → 0.2.45

package/package.json

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

package/packages/shared-components/dist/Actions/DownloadIconAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadIconAction.d.ts","sourceRoot":"","sources":["../../src/Actions/DownloadIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKrD,MAAM,MAAM,uBAAuB,GAAG,eAAe,CAAC;AAEtD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAQhE,CAAC"}
+{"version":3,"file":"DownloadIconAction.d.ts","sourceRoot":"","sources":["../../src/Actions/DownloadIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKrD,MAAM,MAAM,uBAAuB,GAAG,eAAe,CAAC;AAEtD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAShE,CAAC"}

package/packages/shared-components/dist/Actions/DownloadIconAction.js

@@ -6,6 +6,8 @@ const material_1 = require("@mui/material");
 const Svgs_1 = require("../Svgs");
 const Tooltip_1 = require("../Tooltip");
 const DownloadIconAction = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Download", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...props, children: (0, jsx_runtime_1.jsx)(Svgs_1.SvgDownload, {}) }) }));
+    return (
+    // TODO: Need to add margin top to set the UI in sync with the design
+    (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...props, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Download", children: (0, jsx_runtime_1.jsx)(Svgs_1.SvgDownload, {}) }) }));
 };
 exports.DownloadIconAction = DownloadIconAction;

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkEzB"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkEzB"}

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = DateRangePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_date_range_1 = require("react-date-range");
 const react_hook_form_1 = require("react-hook-form");
@@ -31,8 +32,8 @@ function DateRangePicker({ control, defaultValue, disabled = false, label, name,
                                 key: selectedRange.key,
                             },
                         ]);
-                        const startDate = new Date(selectedRange.startDate.toUTCString()).toISOString();
-                        const endDate = new Date(selectedRange.endDate.toUTCString()).toISOString();
+                        const startDate = luxon_1.DateTime.fromJSDate(selectedRange.startDate).toISODate();
+                        const endDate = luxon_1.DateTime.fromJSDate(selectedRange.endDate).toISODate();
                         onChange([startDate, endDate]);
                     }
                 }, months: 1, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true }), error && (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "red", children: helperText })] }));

package/packages/shared-components/dist/FormFields/DateRangeSelector/DateRangeSelector.d.ts

@@ -0,0 +1,10 @@
+import type { Control, FieldValues, Path, UseFormSetValue, UseFormWatch } from "react-hook-form";
+type DateRangeSelectorProps<T extends FieldValues> = {
+    name: Path<T>;
+    watch: UseFormWatch<T>;
+    control: Control<T>;
+    setValue: UseFormSetValue<T>;
+};
+export declare function DateRangeSelector<T extends FieldValues>({ name, watch, control, setValue, }: Readonly<DateRangeSelectorProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DateRangeSelector.d.ts.map

package/packages/shared-components/dist/FormFields/DateRangeSelector/DateRangeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeSelector.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangeSelector/DateRangeSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EAEJ,eAAe,EACf,YAAY,EACb,MAAM,iBAAiB,CAAC;AAUzB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACnD,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,EACvD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,2CAkFrC"}

package/packages/shared-components/dist/FormFields/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeSelector = DateRangeSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const material_1 = require("@mui/material");
+const luxon_1 = require("luxon");
+const react_1 = require("react");
+const PadBox_1 = require("../../PadBox");
+const utils_1 = require("../../utils");
+const DateRangePicker_1 = require("../DateRangePicker");
+function DateRangeSelector({ name, watch, control, setValue, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [showCustom, setShowCustom] = (0, react_1.useState)(false);
+    const dateField = watch(name);
+    const castDateRangeToPathValue = (dateField) => {
+        return dateField;
+    };
+    const setRange = (days) => {
+        if (!showCustom) {
+            const fromDate = luxon_1.DateTime.now().minus({ days }).toISODate();
+            const toDate = luxon_1.DateTime.now().toISODate();
+            setValue(name, castDateRangeToPathValue([fromDate, toDate]));
+            setAnchorEl(null);
+        }
+    };
+    const defaultRanges = [
+        { title: "Last 7 days", onClick: () => setRange(7) },
+        { title: "Last 14 days", onClick: () => setRange(14) },
+        { title: "Last 30 days", onClick: () => setRange(30) },
+        { title: "Custom", onClick: () => setShowCustom(true) },
+    ];
+    (0, react_1.useMemo)(() => {
+        if (showCustom && Array.isArray(dateField)) {
+            setValue(name, castDateRangeToPathValue(dateField));
+        }
+    }, [showCustom, name]);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+        setShowCustom(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, utils_1.formatDate)(dateField[0] ?? "", "dd MMM yyyy"), " -", (0, utils_1.formatDate)(dateField[1] ?? "", "dd MMM yyyy")] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { component: "div", onClick: handleClick, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { fontSize: "small" }) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: true, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: showCustom ? ((0, jsx_runtime_1.jsx)(DateRangePicker_1.DateRangePicker, { name: name, control: control })) : (defaultRanges.map((item) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "center" }, onClick: item.onClick, children: item.title }, item.title)))) }) }))] }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./DateRangeSelector";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangeSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DateRangeSelector"), exports);

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAYA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CA8EhB,CAAC"}
+{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAYA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CA+EhB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.js

@@ -35,6 +35,6 @@ const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
     const dialogRenderer = {
         viewAttachment: selectedFile && ((0, jsx_runtime_1.jsx)(ViewFilePreviewDialog_1.ViewFilePreviewDialog, { open: openedDialog === "viewAttachment", onClose: onDialogClose, fileName: selectedFile })),
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(icons_material_1.AttachFile, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(icons_material_1.AttachFile, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
 };
 exports.FileNames = FileNames;

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

@@ -1,6 +1,7 @@
 export * from "./Autocomplete";
 export * from "./CheckBox";
 export * from "./DatePicker";
+export * from "./DateRangeSelector";
 export * from "./DateRangePicker";
 export * from "./DateTimePicker";
 export * from "./FileUpload";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFields/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFields/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

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

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Autocomplete"), exports);
 __exportStar(require("./CheckBox"), exports);
 __exportStar(require("./DatePicker"), exports);
+__exportStar(require("./DateRangeSelector"), exports);
 __exportStar(require("./DateRangePicker"), exports);
 __exportStar(require("./DateTimePicker"), exports);
 __exportStar(require("./FileUpload"), exports);

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);