@erpsquad/common 1.8.46 → 1.8.48

package/dist/components/select/controller/chip-or-placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/select/controller/chip-or-placeholder.tsx"],"sourcesContent":["import { Close } from \"@mui/icons-material\";\r\nimport { ChipProps } from \"@mui/material\";\r\nimport Chip from \"../../chip/chip\";\r\nimport Typography from \"../../typography/typography\";\r\n\r\ninterface ChipOrPlaceholderProps {\r\n  data: string[];\r\n  placeholder: string;\r\n  onDelete?: () => void;\r\n  chipProps?: Omit<ChipProps, \"label\">;\r\n}\r\n\r\nconst ChipOrPlaceholder: React.FC<ChipOrPlaceholderProps> = ({\r\n  data,\r\n  placeholder,\r\n  onDelete,\r\n  chipProps,\r\n}) => (\r\n  <>\r\n    {data.length ? (\r\n      <Chip\r\n        variant=\"outlined\"\r\n        type=\"normal\"\r\n        label={`${data.length} Selected`}\r\n        deleteIcon={<Close fontSize=\"large\" />}\r\n        onDelete={onDelete}\r\n        onMouseDown={(event) => event.stopPropagation()}\r\n        {...chipProps}\r\n      />\r\n    ) : (\r\n      <Typography color=\"inherit\" type=\"s3\">\r\n        {placeholder}\r\n      </Typography>\r\n    )}\r\n  </>\r\n);\r\n\r\nexport default ChipOrPlaceholder;\r\n"],"names":["data","placeholder","onDelete","chipProps","jsx","Fragment","children","length","Chip","variant","type","label","deleteIcon","Close","fontSize","onMouseDown","event","stopPropagation","Typography","color"],"mappings":"kSAY4D,EAC1DA,OACAC,cACAC,WACAC,8BAEAC,EAAAA,IAAAC,EAAAA,SAAA,CACGC,WAAKC,sBACJH,EAAAA,IAACI,EAAAA,KAAA,CACCC,QAAQ,WACRC,KAAK,SACLC,MAAO,GAAGX,EAAKO,kBACfK,4BAAYR,IAACS,EAAAA,QAAA,CAAMC,SAAS,UAC5BZ,WACAa,YAAcC,GAAUA,EAAMC,qBAC1Bd,yBAGLe,aAAA,CAAWC,MAAM,UAAUT,KAAK,KAC9BJ"}

package/dist/components/select/controller/controller-select/index.esm.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { Select } from "../../select/index.esm.js";
+import { Checkbox } from "../../../checkbox/checkbox/index.esm.js";
+import { Typography } from "../../../typography/typography/index.esm.js";
+import { Chip } from "../../../chip/chip/index.esm.js";
+import { MoreIcon } from "../../../icons/more/index.esm.js";
+import ChipOrPlaceholder from "../chip-or-placeholder/index.esm.js";
+/* empty css                                  */
+import FormHelperText from "../../../../node_modules/@mui/material/FormHelperText/FormHelperText/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+const SelectedItems = ({
+  data,
+  options
+}) => {
+  const displayTitle = data.map(
+    (selectedItem) => {
+      var _a;
+      return ((_a = options.find((option) => option.value === selectedItem)) == null ? void 0 : _a.text) || selectedItem;
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      type: "s4",
+      color: "inherit",
+      sx: { display: "flex", gap: 1, alignItems: "center", mt: 0.5 },
+      children: [
+        displayTitle.slice(0.4).join(", "),
+        data.length > 4 && /* @__PURE__ */ jsx(Chip, { variant: "outlined", type: "normal", label: /* @__PURE__ */ jsx(MoreIcon, {}) })
+      ]
+    }
+  );
+};
+const generateMenuItems = ({
+  options,
+  multiple,
+  placeholder,
+  with_checkboxes,
+  onChange,
+  values
+}) => {
+  const items = [];
+  if (!multiple) {
+    items.push(
+      /* @__PURE__ */ jsx(MenuItem, { disabled: true, value: "", children: /* @__PURE__ */ jsx("em", { children: placeholder }) })
+    );
+  }
+  const handleParentChange = (parentValue, childOptions) => {
+    const childValues = childOptions.map((child) => child.value);
+    const isParentSelected = values.includes(parentValue);
+    const updatedValues = isParentSelected ? values.filter((value) => value !== parentValue && !childValues.includes(value)) : [...values, parentValue, ...childValues];
+    onChange(updatedValues);
+  };
+  options.forEach((option) => {
+    items.push(
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          value: option.value,
+          className: (option == null ? void 0 : option.isGroup) ? "select--MenuItemHeader" : "",
+          children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+            multiple && with_checkboxes && // <Checkbox checked={values?.indexOf((option.value)) > -1} />
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: (values == null ? void 0 : values.indexOf(option.value)) > -1,
+                onChange: () => handleParentChange(option.value, option.options || [])
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: option.text })
+          ] })
+        }
+      )
+    );
+    if ((option == null ? void 0 : option.isGroup) && Array.isArray(option == null ? void 0 : option.options)) {
+      option.options.forEach((opt) => {
+        items.push(
+          /* @__PURE__ */ jsx(MenuItem, { value: opt.value, sx: { pl: 5 }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+            multiple && with_checkboxes && /* @__PURE__ */ jsx(Checkbox, { checked: (values == null ? void 0 : values.indexOf(opt.value)) > -1 }),
+            /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: opt.text })
+          ] }) })
+        );
+      });
+    }
+  });
+  return items;
+};
+const ControllerSelect = ({
+  name,
+  fieldArrayName,
+  options,
+  label,
+  placeholder,
+  formControl,
+  position,
+  required,
+  size = "small",
+  multiple,
+  disabled,
+  searchPlaceholder,
+  handleSearch,
+  classes,
+  with_checkboxes,
+  onChipRemove
+}) => {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: formControl,
+      name: `${fieldArrayName}.${name}`,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            fullWidth: true,
+            name,
+            dataPosition: position,
+            dataName: `${fieldArrayName}.${name}`,
+            placeholder,
+            label,
+            value: field.value || (multiple ? [] : ""),
+            defaultValue: "",
+            onChange: (e) => {
+              var _a, _b, _c;
+              return multiple && ((_b = (_a = e.target) == null ? void 0 : _a.value.filter((i) => i)) == null ? void 0 : _b.length) > 0 || !multiple && ((_c = e.target) == null ? void 0 : _c.value) ? field.onChange(e.target.value) : field.onChange("");
+            },
+            required: Boolean(required),
+            size,
+            multiple: Boolean(multiple),
+            disabled: Boolean(disabled),
+            searchPlaceholder,
+            handleSearch,
+            className: classes,
+            variant: "outlined",
+            error: Boolean(error),
+            renderValue: (selected) => /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(selected) ? /* @__PURE__ */ jsx(
+              ChipOrPlaceholder,
+              {
+                data: selected,
+                placeholder,
+                onDelete: onChipRemove
+              }
+            ) : selected || placeholder }),
+            children: generateMenuItems({
+              options,
+              multiple: Boolean(multiple),
+              placeholder,
+              values: field.value,
+              with_checkboxes: Boolean(with_checkboxes),
+              onChange: field.onChange
+            })
+          }
+        ),
+        error && /* @__PURE__ */ jsx(FormHelperText, { error: true, children: error.message }),
+        multiple && Array.isArray(field == null ? void 0 : field.value) && /* @__PURE__ */ jsx(SelectedItems, { data: field.value, options })
+      ] })
+    }
+  );
+};
+export {
+  ControllerSelect as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/select/controller/controller-select/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/select/controller/controller-select.tsx"],"sourcesContent":["import { Control, Controller, FieldValue } from \"react-hook-form\";\nimport { Box, FormHelperText, MenuItem, SelectProps } from \"@mui/material\";\n\nimport Select from '../select';\nimport Checkbox from '../../checkbox/checkbox';\nimport Typography from '../../typography/typography';\nimport Chip from '../../chip/chip';\nimport MoreIcon from '../../icons/more';\nimport { MenuItemProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport ChipOrPlaceholder from './chip-or-placeholder';\nimport './controller-select.scss';\n\ninterface IControllerSelect {\n  name: string;\n  label: string;\n  options: any;\n  placeholder: string;\n  formControl: Control<FieldValue<any>, any>;\n  fieldArrayName?: string;\n  position?: string;\n  required?: boolean;\n  size?: SelectProps[\"size\"];\n  multiple?: boolean;\n  disabled?: boolean;\n  searchPlaceholder?: string;\n  handleSearch?: () => void;\n  classes?: string;\n  with_checkboxes?: boolean;\n  onChipRemove?: () => void;\n}\n\nexport interface IOption {\n\ttext: string;\n\tvalue: string | number;\n\tisGroup?: boolean;\n\tparent?: string;\n\toptions?: { text: string; value: string }[];\n}\n\ninterface IMenuItems extends MenuItemProps {\n\toptions: IOption[];\n\tmultiple: boolean;\n\tplaceholder: string;\n\twith_checkboxes: boolean;\n  onChange: (value: string[]) => void\n\tvalues: string | string[];\n}\n\nconst SelectedItems = ({\n\tdata,\n\toptions\n}: {\n\tdata: string[];\n\toptions: IOption[];\n}) => {\n\tconst displayTitle = data.map(\n\t\t(selectedItem) =>\n\t\t\toptions.find((option: any) => option.value === selectedItem)?.text ||\n\t\t\tselectedItem\n\t);\n\n\treturn (\n\t\t<Typography\n\t\t\ttype='s4'\n\t\t\tcolor='inherit'\n\t\t\tsx={{ display: 'flex', gap: 1, alignItems: 'center', mt: 0.5 }}>\n\t\t\t{displayTitle.slice(0.4).join(', ')}\n\t\t\t{data.length > 4 && (\n\t\t\t\t<Chip variant='outlined' type='normal' label={<MoreIcon />} />\n\t\t\t)}\n\t\t</Typography>\n\t);\n};\n\nconst generateMenuItems = ({\n\toptions,\n\tmultiple,\n\tplaceholder,\n\twith_checkboxes,\n  onChange,\n\tvalues\n}: IMenuItems) => {\n\tconst items: ReactElement[] = [];\n\tif (!multiple) {\n\t\titems.push(\n\t\t\t<MenuItem disabled value=''>\n\t\t\t\t<em>{placeholder}</em>\n\t\t\t</MenuItem>\n\t\t);\n\t}\n\n  const handleParentChange = (parentValue: string, childOptions: IOption[]) => {\n    const childValues = childOptions.map((child) => child.value);\n\n    const isParentSelected = values.includes(parentValue);\n    const updatedValues = isParentSelected\n      ? values.filter((value) => value !== parentValue && !childValues.includes(value))\n      : [...values, parentValue, ...childValues];\n\n    onChange(updatedValues);\n  };\n\n\toptions.forEach((option) => {\n\t\titems.push(\n\t\t\t<MenuItem\n\t\t\t\tvalue={option.value}\n\t\t\t\tclassName={option?.isGroup ? 'select--MenuItemHeader' : ''}>\n\t\t\t\t<Box sx={{ display: 'flex', gap: 1 }}>\n\t\t\t\t\t{multiple && with_checkboxes && (\n\t\t\t\t\t\t// <Checkbox checked={values?.indexOf((option.value)) > -1} />\n            <Checkbox checked={values?.indexOf((option.value)) > -1}\n            onChange={() => handleParentChange(option.value, option.options || [])}\n          />\n\t\t\t\t\t)}\n\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t{option.text}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t</MenuItem>\n\t\t);\n\t\tif (option?.isGroup && Array.isArray(option?.options)) {\n\t\t\toption.options.forEach((opt) => {\n\t\t\t\titems.push(\n\t\t\t\t\t<MenuItem value={opt.value} sx={{ pl: 5 }}>\n\t\t\t\t\t\t<Box sx={{ display: 'flex', gap: 1 }}>\n\t\t\t\t\t\t\t{multiple && with_checkboxes && (\n\t\t\t\t\t\t\t\t<Checkbox checked={values?.indexOf(opt.value) > -1} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{opt.text}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t});\n\n\treturn items;\n};\n\nconst ControllerSelect: React.FC<IControllerSelect> = ({\n  name,\n  fieldArrayName,\n  options,\n  label,\n  placeholder,\n  formControl,\n  position,\n  required,\n  size = \"small\",\n  multiple,\n  disabled,\n  searchPlaceholder,\n  handleSearch,\n  classes,\n  with_checkboxes,\n  onChipRemove,\n}) => {\n  return (\n    <Controller\n      control={formControl}\n      name={`${fieldArrayName}.${name}`}\n      render={({ field, fieldState: { error } }) => (\n        <>\n          <Select\n            fullWidth\n            name={name}\n            dataPosition={position}\n            dataName={`${fieldArrayName}.${name}`}\n            placeholder={placeholder}\n            label={label}\n            value={field.value || (multiple ? [] : \"\")}\n            defaultValue=\"\"\n            onChange={(e:any)=>(multiple&&e.target?.value.filter((i:any)=>i)?.length>0||!multiple&&(e.target?.value))?field.onChange(e.target.value):field.onChange(\"\")}\n            required={Boolean(required)}\n            size={size}\n            multiple={Boolean(multiple)}\n            disabled={Boolean(disabled)}\n            searchPlaceholder={searchPlaceholder}\n            handleSearch={handleSearch}\n            className={classes}\n            variant=\"outlined\"\n            error={Boolean(error)}\n            renderValue={(selected: string | string[]) => (\n              <>\n                {Array.isArray(selected) ? (\n                  <ChipOrPlaceholder\n                    data={selected}\n                    placeholder={placeholder}\n                    onDelete={onChipRemove}\n                  />\n                ) : (\n                  selected || placeholder\n                )}\n              </>\n            )}\n          >\n            {generateMenuItems({\n              options,\n              multiple: Boolean(multiple),\n              placeholder: placeholder,\n              values: field.value,\n              with_checkboxes: Boolean(with_checkboxes),\n              onChange: field.onChange\n            })}\n          </Select>\n          {error &&\n            <FormHelperText error>{error.message}</FormHelperText>\n          }\n          {multiple && Array.isArray(field?.value) && (\n            <SelectedItems data={field.value} options={options} />\n          )}\n        </>\n      )}\n    />\n  );\n};\n\nexport default ControllerSelect;\n"],"names":[],"mappings":"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"}

package/dist/components/select/controller/controller-select/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react-hook-form"),r=,/* empty css                  */a=,/* empty css                                */o=,/* empty css                                    */i=,/* empty css                        */n=,/* empty css                         */s=;/* empty css                            */;/* empty css                               */var t=,/* empty css                                                                          */d=,/* empty css                                                              */u=;/* empty css                                                    */const c=({data:l,options:r})=>{const a=l.map(e=>{var l;return(null==(l=r.find(l=>l.value===e))?void 0:l.text)||e});/* @__PURE__ */
+return e.jsxs(o.Typography,{type:"s4",color:"inherit",sx:{display:"flex",gap:1,alignItems:"center",mt:.5},children:[a.slice(.4).join(", "),l.length>4&&/* @__PURE__ */e.jsx(i.Chip,{variant:"outlined",type:"normal",label:/* @__PURE__ */e.jsx(n.MoreIcon,{})})]})},h=({options:l,multiple:r,placeholder:i,with_checkboxes:n,onChange:s,values:t})=>{const c=[];return r||c.push(
+/* @__PURE__ */e.jsx(d.default,{disabled:!0,value:"",children:/* @__PURE__ */e.jsx("em",{children:i})})),l.forEach(l=>{c.push(
+/* @__PURE__ */e.jsx(d.default,{value:l.value,className:(null==l?void 0:l.isGroup)?"select--MenuItemHeader":"",children:/* @__PURE__ */e.jsxs(u.default,{sx:{display:"flex",gap:1},children:[r&&n&&
+/* @__PURE__ */e.jsx(a.Checkbox,{checked:(null==t?void 0:t.indexOf(l.value))>-1,onChange:()=>((e,l)=>{const r=l.map(e=>e.value),a=t.includes(e)?t.filter(l=>l!==e&&!r.includes(l)):[...t,e,...r];s(a)})(l.value,l.options||[])}),
+/* @__PURE__ */e.jsx(o.Typography,{type:"s4",color:"inherit",children:l.text})]})})),(null==l?void 0:l.isGroup)&&Array.isArray(null==l?void 0:l.options)&&l.options.forEach(l=>{c.push(
+/* @__PURE__ */e.jsx(d.default,{value:l.value,sx:{pl:5},children:/* @__PURE__ */e.jsxs(u.default,{sx:{display:"flex",gap:1},children:[r&&n&&/* @__PURE__ */e.jsx(a.Checkbox,{checked:(null==t?void 0:t.indexOf(l.value))>-1}),
+/* @__PURE__ */e.jsx(o.Typography,{type:"s4",color:"inherit",children:l.text})]})}))})}),c};exports.default=({name:a,fieldArrayName:o,options:i,label:n,placeholder:d,formControl:u,position:p,required:x,size:m="small",multiple:v,disabled:j,searchPlaceholder:f,handleSearch:y,classes:g,with_checkboxes:b,onChipRemove:q})=>/* @__PURE__ */e.jsx(l.Controller,{control:u,name:`${o}.${a}`,render:({field:l,fieldState:{error:u}})=>/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(r.Select,{fullWidth:!0,name:a,dataPosition:p,dataName:`${o}.${a}`,placeholder:d,label:n,value:l.value||(v?[]:""),defaultValue:"",onChange:e=>{var r,a,o;return v&&(null==(a=null==(r=e.target)?void 0:r.value.filter(e=>e))?void 0:a.length)>0||!v&&(null==(o=e.target)?void 0:o.value)?l.onChange(e.target.value):l.onChange("")},required:Boolean(x),size:m,multiple:Boolean(v),disabled:Boolean(j),searchPlaceholder:f,handleSearch:y,className:g,variant:"outlined",error:Boolean(u),renderValue:l=>/* @__PURE__ */e.jsx(e.Fragment,{children:Array.isArray(l)?/* @__PURE__ */e.jsx(s.default,{data:l,placeholder:d,onDelete:q}):l||d}),children:h({options:i,multiple:Boolean(v),placeholder:d,values:l.value,with_checkboxes:Boolean(b),onChange:l.onChange})}),u&&/* @__PURE__ */e.jsx(t.default,{error:!0,children:u.message}),v&&Array.isArray(null==l?void 0:l.value)&&/* @__PURE__ */e.jsx(c,{data:l.value,options:i})]})});
+//# sourceMappingURL=index.js.map

package/dist/components/select/controller/controller-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/select/controller/controller-select.tsx"],"sourcesContent":["import { Control, Controller, FieldValue } from \"react-hook-form\";\nimport { Box, FormHelperText, MenuItem, SelectProps } from \"@mui/material\";\n\nimport Select from '../select';\nimport Checkbox from '../../checkbox/checkbox';\nimport Typography from '../../typography/typography';\nimport Chip from '../../chip/chip';\nimport MoreIcon from '../../icons/more';\nimport { MenuItemProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport ChipOrPlaceholder from './chip-or-placeholder';\nimport './controller-select.scss';\n\ninterface IControllerSelect {\n  name: string;\n  label: string;\n  options: any;\n  placeholder: string;\n  formControl: Control<FieldValue<any>, any>;\n  fieldArrayName?: string;\n  position?: string;\n  required?: boolean;\n  size?: SelectProps[\"size\"];\n  multiple?: boolean;\n  disabled?: boolean;\n  searchPlaceholder?: string;\n  handleSearch?: () => void;\n  classes?: string;\n  with_checkboxes?: boolean;\n  onChipRemove?: () => void;\n}\n\nexport interface IOption {\n\ttext: string;\n\tvalue: string | number;\n\tisGroup?: boolean;\n\tparent?: string;\n\toptions?: { text: string; value: string }[];\n}\n\ninterface IMenuItems extends MenuItemProps {\n\toptions: IOption[];\n\tmultiple: boolean;\n\tplaceholder: string;\n\twith_checkboxes: boolean;\n  onChange: (value: string[]) => void\n\tvalues: string | string[];\n}\n\nconst SelectedItems = ({\n\tdata,\n\toptions\n}: {\n\tdata: string[];\n\toptions: IOption[];\n}) => {\n\tconst displayTitle = data.map(\n\t\t(selectedItem) =>\n\t\t\toptions.find((option: any) => option.value === selectedItem)?.text ||\n\t\t\tselectedItem\n\t);\n\n\treturn (\n\t\t<Typography\n\t\t\ttype='s4'\n\t\t\tcolor='inherit'\n\t\t\tsx={{ display: 'flex', gap: 1, alignItems: 'center', mt: 0.5 }}>\n\t\t\t{displayTitle.slice(0.4).join(', ')}\n\t\t\t{data.length > 4 && (\n\t\t\t\t<Chip variant='outlined' type='normal' label={<MoreIcon />} />\n\t\t\t)}\n\t\t</Typography>\n\t);\n};\n\nconst generateMenuItems = ({\n\toptions,\n\tmultiple,\n\tplaceholder,\n\twith_checkboxes,\n  onChange,\n\tvalues\n}: IMenuItems) => {\n\tconst items: ReactElement[] = [];\n\tif (!multiple) {\n\t\titems.push(\n\t\t\t<MenuItem disabled value=''>\n\t\t\t\t<em>{placeholder}</em>\n\t\t\t</MenuItem>\n\t\t);\n\t}\n\n  const handleParentChange = (parentValue: string, childOptions: IOption[]) => {\n    const childValues = childOptions.map((child) => child.value);\n\n    const isParentSelected = values.includes(parentValue);\n    const updatedValues = isParentSelected\n      ? values.filter((value) => value !== parentValue && !childValues.includes(value))\n      : [...values, parentValue, ...childValues];\n\n    onChange(updatedValues);\n  };\n\n\toptions.forEach((option) => {\n\t\titems.push(\n\t\t\t<MenuItem\n\t\t\t\tvalue={option.value}\n\t\t\t\tclassName={option?.isGroup ? 'select--MenuItemHeader' : ''}>\n\t\t\t\t<Box sx={{ display: 'flex', gap: 1 }}>\n\t\t\t\t\t{multiple && with_checkboxes && (\n\t\t\t\t\t\t// <Checkbox checked={values?.indexOf((option.value)) > -1} />\n            <Checkbox checked={values?.indexOf((option.value)) > -1}\n            onChange={() => handleParentChange(option.value, option.options || [])}\n          />\n\t\t\t\t\t)}\n\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t{option.text}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t</MenuItem>\n\t\t);\n\t\tif (option?.isGroup && Array.isArray(option?.options)) {\n\t\t\toption.options.forEach((opt) => {\n\t\t\t\titems.push(\n\t\t\t\t\t<MenuItem value={opt.value} sx={{ pl: 5 }}>\n\t\t\t\t\t\t<Box sx={{ display: 'flex', gap: 1 }}>\n\t\t\t\t\t\t\t{multiple && with_checkboxes && (\n\t\t\t\t\t\t\t\t<Checkbox checked={values?.indexOf(opt.value) > -1} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{opt.text}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t});\n\n\treturn items;\n};\n\nconst ControllerSelect: React.FC<IControllerSelect> = ({\n  name,\n  fieldArrayName,\n  options,\n  label,\n  placeholder,\n  formControl,\n  position,\n  required,\n  size = \"small\",\n  multiple,\n  disabled,\n  searchPlaceholder,\n  handleSearch,\n  classes,\n  with_checkboxes,\n  onChipRemove,\n}) => {\n  return (\n    <Controller\n      control={formControl}\n      name={`${fieldArrayName}.${name}`}\n      render={({ field, fieldState: { error } }) => (\n        <>\n          <Select\n            fullWidth\n            name={name}\n            dataPosition={position}\n            dataName={`${fieldArrayName}.${name}`}\n            placeholder={placeholder}\n            label={label}\n            value={field.value || (multiple ? [] : \"\")}\n            defaultValue=\"\"\n            onChange={(e:any)=>(multiple&&e.target?.value.filter((i:any)=>i)?.length>0||!multiple&&(e.target?.value))?field.onChange(e.target.value):field.onChange(\"\")}\n            required={Boolean(required)}\n            size={size}\n            multiple={Boolean(multiple)}\n            disabled={Boolean(disabled)}\n            searchPlaceholder={searchPlaceholder}\n            handleSearch={handleSearch}\n            className={classes}\n            variant=\"outlined\"\n            error={Boolean(error)}\n            renderValue={(selected: string | string[]) => (\n              <>\n                {Array.isArray(selected) ? (\n                  <ChipOrPlaceholder\n                    data={selected}\n                    placeholder={placeholder}\n                    onDelete={onChipRemove}\n                  />\n                ) : (\n                  selected || placeholder\n                )}\n              </>\n            )}\n          >\n            {generateMenuItems({\n              options,\n              multiple: Boolean(multiple),\n              placeholder: placeholder,\n              values: field.value,\n              with_checkboxes: Boolean(with_checkboxes),\n              onChange: field.onChange\n            })}\n          </Select>\n          {error &&\n            <FormHelperText error>{error.message}</FormHelperText>\n          }\n          {multiple && Array.isArray(field?.value) && (\n            <SelectedItems data={field.value} options={options} />\n          )}\n        </>\n      )}\n    />\n  );\n};\n\nexport default ControllerSelect;\n"],"names":["SelectedItems","data","options","displayTitle","map","selectedItem","_a","find","option","value","text","jsxs","Typography","type","color","sx","display","gap","alignItems","mt","children","slice","join","length","jsx","Chip","variant","label","MoreIcon","generateMenuItems","multiple","placeholder","with_checkboxes","onChange","values","items","push","MenuItem","disabled","forEach","className","isGroup","Box","Checkbox","checked","indexOf","parentValue","childOptions","childValues","child","updatedValues","includes","filter","handleParentChange","Array","isArray","opt","pl","name","fieldArrayName","formControl","position","required","size","searchPlaceholder","handleSearch","classes","onChipRemove","Controller","control","render","field","fieldState","error","Fragment","Select","fullWidth","dataPosition","dataName","defaultValue","e","_b","target","i","_c","Boolean","renderValue","selected","ChipOrPlaceholder","onDelete","FormHelperText","message"],"mappings":"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"}

package/dist/components/tab-bar-ui/tab-bar-ui/index.esm.js

@@ -9,15 +9,8 @@ import TabContext from "../../../node_modules/@mui/lab/TabContext/TabContext/ind
 import TabList from "../../../node_modules/@mui/lab/TabList/TabList/index.esm.js";
 import Tab from "../../../node_modules/@mui/material/Tab/Tab/index.esm.js";
 import TabPanel from "../../../node_modules/@mui/lab/TabPanel/TabPanel/index.esm.js";
-function TabBarUi(props) {
-  const {
-    tabs,
-    onEditTabTitle,
-    activeTabValue,
-    setActiveTabValue,
-    handleTabChange,
-    handleRemoveTab
-  } = props;
+const TabBarUi = (props) => {
+  const { tabs, onEditTabTitle, activeTabValue, setActiveTabValue, handleTabChange, handleRemoveTab } = props;
   const [value, setValue] = useState(0);
   const [editableTabId, setEditableTabId] = useState(null);
   const handleChange = (event, newValue) => {
@@ -78,8 +71,9 @@ function TabBarUi(props) {
       (tab, index) => tab.content && /* @__PURE__ */ jsx(TabPanel, { value: index, children: value === index && tab.content }, tab.tab_order)
     )
   ] }) });
-}
+};
 export {
+  TabBarUi,
   TabBarUi as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/tab-bar-ui/tab-bar-ui/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/tab-bar-ui/tab-bar-ui.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\n\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tab-bar-ui.scss\";\nimport TextField from \"../text-field/text-field\";\nimport images from \"../../assets/images\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n  tabIcon?: string;\n}\ninterface TabProps {\n  tabs: TabItem[];\n  activeTabValue?: number;\n  setActiveTabValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n}\n\nexport default function TabBarUi(props: TabProps) {\n  const {\n    tabs,\n    onEditTabTitle,\n    activeTabValue,\n    setActiveTabValue,\n    handleTabChange,\n    handleRemoveTab,\n  } = props;\n  const [value, setValue] = useState(0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  const handleChange = (event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveTabValue && setActiveTabValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  useEffect(() => {\n    if (setActiveTabValue && Boolean(tabs?.length)) setActiveTabValue(value);\n    // eslint-disable-next-line\n  }, [tabs]);\n\n  return (\n    <Box>\n      <TabContext value={activeTabValue ?? value}>\n        <Box>\n          <TabList\n            className=\"account-payble-tabsui-wrap\"\n            onChange={handleChange}\n          >\n            {tabs.map((tab: TabItem) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n                label={\n                  onEditTabTitle && editableTabId === tab.tab_order ? (\n                    <TextField\n                      value={tab.title}\n                      autoFocus\n                      onBlur={() => setEditableTabId(null)}\n                      onChange={(e: any) =>\n                        handleEditTabTitle(e, tab.tab_order)\n                      }\n                    />\n                  ) : handleRemoveTab ? (\n                    <div className=\"Tabs--Title\">\n                      <div>{tab.title}</div>\n                      {!tab.remove_tab && (\n                        <CloseIcon\n                          style={{ fontSize: \"15px\", cursor: \"pointer\" }}\n                          onClick={() => {\n                            handleRemoveTab(tab.tab_order);\n                          }}\n                        />\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-display\">\n                      <img src={images.common[tab.tabIcon]} />\n                      {tab.title}\n                    </div>\n                  )\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;AA8BA,SAAwB,SAAS,OAAiB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,eAAe,CAAC,OAA6B,aAAqB;AACtE,aAAS,QAAQ;AACjB,yBAAqB,kBAAkB,QAAQ;AAC/C,uBAAmB,gBAAA;AAAA,EACrB;AAEA,QAAM,uBAAuB,CAAC,UAAkB;AAC9C,qBAAiB,KAAK;AAAA,EACxB;AAEA,QAAM,qBAAqB,CACzB,OACA,UACG;AACH,sBAAkB,eAAe,OAAO,MAAM,OAAO,KAAK;AAAA,EAC5D;AAEA,YAAU,MAAM;AACd,QAAI,qBAAqB,QAAQ,6BAAM,MAAM,qBAAqB,KAAK;AAAA,EAEzE,GAAG,CAAC,IAAI,CAAC;AAET,6BACG,KAAA,EACC,UAAA,qBAAC,YAAA,EAAW,OAAO,kBAAkB,OACnC,UAAA;AAAA,IAAA,oBAAC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU;AAAA,QAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YAEV,OACE,kBAAkB,kBAAkB,IAAI,YACtC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,IAAI;AAAA,gBACX,WAAS;AAAA,gBACT,QAAQ,MAAM,iBAAiB,IAAI;AAAA,gBACnC,UAAU,CAAC,MACT,mBAAmB,GAAG,IAAI,SAAS;AAAA,cAAA;AAAA,YAAA,IAGrC,kBACF,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,cAAA,oBAAC,OAAA,EAAK,cAAI,MAAA,CAAM;AAAA,cACf,CAAC,IAAI,cACJ;AAAA,gBAACA;AAAAA,gBAAA;AAAA,kBACC,OAAO,EAAE,UAAU,QAAQ,QAAQ,UAAA;AAAA,kBACnC,SAAS,MAAM;AACb,oCAAgB,IAAI,SAAS;AAAA,kBAC/B;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EAAA,CAEJ,IAEA,qBAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,cAAA,oBAAC,SAAI,KAAK,OAAO,OAAO,IAAI,OAAO,GAAG;AAAA,cACrC,IAAI;AAAA,YAAA,GACP;AAAA,YAGJ,SAAO;AAAA,YACP,eAAe,MAAM,qBAAqB,IAAI,SAAS;AAAA,UAAA;AAAA,UA/BlD,IAAI;AAAA,QAAA,CAiCZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACC,KAAK;AAAA,MACJ,CAAC,KAAc,UACb,IAAI,WACF,oBAAC,UAAA,EAAS,OAAO,OACd,UAAA,UAAU,SAAS,IAAI,QAAA,GADG,IAAI,SAEjC;AAAA,IAAA;AAAA,EAEN,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/tab-bar-ui/tab-bar-ui.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\n\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tab-bar-ui.scss\";\nimport TextField from \"../text-field/text-field\";\nimport images from \"../../assets/images\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n  tabIcon?: string;\n}\nexport interface ITabProps {\n  tabs: TabItem[];\n  activeTabValue?: number;\n  setActiveTabValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n}\n\nexport const TabBarUi = (props: TabProps) => {\n  const { tabs, onEditTabTitle, activeTabValue, setActiveTabValue, handleTabChange, handleRemoveTab } = props;\n  const [value, setValue] = useState(0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  const handleChange = (event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveTabValue && setActiveTabValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  useEffect(() => {\n    if (setActiveTabValue && Boolean(tabs?.length)) setActiveTabValue(value);\n    // eslint-disable-next-line\n  }, [tabs]);\n\n  return (\n    <Box>\n      <TabContext value={activeTabValue ?? value}>\n        <Box>\n          <TabList\n            className=\"account-payble-tabsui-wrap\"\n            onChange={handleChange}\n          >\n            {tabs.map((tab: TabItem) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n                label={\n                  onEditTabTitle && editableTabId === tab.tab_order ? (\n                    <TextField\n                      value={tab.title}\n                      autoFocus\n                      onBlur={() => setEditableTabId(null)}\n                      onChange={(e: any) =>\n                        handleEditTabTitle(e, tab.tab_order)\n                      }\n                    />\n                  ) : handleRemoveTab ? (\n                    <div className=\"Tabs--Title\">\n                      <div>{tab.title}</div>\n                      {!tab.remove_tab && (\n                        <CloseIcon\n                          style={{ fontSize: \"15px\", cursor: \"pointer\" }}\n                          onClick={() => {\n                            handleRemoveTab(tab.tab_order);\n                          }}\n                        />\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-display\">\n                      <img src={images.common[tab.tabIcon]} />\n                      {tab.title}\n                    </div>\n                  )\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n};\n\nexport default TabBarUi;\n"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;AA8BO,MAAM,WAAW,CAAC,UAAoB;AAC3C,QAAM,EAAE,MAAM,gBAAgB,gBAAgB,mBAAmB,iBAAiB,oBAAoB;AACtG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,eAAe,CAAC,OAA6B,aAAqB;AACtE,aAAS,QAAQ;AACjB,yBAAqB,kBAAkB,QAAQ;AAC/C,uBAAmB,gBAAA;AAAA,EACrB;AAEA,QAAM,uBAAuB,CAAC,UAAkB;AAC9C,qBAAiB,KAAK;AAAA,EACxB;AAEA,QAAM,qBAAqB,CACzB,OACA,UACG;AACH,sBAAkB,eAAe,OAAO,MAAM,OAAO,KAAK;AAAA,EAC5D;AAEA,YAAU,MAAM;AACd,QAAI,qBAAqB,QAAQ,6BAAM,MAAM,qBAAqB,KAAK;AAAA,EAEzE,GAAG,CAAC,IAAI,CAAC;AAET,6BACG,KAAA,EACC,UAAA,qBAAC,YAAA,EAAW,OAAO,kBAAkB,OACnC,UAAA;AAAA,IAAA,oBAAC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU;AAAA,QAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YAEV,OACE,kBAAkB,kBAAkB,IAAI,YACtC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,IAAI;AAAA,gBACX,WAAS;AAAA,gBACT,QAAQ,MAAM,iBAAiB,IAAI;AAAA,gBACnC,UAAU,CAAC,MACT,mBAAmB,GAAG,IAAI,SAAS;AAAA,cAAA;AAAA,YAAA,IAGrC,kBACF,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,cAAA,oBAAC,OAAA,EAAK,cAAI,MAAA,CAAM;AAAA,cACf,CAAC,IAAI,cACJ;AAAA,gBAACA;AAAAA,gBAAA;AAAA,kBACC,OAAO,EAAE,UAAU,QAAQ,QAAQ,UAAA;AAAA,kBACnC,SAAS,MAAM;AACb,oCAAgB,IAAI,SAAS;AAAA,kBAC/B;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EAAA,CAEJ,IAEA,qBAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,cAAA,oBAAC,SAAI,KAAK,OAAO,OAAO,IAAI,OAAO,GAAG;AAAA,cACrC,IAAI;AAAA,YAAA,GACP;AAAA,YAGJ,SAAO;AAAA,YACP,eAAe,MAAM,qBAAqB,IAAI,SAAS;AAAA,UAAA;AAAA,UA/BlD,IAAI;AAAA,QAAA,CAiCZ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACC,KAAK;AAAA,MACJ,CAAC,KAAc,UACb,IAAI,WACF,oBAAC,UAAA,EAAS,OAAO,OACd,UAAA,UAAU,SAAS,IAAI,QAAA,GADG,IAAI,SAEjC;AAAA,IAAA;AAAA,EAEN,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/tab-bar-ui/tab-bar-ui/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=;/* empty css                                                     */;/* empty css                        */var r=,/* empty css                                 */i=,/* empty css                     */l=,/* empty css                                                 */s=,/* empty css                                                          */n=,/* empty css                                                    */u=,/* empty css                                                 */d=;/* empty css                                                      */exports.default=function(o){const{tabs:c,onEditTabTitle:b,activeTabValue:x,setActiveTabValue:m,handleTabChange:j,handleRemoveTab:v}=o,[T,f]=a.useState(0),[_,h]=a.useState(null);return a.useEffect(()=>{m&&Boolean(null==c?void 0:c.length)&&m(T)},[c]),/* @__PURE__ */e.jsx(l.default,{children:/* @__PURE__ */e.jsxs(s.default,{value:x??T,children:[
-/* @__PURE__ */e.jsx(l.default,{children:/* @__PURE__ */e.jsx(n.default,{className:"account-payble-tabsui-wrap",onChange:(e,a)=>{f(a),m&&m(a),j&&j()},children:c.map(a=>/* @__PURE__ */e.jsx(u.default,{className:"account-payble-tab-items",label:b&&_===a.tab_order?/* @__PURE__ */e.jsx(r.TextField,{value:a.title,autoFocus:!0,onBlur:()=>h(null),onChange:e=>{return t=e,r=a.tab_order,void(b&&b(r,t.target.value));var t,r}}):v?/* @__PURE__ */e.jsxs("div",{className:"Tabs--Title",children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=;/* empty css                                                     */;/* empty css                        */var r=,/* empty css                                 */i=,/* empty css                     */l=,/* empty css                                                 */s=,/* empty css                                                          */n=,/* empty css                                                    */d=,/* empty css                                                 */u=;/* empty css                                                      */const o=o=>{const{tabs:b,onEditTabTitle:c,activeTabValue:x,setActiveTabValue:m,handleTabChange:j,handleRemoveTab:v}=o,[T,_]=a.useState(0),[f,h]=a.useState(null);return a.useEffect(()=>{m&&Boolean(null==b?void 0:b.length)&&m(T)},[b]),/* @__PURE__ */e.jsx(l.default,{children:/* @__PURE__ */e.jsxs(s.default,{value:x??T,children:[
+/* @__PURE__ */e.jsx(l.default,{children:/* @__PURE__ */e.jsx(n.default,{className:"account-payble-tabsui-wrap",onChange:(e,a)=>{_(a),m&&m(a),j&&j()},children:b.map(a=>/* @__PURE__ */e.jsx(d.default,{className:"account-payble-tab-items",label:c&&f===a.tab_order?/* @__PURE__ */e.jsx(r.TextField,{value:a.title,autoFocus:!0,onBlur:()=>h(null),onChange:e=>{return t=e,r=a.tab_order,void(c&&c(r,t.target.value));var t,r}}):v?/* @__PURE__ */e.jsxs("div",{className:"Tabs--Title",children:[
 /* @__PURE__ */e.jsx("div",{children:a.title}),!a.remove_tab&&/* @__PURE__ */e.jsx(t.default,{style:{fontSize:"15px",cursor:"pointer"},onClick:()=>{v(a.tab_order)}})]}):/* @__PURE__ */e.jsxs("div",{className:"text-display",children:[
-/* @__PURE__ */e.jsx("img",{src:i.images.common[a.tabIcon]}),a.title]}),wrapped:!0,onDoubleClick:()=>{return e=a.tab_order,void h(e);var e}},a.tab_order))})}),c.map((a,t)=>a.content&&/* @__PURE__ */e.jsx(d.default,{value:t,children:T===t&&a.content},a.tab_order))]})})};
+/* @__PURE__ */e.jsx("img",{src:i.images.common[a.tabIcon]}),a.title]}),wrapped:!0,onDoubleClick:()=>{return e=a.tab_order,void h(e);var e}},a.tab_order))})}),b.map((a,t)=>a.content&&/* @__PURE__ */e.jsx(u.default,{value:t,children:T===t&&a.content},a.tab_order))]})})};exports.TabBarUi=o,exports.default=o;
 //# sourceMappingURL=index.js.map

package/dist/components/tab-bar-ui/tab-bar-ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/tab-bar-ui/tab-bar-ui.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\n\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tab-bar-ui.scss\";\nimport TextField from \"../text-field/text-field\";\nimport images from \"../../assets/images\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n  tabIcon?: string;\n}\ninterface TabProps {\n  tabs: TabItem[];\n  activeTabValue?: number;\n  setActiveTabValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n}\n\nexport default function TabBarUi(props: TabProps) {\n  const {\n    tabs,\n    onEditTabTitle,\n    activeTabValue,\n    setActiveTabValue,\n    handleTabChange,\n    handleRemoveTab,\n  } = props;\n  const [value, setValue] = useState(0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  const handleChange = (event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveTabValue && setActiveTabValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  useEffect(() => {\n    if (setActiveTabValue && Boolean(tabs?.length)) setActiveTabValue(value);\n    // eslint-disable-next-line\n  }, [tabs]);\n\n  return (\n    <Box>\n      <TabContext value={activeTabValue ?? value}>\n        <Box>\n          <TabList\n            className=\"account-payble-tabsui-wrap\"\n            onChange={handleChange}\n          >\n            {tabs.map((tab: TabItem) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n                label={\n                  onEditTabTitle && editableTabId === tab.tab_order ? (\n                    <TextField\n                      value={tab.title}\n                      autoFocus\n                      onBlur={() => setEditableTabId(null)}\n                      onChange={(e: any) =>\n                        handleEditTabTitle(e, tab.tab_order)\n                      }\n                    />\n                  ) : handleRemoveTab ? (\n                    <div className=\"Tabs--Title\">\n                      <div>{tab.title}</div>\n                      {!tab.remove_tab && (\n                        <CloseIcon\n                          style={{ fontSize: \"15px\", cursor: \"pointer\" }}\n                          onClick={() => {\n                            handleRemoveTab(tab.tab_order);\n                          }}\n                        />\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-display\">\n                      <img src={images.common[tab.tabIcon]} />\n                      {tab.title}\n                    </div>\n                  )\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n"],"names":["props","tabs","onEditTabTitle","activeTabValue","setActiveTabValue","handleTabChange","handleRemoveTab","value","setValue","useState","editableTabId","setEditableTabId","useEffect","Boolean","length","Box","children","jsxs","TabContext","jsx","TabList","className","onChange","event","newValue","map","tab","Tab","label","tab_order","TextField","title","autoFocus","onBlur","e","handleEditTabTitle","tabId","target","remove_tab","CloseIcon","style","fontSize","cursor","onClick","src","images","common","tabIcon","wrapped","onDoubleClick","handleTabDoubleClick","index","content","TabPanel"],"mappings":"8qBA8BA,SAAiCA,GAC/B,MAAMC,KACJA,EAAAC,eACAA,EAAAC,eACAA,EAAAC,kBACAA,EAAAC,gBACAA,EAAAC,gBACAA,GACEN,GACGO,EAAOC,GAAYC,EAAAA,SAAS,IAC5BC,EAAeC,GAAoBF,EAAAA,SAAwB,MAuBlE,OALAG,EAAAA,UAAU,KACJR,GAAqBS,QAAQ,MAAAZ,OAAA,EAAAA,EAAMa,WAA2BP,IAEjE,CAACN,yBAGDc,EAAAA,QAAA,CACCC,wBAAAC,EAAAA,KAACC,UAAA,CAAWX,MAAOJ,GAAkBI,EACnCS,SAAA;qBAACD,EAAAA,QAAA,CACCC,wBAAAG,EAAAA,IAACC,EAAAA,QAAA,CACCC,UAAU,6BACVC,SA5BW,CAACC,EAA6BC,KACjDhB,EAASgB,GACTpB,GAAqBA,EAAkBoB,GACvCnB,GAAmBA,KA2BVW,SAAAf,EAAKwB,IAAKC,kBACTP,EAAAA,IAACQ,EAAAA,QAAA,CACCN,UAAU,2BAEVO,MACE1B,GAAkBQ,IAAkBgB,EAAIG,yBACtCV,EAAAA,IAACW,EAAAA,UAAA,CACCvB,MAAOmB,EAAIK,MACXC,WAAS,EACTC,OAAQ,IAAMtB,EAAiB,MAC/BW,SAAWY,IACTC,OA9BpBZ,EA8BuCW,EA7BvCE,EA6B0CV,EAAIG,eA3B9C3B,GAAkBA,EAAekC,EAAOb,EAAMc,OAAO9B,QAJ5B,IACzBgB,EACAa,KAgCkB9B,iBACFW,EAAAA,KAAC,MAAA,CAAII,UAAU,cACbL,SAAA;iBAAAG,IAAC,MAAA,CAAKH,WAAIe,SACRL,EAAIY,2BACJnB,EAAAA,IAACoB,EAAAA,QAAA,CACCC,MAAO,CAAEC,SAAU,OAAQC,OAAQ,WACnCC,QAAS,KACPrC,EAAgBoB,EAAIG,gCAM5BZ,EAAAA,KAAC,MAAA,CAAII,UAAU,eACbL,SAAA;eAAAG,MAAC,OAAIyB,IAAKC,EAAAA,OAAOC,OAAOpB,EAAIqB,WAC3BrB,EAAIK,SAIXiB,SAAO,EACPC,cAAe,KAAMC,OA1DLd,EA0D0BV,EAAIG,eAzD1DlB,EAAiByB,GADU,IAACA,IA2BXV,EAAIG,gBAoChB5B,EAAKwB,IACJ,CAACC,EAAcyB,IACbzB,EAAI0B,wBACFjC,EAAAA,IAACkC,EAAAA,QAAA,CAAS9C,MAAO4C,EACdnC,SAAAT,IAAU4C,GAASzB,EAAI0B,SADG1B,EAAIG,gBAQ/C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/tab-bar-ui/tab-bar-ui.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\n\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tab-bar-ui.scss\";\nimport TextField from \"../text-field/text-field\";\nimport images from \"../../assets/images\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n  tabIcon?: string;\n}\nexport interface ITabProps {\n  tabs: TabItem[];\n  activeTabValue?: number;\n  setActiveTabValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n}\n\nexport const TabBarUi = (props: TabProps) => {\n  const { tabs, onEditTabTitle, activeTabValue, setActiveTabValue, handleTabChange, handleRemoveTab } = props;\n  const [value, setValue] = useState(0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  const handleChange = (event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveTabValue && setActiveTabValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  useEffect(() => {\n    if (setActiveTabValue && Boolean(tabs?.length)) setActiveTabValue(value);\n    // eslint-disable-next-line\n  }, [tabs]);\n\n  return (\n    <Box>\n      <TabContext value={activeTabValue ?? value}>\n        <Box>\n          <TabList\n            className=\"account-payble-tabsui-wrap\"\n            onChange={handleChange}\n          >\n            {tabs.map((tab: TabItem) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n                label={\n                  onEditTabTitle && editableTabId === tab.tab_order ? (\n                    <TextField\n                      value={tab.title}\n                      autoFocus\n                      onBlur={() => setEditableTabId(null)}\n                      onChange={(e: any) =>\n                        handleEditTabTitle(e, tab.tab_order)\n                      }\n                    />\n                  ) : handleRemoveTab ? (\n                    <div className=\"Tabs--Title\">\n                      <div>{tab.title}</div>\n                      {!tab.remove_tab && (\n                        <CloseIcon\n                          style={{ fontSize: \"15px\", cursor: \"pointer\" }}\n                          onClick={() => {\n                            handleRemoveTab(tab.tab_order);\n                          }}\n                        />\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-display\">\n                      <img src={images.common[tab.tabIcon]} />\n                      {tab.title}\n                    </div>\n                  )\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n};\n\nexport default TabBarUi;\n"],"names":["TabBarUi","props","tabs","onEditTabTitle","activeTabValue","setActiveTabValue","handleTabChange","handleRemoveTab","value","setValue","useState","editableTabId","setEditableTabId","useEffect","Boolean","length","Box","children","jsxs","TabContext","jsx","TabList","className","onChange","event","newValue","map","tab","Tab","label","tab_order","TextField","title","autoFocus","onBlur","e","handleEditTabTitle","tabId","target","remove_tab","CloseIcon","style","fontSize","cursor","onClick","src","images","common","tabIcon","wrapped","onDoubleClick","handleTabDoubleClick","index","content","TabPanel"],"mappings":"8pBA8BO,MAAMA,EAAYC,IACvB,MAAMC,KAAEA,EAAAC,eAAMA,EAAAC,eAAgBA,oBAAgBC,EAAAC,gBAAmBA,EAAAC,gBAAiBA,GAAoBN,GAC/FO,EAAOC,GAAYC,EAAAA,SAAS,IAC5BC,EAAeC,GAAoBF,EAAAA,SAAwB,MAuBlE,OALAG,EAAAA,UAAU,KACJR,GAAqBS,QAAQ,MAAAZ,OAAA,EAAAA,EAAMa,WAA2BP,IAEjE,CAACN,yBAGDc,EAAAA,QAAA,CACCC,wBAAAC,EAAAA,KAACC,UAAA,CAAWX,MAAOJ,GAAkBI,EACnCS,SAAA;qBAACD,EAAAA,QAAA,CACCC,wBAAAG,EAAAA,IAACC,EAAAA,QAAA,CACCC,UAAU,6BACVC,SA5BW,CAACC,EAA6BC,KACjDhB,EAASgB,GACTpB,GAAqBA,EAAkBoB,GACvCnB,GAAmBA,KA2BVW,SAAAf,EAAKwB,IAAKC,kBACTP,EAAAA,IAACQ,EAAAA,QAAA,CACCN,UAAU,2BAEVO,MACE1B,GAAkBQ,IAAkBgB,EAAIG,yBACtCV,EAAAA,IAACW,EAAAA,UAAA,CACCvB,MAAOmB,EAAIK,MACXC,WAAS,EACTC,OAAQ,IAAMtB,EAAiB,MAC/BW,SAAWY,IACTC,OA9BpBZ,EA8BuCW,EA7BvCE,EA6B0CV,EAAIG,eA3B9C3B,GAAkBA,EAAekC,EAAOb,EAAMc,OAAO9B,QAJ5B,IACzBgB,EACAa,KAgCkB9B,iBACFW,EAAAA,KAAC,MAAA,CAAII,UAAU,cACbL,SAAA;iBAAAG,IAAC,MAAA,CAAKH,WAAIe,SACRL,EAAIY,2BACJnB,EAAAA,IAACoB,EAAAA,QAAA,CACCC,MAAO,CAAEC,SAAU,OAAQC,OAAQ,WACnCC,QAAS,KACPrC,EAAgBoB,EAAIG,gCAM5BZ,EAAAA,KAAC,MAAA,CAAII,UAAU,eACbL,SAAA;eAAAG,MAAC,OAAIyB,IAAKC,EAAAA,OAAOC,OAAOpB,EAAIqB,WAC3BrB,EAAIK,SAIXiB,SAAO,EACPC,cAAe,KAAMC,OA1DLd,EA0D0BV,EAAIG,eAzD1DlB,EAAiByB,GADU,IAACA,IA2BXV,EAAIG,gBAoChB5B,EAAKwB,IACJ,CAACC,EAAcyB,IACbzB,EAAI0B,wBACFjC,EAAAA,IAACkC,EAAAA,QAAA,CAAS9C,MAAO4C,EACdnC,SAAAT,IAAU4C,GAASzB,EAAI0B,SADG1B,EAAIG"}

package/dist/components/tab-bar-ui/tab-bar-ui.d.ts

@@ -8,7 +8,7 @@ interface TabItem {
     remove_tab?: boolean;
     tabIcon?: string;
 }
-interface TabProps {
+export interface ITabProps {
     tabs: TabItem[];
     activeTabValue?: number;
     setActiveTabValue?: React.Dispatch<React.SetStateAction<number | undefined>>;
@@ -16,5 +16,5 @@ interface TabProps {
     handleTabChange?: () => void;
     handleRemoveTab?: (tabId: number) => void;
 }
-export default function TabBarUi(props: TabProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const TabBarUi: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+export default TabBarUi;

package/dist/components/tabs/tabs/index.esm.js

@@ -11,7 +11,7 @@ import TabList from "../../../node_modules/@mui/lab/TabList/TabList/index.esm.js
 import Tab from "../../../node_modules/@mui/material/Tab/Tab/index.esm.js";
 import IconButton from "../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
 import TabPanel from "../../../node_modules/@mui/lab/TabPanel/TabPanel/index.esm.js";
-function TabBar(props) {
+const TabBar = (props) => {
   const { t } = useTranslation();
   const {
     tabs,
@@ -68,8 +68,9 @@ function TabBar(props) {
       (tab, index) => tab.content && /* @__PURE__ */ jsx(TabPanel, { value: index.toString(), children: value === index && tab.content }, tab.tab_order)
     )
   ] }) });
-}
+};
 export {
+  TabBar,
   TabBar as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/tabs/tabs/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tabs.scss\";\nimport TextField from \"../text-field/text-field\";\nimport { useTranslation } from \"react-i18next\";\nimport Typography from \"../typography/typography\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n}\nexport interface TabProps {\n  tabs: TabItem[];\n  activeValue?: number;\n  setActiveValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n  isFormTabValid?: boolean ;\n  isTabViewOnly?: boolean;\n  activeTabs?: any[] ;\n  setActiveTabs?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  containerProps?: any;\n}\n\nexport default function TabBar(props: TabProps) {\n  const { t } = useTranslation();\n  const {\n    tabs,\n    onEditTabTitle,\n    activeValue,\n    setActiveValue,\n    handleTabChange,\n    handleRemoveTab,\n    // isFormTabValid ,  \n    isTabViewOnly,\n    activeTabs, \n    containerProps\n  } = props; \n  \n  const [value, setValue] = useState<number>(activeValue || 0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  useEffect(()=>{\n    activeValue && setValue(activeValue);\n\t} , [activeValue])\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveValue && setActiveValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  // useEffect(() => {\n  //   if (setActiveValue && Boolean(tabs?.length)) setActiveValue(value);\n  //   // eslint-disable-next-line\n  // }, [tabs]);\n\n  return (\n    <Box mb={2} {...containerProps}>\n      <TabContext value={activeValue ?? value }>\n        <Box>\n          <TabList className=\"account-payble-tabs-wrap\" onChange={handleChange} variant=\"scrollable\" scrollButtons=\"auto\" aria-label=\"scrollable tabs\" sx={{ overflowX: 'auto', maxWidth: '100%' }}>\n            {tabs.map((tab: TabItem, index: any) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n              \n                label={\n                  <Box display='flex' alignItems='center'>\n                    {\n                        onEditTabTitle && editableTabId === tab.tab_order ? (\n                          <TextField\n                            value={tab.title}\n                            autoFocus\n                            onBlur={() => setEditableTabId(null)}\n                            onChange={(e: any) =>\n                              handleEditTabTitle(e, tab.tab_order)\n                            }\n                          />\n                        ) : handleRemoveTab ? (\n                          <div className=\"Tabs--Title\">\n                            <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                            {!tab.remove_tab && (\n                              <IconButton size=\"small\" onClick={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                                handleRemoveTab(tab.tab_order);\n                              }}>\n                                <CloseIcon style={{ fontSize: \"15px\", cursor: \"pointer\" }}/>\n                              </IconButton>\n                            )}\n                          </div>\n                        ) : (\n                          <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                        )\n                    }\n                  </Box>\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index.toString()} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;;;AAoCA,SAAwB,OAAO,OAAiB;AAC9C,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAIA;AAAA,EAAA,IACE;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,eAAe,CAAC;AAC3D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,YAAU,MAAI;AACZ,mBAAe,SAAS,WAAW;AAAA,EACtC,GAAI,CAAC,WAAW,CAAC;AAEhB,QAAM,eAAe,CAAC,QAA8B,aAAqB;AACvE,aAAS,QAAQ;AACjB,sBAAkB,eAAe,QAAQ;AACzC,uBAAmB,gBAAA;AAAA,EACrB;AAEA,QAAM,uBAAuB,CAAC,UAAkB;AAC9C,qBAAiB,KAAK;AAAA,EACxB;AAEA,QAAM,qBAAqB,CACzB,OACA,UACG;AACH,sBAAkB,eAAe,OAAO,MAAM,OAAO,KAAK;AAAA,EAC5D;AAOA,SACE,oBAAC,KAAA,EAAI,IAAI,GAAI,GAAG,gBACd,UAAA,qBAAC,YAAA,EAAW,OAAO,eAAe,OAChC,UAAA;AAAA,IAAA,oBAAC,KAAA,EACC,UAAA,oBAAC,SAAA,EAAQ,WAAU,4BAA2B,UAAU,cAAc,SAAQ,cAAa,eAAc,QAAO,cAAW,mBAAkB,IAAI,EAAE,WAAW,QAAQ,UAAU,UAC7K,UAAA,KAAK,IAAI,CAAC,KAAc,UACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QAGV,OACE,oBAAC,KAAA,EAAI,SAAQ,QAAO,YAAW,UAEzB,UAAA,kBAAkB,kBAAkB,IAAI,YACtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,IAAI;AAAA,YACX,WAAS;AAAA,YACT,QAAQ,MAAM,iBAAiB,IAAI;AAAA,YACnC,UAAU,CAAC,MACT,mBAAmB,GAAG,IAAI,SAAS;AAAA,UAAA;AAAA,QAAA,IAGrC,kBACF,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,OAAM,wBAAuB,MAAK,MAAM,UAAA,EAAE,IAAI,KAAK,EAAA,CAAE;AAAA,UAChE,CAAC,IAAI,cACJ,oBAAC,cAAW,MAAK,SAAQ,SAAS,CAAC,MAAM;AACvC,cAAE,eAAA;AACF,cAAE,gBAAA;AACF,4BAAgB,IAAI,SAAS;AAAA,UAC/B,GACE,UAAA,oBAACA,WAAA,EAAU,OAAO,EAAE,UAAU,QAAQ,QAAQ,UAAA,EAAU,CAAE,EAAA,CAC5D;AAAA,QAAA,EAAA,CAEJ,IAEA,oBAAC,YAAA,EAAW,OAAM,wBAAuB,MAAK,MAAM,UAAA,EAAE,IAAI,KAAK,EAAA,CAAE,EAAA,CAGzE;AAAA,QAEF,SAAO;AAAA,QACP,eAAe,MAAM,qBAAqB,IAAI,SAAS;AAAA,MAAA;AAAA,MAlClD,IAAI;AAAA,IAAA,CAoCZ,GACH,EAAA,CACF;AAAA,IACC,KAAK;AAAA,MACJ,CAAC,KAAc,UACb,IAAI,+BACD,UAAA,EAAS,OAAO,MAAM,SAAA,GACpB,UAAA,UAAU,SAAS,IAAI,QAAA,GADc,IAAI,SAE5C;AAAA,IAAA;AAAA,EAEN,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tabs.scss\";\nimport TextField from \"../text-field/text-field\";\nimport { useTranslation } from \"react-i18next\";\nimport Typography from \"../typography/typography\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n}\nexport interface TabProps {\n  tabs: TabItem[];\n  activeValue?: number;\n  setActiveValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n  isFormTabValid?: boolean ;\n  isTabViewOnly?: boolean;\n  activeTabs?: any[] ;\n  setActiveTabs?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  containerProps?: any;\n}\n\nexport const TabBar = (props: TabProps) => {\n  const { t } = useTranslation();\n  const {\n    tabs,\n    onEditTabTitle,\n    activeValue,\n    setActiveValue,\n    handleTabChange,\n    handleRemoveTab,\n    // isFormTabValid ,  \n    isTabViewOnly,\n    activeTabs, \n    containerProps\n  } = props; \n  \n  const [value, setValue] = useState<number>(activeValue || 0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  useEffect(()=>{\n    activeValue && setValue(activeValue);\n\t} , [activeValue])\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveValue && setActiveValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  // useEffect(() => {\n  //   if (setActiveValue && Boolean(tabs?.length)) setActiveValue(value);\n  //   // eslint-disable-next-line\n  // }, [tabs]);\n\n  return (\n    <Box mb={2} {...containerProps}>\n      <TabContext value={activeValue ?? value }>\n        <Box>\n          <TabList className=\"account-payble-tabs-wrap\" onChange={handleChange} variant=\"scrollable\" scrollButtons=\"auto\" aria-label=\"scrollable tabs\" sx={{ overflowX: 'auto', maxWidth: '100%' }}>\n            {tabs.map((tab: TabItem, index: any) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n              \n                label={\n                  <Box display='flex' alignItems='center'>\n                    {\n                        onEditTabTitle && editableTabId === tab.tab_order ? (\n                          <TextField\n                            value={tab.title}\n                            autoFocus\n                            onBlur={() => setEditableTabId(null)}\n                            onChange={(e: any) =>\n                              handleEditTabTitle(e, tab.tab_order)\n                            }\n                          />\n                        ) : handleRemoveTab ? (\n                          <div className=\"Tabs--Title\">\n                            <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                            {!tab.remove_tab && (\n                              <IconButton size=\"small\" onClick={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                                handleRemoveTab(tab.tab_order);\n                              }}>\n                                <CloseIcon style={{ fontSize: \"15px\", cursor: \"pointer\" }}/>\n                              </IconButton>\n                            )}\n                          </div>\n                        ) : (\n                          <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                        )\n                    }\n                  </Box>\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index.toString()} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n\nexport default TabBar;"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;;;AAoCO,MAAM,SAAS,CAAC,UAAoB;AACzC,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAIA;AAAA,EAAA,IACE;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,eAAe,CAAC;AAC3D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,YAAU,MAAI;AACZ,mBAAe,SAAS,WAAW;AAAA,EACtC,GAAI,CAAC,WAAW,CAAC;AAEhB,QAAM,eAAe,CAAC,QAA8B,aAAqB;AACvE,aAAS,QAAQ;AACjB,sBAAkB,eAAe,QAAQ;AACzC,uBAAmB,gBAAA;AAAA,EACrB;AAEA,QAAM,uBAAuB,CAAC,UAAkB;AAC9C,qBAAiB,KAAK;AAAA,EACxB;AAEA,QAAM,qBAAqB,CACzB,OACA,UACG;AACH,sBAAkB,eAAe,OAAO,MAAM,OAAO,KAAK;AAAA,EAC5D;AAOA,SACE,oBAAC,KAAA,EAAI,IAAI,GAAI,GAAG,gBACd,UAAA,qBAAC,YAAA,EAAW,OAAO,eAAe,OAChC,UAAA;AAAA,IAAA,oBAAC,KAAA,EACC,UAAA,oBAAC,SAAA,EAAQ,WAAU,4BAA2B,UAAU,cAAc,SAAQ,cAAa,eAAc,QAAO,cAAW,mBAAkB,IAAI,EAAE,WAAW,QAAQ,UAAU,UAC7K,UAAA,KAAK,IAAI,CAAC,KAAc,UACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QAGV,OACE,oBAAC,KAAA,EAAI,SAAQ,QAAO,YAAW,UAEzB,UAAA,kBAAkB,kBAAkB,IAAI,YACtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,IAAI;AAAA,YACX,WAAS;AAAA,YACT,QAAQ,MAAM,iBAAiB,IAAI;AAAA,YACnC,UAAU,CAAC,MACT,mBAAmB,GAAG,IAAI,SAAS;AAAA,UAAA;AAAA,QAAA,IAGrC,kBACF,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,OAAM,wBAAuB,MAAK,MAAM,UAAA,EAAE,IAAI,KAAK,EAAA,CAAE;AAAA,UAChE,CAAC,IAAI,cACJ,oBAAC,cAAW,MAAK,SAAQ,SAAS,CAAC,MAAM;AACvC,cAAE,eAAA;AACF,cAAE,gBAAA;AACF,4BAAgB,IAAI,SAAS;AAAA,UAC/B,GACE,UAAA,oBAACA,WAAA,EAAU,OAAO,EAAE,UAAU,QAAQ,QAAQ,UAAA,EAAU,CAAE,EAAA,CAC5D;AAAA,QAAA,EAAA,CAEJ,IAEA,oBAAC,YAAA,EAAW,OAAM,wBAAuB,MAAK,MAAM,UAAA,EAAE,IAAI,KAAK,EAAA,CAAE,EAAA,CAGzE;AAAA,QAEF,SAAO;AAAA,QACP,eAAe,MAAM,qBAAqB,IAAI,SAAS;AAAA,MAAA;AAAA,MAlClD,IAAI;AAAA,IAAA,CAoCZ,GACH,EAAA,CACF;AAAA,IACC,KAAK;AAAA,MACJ,CAAC,KAAc,UACb,IAAI,+BACD,UAAA,EAAS,OAAO,MAAM,SAAA,GACpB,UAAA,UAAU,SAAS,IAAI,QAAA,GADc,IAAI,SAE5C;AAAA,IAAA;AAAA,EAEN,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/tabs/tabs/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=;/* empty css                                                     */;/* empty css                  */var r=,/* empty css                                 */l=require("react-i18next"),s=,/* empty css                                 */i=,/* empty css                                                 */o=,/* empty css                                                          */n=,/* empty css                                                    */u=,/* empty css                                                 */d=,/* empty css                                                               */c=;/* empty css                                                      */exports.default=function(x){const{t:b}=l.useTranslation(),{tabs:m,onEditTabTitle:p,activeValue:j,setActiveValue:h,handleTabChange:f,handleRemoveTab:v,containerProps:T}=x,[y,_]=a.useState(j||0),[q,g]=a.useState(null);return a.useEffect(()=>{j&&_(j)},[j]),/* @__PURE__ */e.jsx(i.default,{mb:2,...T,children:/* @__PURE__ */e.jsxs(o.default,{value:j??y,children:[
-/* @__PURE__ */e.jsx(i.default,{children:/* @__PURE__ */e.jsx(n.default,{className:"account-payble-tabs-wrap",onChange:(e,a)=>{_(a),h&&h(a),f&&f()},variant:"scrollable",scrollButtons:"auto","aria-label":"scrollable tabs",sx:{overflowX:"auto",maxWidth:"100%"},children:m.map((a,l)=>/* @__PURE__ */e.jsx(u.default,{className:"account-payble-tab-items",label:/* @__PURE__ */e.jsx(i.default,{display:"flex",alignItems:"center",children:p&&q===a.tab_order?/* @__PURE__ */e.jsx(r.TextField,{value:a.title,autoFocus:!0,onBlur:()=>g(null),onChange:e=>{return t=e,r=a.tab_order,void(p&&p(r,t.target.value));var t,r}}):v?/* @__PURE__ */e.jsxs("div",{className:"Tabs--Title",children:[
-/* @__PURE__ */e.jsx(s.Typography,{color:"theme.secondary.1000",type:"s3",children:b(a.title)}),!a.remove_tab&&/* @__PURE__ */e.jsx(d.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),v(a.tab_order)},children:/* @__PURE__ */e.jsx(t.default,{style:{fontSize:"15px",cursor:"pointer"}})})]}):/* @__PURE__ */e.jsx(s.Typography,{color:"theme.secondary.1000",type:"s3",children:b(a.title)})}),wrapped:!0,onDoubleClick:()=>{return e=a.tab_order,void g(e);var e}},a.tab_order))})}),m.map((a,t)=>a.content&&/* @__PURE__ */e.jsx(c.default,{value:t.toString(),children:y===t&&a.content},a.tab_order))]})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=;/* empty css                                                     */;/* empty css                  */var r=,/* empty css                                 */l=require("react-i18next"),s=,/* empty css                                 */o=,/* empty css                                                 */i=,/* empty css                                                          */n=,/* empty css                                                    */u=,/* empty css                                                 */d=,/* empty css                                                               */c=;/* empty css                                                      */const x=x=>{const{t:b}=l.useTranslation(),{tabs:m,onEditTabTitle:p,activeValue:j,setActiveValue:h,handleTabChange:f,handleRemoveTab:v,containerProps:T}=x,[y,_]=a.useState(j||0),[q,g]=a.useState(null);return a.useEffect(()=>{j&&_(j)},[j]),/* @__PURE__ */e.jsx(o.default,{mb:2,...T,children:/* @__PURE__ */e.jsxs(i.default,{value:j??y,children:[
+/* @__PURE__ */e.jsx(o.default,{children:/* @__PURE__ */e.jsx(n.default,{className:"account-payble-tabs-wrap",onChange:(e,a)=>{_(a),h&&h(a),f&&f()},variant:"scrollable",scrollButtons:"auto","aria-label":"scrollable tabs",sx:{overflowX:"auto",maxWidth:"100%"},children:m.map((a,l)=>/* @__PURE__ */e.jsx(u.default,{className:"account-payble-tab-items",label:/* @__PURE__ */e.jsx(o.default,{display:"flex",alignItems:"center",children:p&&q===a.tab_order?/* @__PURE__ */e.jsx(r.TextField,{value:a.title,autoFocus:!0,onBlur:()=>g(null),onChange:e=>{return t=e,r=a.tab_order,void(p&&p(r,t.target.value));var t,r}}):v?/* @__PURE__ */e.jsxs("div",{className:"Tabs--Title",children:[
+/* @__PURE__ */e.jsx(s.Typography,{color:"theme.secondary.1000",type:"s3",children:b(a.title)}),!a.remove_tab&&/* @__PURE__ */e.jsx(d.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),v(a.tab_order)},children:/* @__PURE__ */e.jsx(t.default,{style:{fontSize:"15px",cursor:"pointer"}})})]}):/* @__PURE__ */e.jsx(s.Typography,{color:"theme.secondary.1000",type:"s3",children:b(a.title)})}),wrapped:!0,onDoubleClick:()=>{return e=a.tab_order,void g(e);var e}},a.tab_order))})}),m.map((a,t)=>a.content&&/* @__PURE__ */e.jsx(c.default,{value:t.toString(),children:y===t&&a.content},a.tab_order))]})})};exports.TabBar=x,exports.default=x;
 //# sourceMappingURL=index.js.map

package/dist/components/tabs/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tabs.scss\";\nimport TextField from \"../text-field/text-field\";\nimport { useTranslation } from \"react-i18next\";\nimport Typography from \"../typography/typography\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n}\nexport interface TabProps {\n  tabs: TabItem[];\n  activeValue?: number;\n  setActiveValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n  isFormTabValid?: boolean ;\n  isTabViewOnly?: boolean;\n  activeTabs?: any[] ;\n  setActiveTabs?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  containerProps?: any;\n}\n\nexport default function TabBar(props: TabProps) {\n  const { t } = useTranslation();\n  const {\n    tabs,\n    onEditTabTitle,\n    activeValue,\n    setActiveValue,\n    handleTabChange,\n    handleRemoveTab,\n    // isFormTabValid ,  \n    isTabViewOnly,\n    activeTabs, \n    containerProps\n  } = props; \n  \n  const [value, setValue] = useState<number>(activeValue || 0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  useEffect(()=>{\n    activeValue && setValue(activeValue);\n\t} , [activeValue])\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveValue && setActiveValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  // useEffect(() => {\n  //   if (setActiveValue && Boolean(tabs?.length)) setActiveValue(value);\n  //   // eslint-disable-next-line\n  // }, [tabs]);\n\n  return (\n    <Box mb={2} {...containerProps}>\n      <TabContext value={activeValue ?? value }>\n        <Box>\n          <TabList className=\"account-payble-tabs-wrap\" onChange={handleChange} variant=\"scrollable\" scrollButtons=\"auto\" aria-label=\"scrollable tabs\" sx={{ overflowX: 'auto', maxWidth: '100%' }}>\n            {tabs.map((tab: TabItem, index: any) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n              \n                label={\n                  <Box display='flex' alignItems='center'>\n                    {\n                        onEditTabTitle && editableTabId === tab.tab_order ? (\n                          <TextField\n                            value={tab.title}\n                            autoFocus\n                            onBlur={() => setEditableTabId(null)}\n                            onChange={(e: any) =>\n                              handleEditTabTitle(e, tab.tab_order)\n                            }\n                          />\n                        ) : handleRemoveTab ? (\n                          <div className=\"Tabs--Title\">\n                            <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                            {!tab.remove_tab && (\n                              <IconButton size=\"small\" onClick={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                                handleRemoveTab(tab.tab_order);\n                              }}>\n                                <CloseIcon style={{ fontSize: \"15px\", cursor: \"pointer\" }}/>\n                              </IconButton>\n                            )}\n                          </div>\n                        ) : (\n                          <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                        )\n                    }\n                  </Box>\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index.toString()} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n"],"names":["props","t","useTranslation","tabs","onEditTabTitle","activeValue","setActiveValue","handleTabChange","handleRemoveTab","containerProps","value","setValue","useState","editableTabId","setEditableTabId","useEffect","jsx","Box","mb","children","jsxs","TabContext","TabList","className","onChange","_event","newValue","variant","scrollButtons","sx","overflowX","maxWidth","map","tab","index","Tab","label","display","alignItems","tab_order","TextField","title","autoFocus","onBlur","e","handleEditTabTitle","event","tabId","target","Typography","color","type","remove_tab","IconButton","size","onClick","preventDefault","stopPropagation","CloseIcon","style","fontSize","cursor","wrapped","onDoubleClick","handleTabDoubleClick","content","TabPanel","toString"],"mappings":"+xBAoCA,SAA+BA,GAC7B,MAAMC,EAAEA,GAAMC,oBACRC,KACJA,EAAAC,eACAA,EAAAC,YACAA,EAAAC,eACAA,EAAAC,gBACAA,EAAAC,gBACAA,EAAAC,eAIAA,GACET,GAEGU,EAAOC,GAAYC,EAAAA,SAAiBP,GAAe,IACnDQ,EAAeC,GAAoBF,EAAAA,SAAwB,MA2BlE,OA1BAG,EAAAA,UAAU,KACRV,GAAeM,EAASN,IACvB,CAACA,qBAyBFW,IAACC,EAAAA,QAAA,CAAIC,GAAI,KAAOT,EACdU,wBAAAC,EAAAA,KAACC,EAAAA,QAAA,CAAWX,MAAOL,GAAeK,EAChCS,SAAA;eAAAH,EAAAA,IAACC,EAAAA,QAAA,CACCE,wBAAAH,EAAAA,IAACM,EAAAA,QAAA,CAAQC,UAAU,2BAA2BC,SA1BjC,CAACC,EAA8BC,KAClDf,EAASe,GACTpB,GAAkBA,EAAeoB,GACjCnB,GAAmBA,KAuByDoB,QAAQ,aAAaC,cAAc,OAAO,aAAW,kBAAkBC,GAAI,CAAEC,UAAW,OAAQC,SAAU,QAC7KZ,SAAAhB,EAAK6B,IAAI,CAACC,EAAcC,mBACvBlB,EAAAA,IAACmB,EAAAA,QAAA,CACCZ,UAAU,2BAGVa,qBACEpB,EAAAA,IAACC,EAAAA,QAAA,CAAIoB,QAAQ,OAAOC,WAAW,SAEzBnB,SAAAf,GAAkBS,IAAkBoB,EAAIM,yBACtCvB,EAAAA,IAACwB,EAAAA,UAAA,CACC9B,MAAOuB,EAAIQ,MACXC,WAAS,EACTC,OAAQ,IAAM7B,EAAiB,MAC/BU,SAAWoB,IACTC,OA9B1BC,EA8B6CF,EA7B7CG,EA6BgDd,EAAIM,eA3BpDnC,GAAkBA,EAAe2C,EAAOD,EAAME,OAAOtC,QAJ5B,IACzBoC,EACAC,KAgCwBvC,iBACFY,EAAAA,KAAC,MAAA,CAAIG,UAAU,cACbJ,SAAA;eAAAH,EAAAA,IAACiC,EAAAA,WAAA,CAAWC,MAAM,uBAAuBC,KAAK,KAAMhC,SAAAlB,EAAEgC,EAAIQ,UACxDR,EAAImB,2BACJpC,EAAAA,IAACqC,EAAAA,SAAWC,KAAK,QAAQC,QAAUX,IACjCA,EAAEY,iBACFZ,EAAEa,kBACFjD,EAAgByB,EAAIM,YAEpBpB,wBAAAH,MAAC0C,EAAAA,QAAA,CAAUC,MAAO,CAAEC,SAAU,OAAQC,OAAQ,mCAKpD7C,IAACiC,EAAAA,WAAA,CAAWC,MAAM,uBAAuBC,KAAK,KAAMhC,SAAAlB,EAAEgC,EAAIQ,WAKpEqB,SAAO,EACPC,cAAe,KAAMC,OA1DLjB,EA0D0Bd,EAAIM,eAzD1DzB,EAAiBiC,GADU,IAACA,IAwBXd,EAAIM,gBAuChBpC,EAAK6B,IACJ,CAACC,EAAcC,IACbD,EAAIgC,8BACDC,EAAAA,QAAA,CAASxD,MAAOwB,EAAMiC,WACpBhD,SAAAT,IAAUwB,GAASD,EAAIgC,SADchC,EAAIM,gBAQ1D"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport Tab from \"@mui/material/Tab\";\nimport TabContext from \"@mui/lab/TabContext\";\nimport TabList from \"@mui/lab/TabList\";\nimport TabPanel from \"@mui/lab/TabPanel\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nimport \"./tabs.scss\";\nimport TextField from \"../text-field/text-field\";\nimport { useTranslation } from \"react-i18next\";\nimport Typography from \"../typography/typography\";\n\ninterface TabItem {\n  tab_order: number;\n  title: string;\n  content?: string | ReactNode;\n  data?: any;\n  remove_tab?: boolean;\n}\nexport interface TabProps {\n  tabs: TabItem[];\n  activeValue?: number;\n  setActiveValue?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  onEditTabTitle?: (tabId: number, newTitle: string) => void;\n  handleTabChange?: () => void;\n  handleRemoveTab?: (tabId: number) => void;\n  isFormTabValid?: boolean ;\n  isTabViewOnly?: boolean;\n  activeTabs?: any[] ;\n  setActiveTabs?: React.Dispatch<React.SetStateAction<number | undefined>>;\n  containerProps?: any;\n}\n\nexport const TabBar = (props: TabProps) => {\n  const { t } = useTranslation();\n  const {\n    tabs,\n    onEditTabTitle,\n    activeValue,\n    setActiveValue,\n    handleTabChange,\n    handleRemoveTab,\n    // isFormTabValid ,  \n    isTabViewOnly,\n    activeTabs, \n    containerProps\n  } = props; \n  \n  const [value, setValue] = useState<number>(activeValue || 0);\n  const [editableTabId, setEditableTabId] = useState<number | null>(null);\n  useEffect(()=>{\n    activeValue && setValue(activeValue);\n\t} , [activeValue])\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue);\n    setActiveValue && setActiveValue(newValue);\n    handleTabChange && handleTabChange();\n  };\n\n  const handleTabDoubleClick = (tabId: number) => {\n    setEditableTabId(tabId);\n  };\n\n  const handleEditTabTitle = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    tabId: number,\n  ) => {\n    onEditTabTitle && onEditTabTitle(tabId, event.target.value);\n  };\n\n  // useEffect(() => {\n  //   if (setActiveValue && Boolean(tabs?.length)) setActiveValue(value);\n  //   // eslint-disable-next-line\n  // }, [tabs]);\n\n  return (\n    <Box mb={2} {...containerProps}>\n      <TabContext value={activeValue ?? value }>\n        <Box>\n          <TabList className=\"account-payble-tabs-wrap\" onChange={handleChange} variant=\"scrollable\" scrollButtons=\"auto\" aria-label=\"scrollable tabs\" sx={{ overflowX: 'auto', maxWidth: '100%' }}>\n            {tabs.map((tab: TabItem, index: any) => (\n              <Tab\n                className=\"account-payble-tab-items\"\n                key={tab.tab_order}\n              \n                label={\n                  <Box display='flex' alignItems='center'>\n                    {\n                        onEditTabTitle && editableTabId === tab.tab_order ? (\n                          <TextField\n                            value={tab.title}\n                            autoFocus\n                            onBlur={() => setEditableTabId(null)}\n                            onChange={(e: any) =>\n                              handleEditTabTitle(e, tab.tab_order)\n                            }\n                          />\n                        ) : handleRemoveTab ? (\n                          <div className=\"Tabs--Title\">\n                            <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                            {!tab.remove_tab && (\n                              <IconButton size=\"small\" onClick={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                                handleRemoveTab(tab.tab_order);\n                              }}>\n                                <CloseIcon style={{ fontSize: \"15px\", cursor: \"pointer\" }}/>\n                              </IconButton>\n                            )}\n                          </div>\n                        ) : (\n                          <Typography color='theme.secondary.1000' type='s3'>{t(tab.title)}</Typography>\n                        )\n                    }\n                  </Box>\n                }\n                wrapped\n                onDoubleClick={() => handleTabDoubleClick(tab.tab_order)}\n              />\n            ))}\n          </TabList>\n        </Box>\n        {tabs.map(\n          (tab: TabItem, index: number) =>\n            tab.content && (\n              <TabPanel value={index.toString()} key={tab.tab_order}>\n                {value === index && tab.content}\n              </TabPanel>\n            ),\n        )}\n      </TabContext>\n    </Box>\n  );\n}\n\nexport default TabBar;"],"names":["TabBar","props","t","useTranslation","tabs","onEditTabTitle","activeValue","setActiveValue","handleTabChange","handleRemoveTab","containerProps","value","setValue","useState","editableTabId","setEditableTabId","useEffect","jsx","Box","mb","children","jsxs","TabContext","TabList","className","onChange","_event","newValue","variant","scrollButtons","sx","overflowX","maxWidth","map","tab","index","Tab","label","display","alignItems","tab_order","TextField","title","autoFocus","onBlur","e","handleEditTabTitle","event","tabId","target","Typography","color","type","remove_tab","IconButton","size","onClick","preventDefault","stopPropagation","CloseIcon","style","fontSize","cursor","wrapped","onDoubleClick","handleTabDoubleClick","content","TabPanel","toString"],"mappings":"+wBAoCO,MAAMA,EAAUC,IACrB,MAAMC,EAAEA,GAAMC,oBACRC,KACJA,EAAAC,eACAA,EAAAC,YACAA,EAAAC,eACAA,EAAAC,gBACAA,EAAAC,gBACAA,EAAAC,eAIAA,GACET,GAEGU,EAAOC,GAAYC,EAAAA,SAAiBP,GAAe,IACnDQ,EAAeC,GAAoBF,EAAAA,SAAwB,MA2BlE,OA1BAG,EAAAA,UAAU,KACRV,GAAeM,EAASN,IACvB,CAACA,qBAyBFW,IAACC,EAAAA,QAAA,CAAIC,GAAI,KAAOT,EACdU,wBAAAC,EAAAA,KAACC,EAAAA,QAAA,CAAWX,MAAOL,GAAeK,EAChCS,SAAA;eAAAH,EAAAA,IAACC,EAAAA,QAAA,CACCE,wBAAAH,EAAAA,IAACM,EAAAA,QAAA,CAAQC,UAAU,2BAA2BC,SA1BjC,CAACC,EAA8BC,KAClDf,EAASe,GACTpB,GAAkBA,EAAeoB,GACjCnB,GAAmBA,KAuByDoB,QAAQ,aAAaC,cAAc,OAAO,aAAW,kBAAkBC,GAAI,CAAEC,UAAW,OAAQC,SAAU,QAC7KZ,SAAAhB,EAAK6B,IAAI,CAACC,EAAcC,mBACvBlB,EAAAA,IAACmB,EAAAA,QAAA,CACCZ,UAAU,2BAGVa,qBACEpB,EAAAA,IAACC,EAAAA,QAAA,CAAIoB,QAAQ,OAAOC,WAAW,SAEzBnB,SAAAf,GAAkBS,IAAkBoB,EAAIM,yBACtCvB,EAAAA,IAACwB,EAAAA,UAAA,CACC9B,MAAOuB,EAAIQ,MACXC,WAAS,EACTC,OAAQ,IAAM7B,EAAiB,MAC/BU,SAAWoB,IACTC,OA9B1BC,EA8B6CF,EA7B7CG,EA6BgDd,EAAIM,eA3BpDnC,GAAkBA,EAAe2C,EAAOD,EAAME,OAAOtC,QAJ5B,IACzBoC,EACAC,KAgCwBvC,iBACFY,EAAAA,KAAC,MAAA,CAAIG,UAAU,cACbJ,SAAA;eAAAH,EAAAA,IAACiC,EAAAA,WAAA,CAAWC,MAAM,uBAAuBC,KAAK,KAAMhC,SAAAlB,EAAEgC,EAAIQ,UACxDR,EAAImB,2BACJpC,EAAAA,IAACqC,EAAAA,SAAWC,KAAK,QAAQC,QAAUX,IACjCA,EAAEY,iBACFZ,EAAEa,kBACFjD,EAAgByB,EAAIM,YAEpBpB,wBAAAH,MAAC0C,EAAAA,QAAA,CAAUC,MAAO,CAAEC,SAAU,OAAQC,OAAQ,mCAKpD7C,IAACiC,EAAAA,WAAA,CAAWC,MAAM,uBAAuBC,KAAK,KAAMhC,SAAAlB,EAAEgC,EAAIQ,WAKpEqB,SAAO,EACPC,cAAe,KAAMC,OA1DLjB,EA0D0Bd,EAAIM,eAzD1DzB,EAAiBiC,GADU,IAACA,IAwBXd,EAAIM,gBAuChBpC,EAAK6B,IACJ,CAACC,EAAcC,IACbD,EAAIgC,8BACDC,EAAAA,QAAA,CAASxD,MAAOwB,EAAMiC,WACpBhD,SAAAT,IAAUwB,GAASD,EAAIgC,SADchC,EAAIM"}

package/dist/components/tabs/tabs.d.ts

@@ -20,5 +20,5 @@ export interface TabProps {
     setActiveTabs?: React.Dispatch<React.SetStateAction<number | undefined>>;
     containerProps?: any;
 }
-export default function TabBar(props: TabProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const TabBar: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+export default TabBar;

package/dist/hooks/index.esm.js

@@ -4,9 +4,9 @@ import { default as default2 } from "./use-deep-memo/index.esm.js";
 import { getAvailableSteelTypes, getAvailableTubeTypes, useMaterialCalculations, validateFormValues } from "./use-material-calculations/index.esm.js";
 import { usePages } from "./use-pages/index.esm.js";
 import { usePermissions } from "./use-permissions/index.esm.js";
-import { default as default3 } from "./use-translations/index.esm.js";
+import { useAppTranslations } from "./use-translations/index.esm.js";
 import { useAuth } from "./useAuth/index.esm.js";
-import { default as default4 } from "./useCheckSkuAndName/index.esm.js";
+import { useNameSkuUniquenessCheck } from "./useCheckSkuAndName/index.esm.js";
 import { useDataFetcher } from "./useDataFetcher/index.esm.js";
 import { useLanguage } from "./useLangauge/index.esm.js";
 import { useLanguageFallback, useLanguageState } from "./useLanguageFallback/index.esm.js";
@@ -26,7 +26,7 @@ export {
   recursiveSort,
   removeExtraKeys,
   sortData,
-  default3 as useAppTranslations,
+  useAppTranslations,
   useAuth,
   useDataFetcher,
   default2 as useDeepMemo,
@@ -36,7 +36,7 @@ export {
   useLocationFilter,
   useMaterialCalculations,
   useMultipleLocationFilters,
-  default4 as useNameSkuUniquenessCheck,
+  useNameSkuUniquenessCheck,
   usePages,
   usePermissions,
   useReduxIntegration,

package/dist/hooks/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./apiHelper/index.js"),s=require("./common/index.js"),r=require("./use-deep-memo/index.js"),t=require("./use-material-calculations/index.js"),a=require("./use-pages/index.js"),u=require("./use-permissions/index.js"),i=require("./use-translations/index.js"),o=require("./useAuth/index.js"),l=require("./useCheckSkuAndName/index.js"),p=require("./useDataFetcher/index.js"),n=require("./useLangauge/index.js"),x=require("./useLanguageFallback/index.js"),c=require("./useLocationFilter/index.js"),d=require("./useReduxIntegration/index.js");exports.apiHelper=e.apiHelper,exports.apiType=s.apiType,exports.capitalizeWords=s.capitalizeWords,exports.convertEmptyToNull=s.convertEmptyToNull,exports.defaultUserCurrency=s.defaultUserCurrency,exports.formatNumber=s.formatNumber,exports.formatTime=s.formatTime,exports.formateDate=s.formateDate,exports.recursiveSort=s.recursiveSort,exports.removeExtraKeys=s.removeExtraKeys,exports.sortData=s.sortData,exports.valueWithCurrency=s.valueWithCurrency,exports.useDeepMemo=r.default,exports.getAvailableSteelTypes=t.getAvailableSteelTypes,exports.getAvailableTubeTypes=t.getAvailableTubeTypes,exports.useMaterialCalculations=t.useMaterialCalculations,exports.validateFormValues=t.validateFormValues,exports.usePages=a.usePages,exports.usePermissions=u.usePermissions,exports.useAppTranslations=i.default,exports.useAuth=o.useAuth,exports.useNameSkuUniquenessCheck=l.default,exports.useDataFetcher=p.useDataFetcher,exports.useLanguage=n.useLanguage,exports.useLanguageFallback=x.useLanguageFallback,exports.useLanguageState=x.useLanguageState,exports.useLocationFilter=c.useLocationFilter,exports.useMultipleLocationFilters=c.useMultipleLocationFilters,exports.useReduxIntegration=d.useReduxIntegration;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./apiHelper/index.js"),s=require("./common/index.js"),r=require("./use-deep-memo/index.js"),t=require("./use-material-calculations/index.js"),a=require("./use-pages/index.js"),u=require("./use-permissions/index.js"),i=require("./use-translations/index.js"),o=require("./useAuth/index.js"),p=require("./useCheckSkuAndName/index.js"),n=require("./useDataFetcher/index.js"),l=require("./useLangauge/index.js"),x=require("./useLanguageFallback/index.js"),c=require("./useLocationFilter/index.js"),d=require("./useReduxIntegration/index.js");exports.apiHelper=e.apiHelper,exports.apiType=s.apiType,exports.capitalizeWords=s.capitalizeWords,exports.convertEmptyToNull=s.convertEmptyToNull,exports.defaultUserCurrency=s.defaultUserCurrency,exports.formatNumber=s.formatNumber,exports.formatTime=s.formatTime,exports.formateDate=s.formateDate,exports.recursiveSort=s.recursiveSort,exports.removeExtraKeys=s.removeExtraKeys,exports.sortData=s.sortData,exports.valueWithCurrency=s.valueWithCurrency,exports.useDeepMemo=r.default,exports.getAvailableSteelTypes=t.getAvailableSteelTypes,exports.getAvailableTubeTypes=t.getAvailableTubeTypes,exports.useMaterialCalculations=t.useMaterialCalculations,exports.validateFormValues=t.validateFormValues,exports.usePages=a.usePages,exports.usePermissions=u.usePermissions,exports.useAppTranslations=i.useAppTranslations,exports.useAuth=o.useAuth,exports.useNameSkuUniquenessCheck=p.useNameSkuUniquenessCheck,exports.useDataFetcher=n.useDataFetcher,exports.useLanguage=l.useLanguage,exports.useLanguageFallback=x.useLanguageFallback,exports.useLanguageState=x.useLanguageState,exports.useLocationFilter=c.useLocationFilter,exports.useMultipleLocationFilters=c.useMultipleLocationFilters,exports.useReduxIntegration=d.useReduxIntegration;
 //# sourceMappingURL=index.js.map

package/dist/hooks/use-translations/index.esm.js

@@ -6,7 +6,7 @@ import modules from "../../constants/modules/index.esm.js";
 let globalLastLoadedModules = "";
 let globalIsLoading = false;
 let globalInitialLoad = true;
-function useAppTranslations() {
+const useAppTranslations = () => {
   const [isLoading, setIsLoading] = useState(globalInitialLoad);
   const location = useLocation();
   const { t } = useTranslation();
@@ -50,8 +50,9 @@ function useAppTranslations() {
     }
   }, [location.pathname, t]);
   return { isLoading };
-}
+};
 export {
-  useAppTranslations as default
+  useAppTranslations as default,
+  useAppTranslations
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/hooks/use-translations/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/hooks/use-translations.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\r\nimport { useLocation } from 'react-router-dom'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { loadModuleTranslations } from '../utils/translations'\r\nimport modules from '../constants/modules'\r\n\r\n// Global state to prevent duplicate calls across all hook instances\r\nlet globalLastLoadedModules = ''\r\nlet globalIsLoading = false\r\nlet globalInitialLoad = true\r\n\r\nexport default function useAppTranslations() {\r\n\tconst [isLoading, setIsLoading] = useState(globalInitialLoad)\r\n\tconst location = useLocation()\r\n\tconst { t } = useTranslation()\r\n\r\n\tuseEffect(() => {\r\n\t\tconst erpModules = modules(t)\r\n\t\tconst currentPath = location.pathname.toLowerCase()\r\n\r\n\t\tconst matchedModule = erpModules.find(\r\n\t\t\t(mod) =>\r\n\t\t\t\tmod.link.toLowerCase() === currentPath ||\r\n\t\t\t\tmod.connectedRoutes?.some((route: string) => currentPath.startsWith(route.toLowerCase()))\r\n\t\t)\r\n\r\n\t\tlet modulesToLoad: string[] = []\r\n\r\n\t\tif (matchedModule?.translationModule) {\r\n\t\t\tmodulesToLoad = [...matchedModule.translationModule, 'common']\r\n\t\t} else if (!matchedModule && currentPath === '/dashboard') {\r\n\t\t\tmodulesToLoad = ['common']\r\n\t\t}\r\n\r\n\t\tif (modulesToLoad.length > 0) {\r\n\t\t\tconst moduleKey = [...modulesToLoad].sort().join(',')\r\n\r\n\t\t\t// Skip if same modules are already loaded or currently loading\r\n\t\t\tif (globalLastLoadedModules === moduleKey || globalIsLoading) {\r\n\t\t\t\tif (globalInitialLoad) {\r\n\t\t\t\t\tsetIsLoading(false)\r\n\t\t\t\t\tglobalInitialLoad = false\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\r\n\t\t\tglobalIsLoading = true\r\n\t\t\tglobalLastLoadedModules = moduleKey\r\n\t\t\tsetIsLoading(true)\r\n\r\n\t\t\tloadModuleTranslations(modulesToLoad).finally(() => {\r\n\t\t\t\tglobalIsLoading = false\r\n\t\t\t\tsetIsLoading(false)\r\n\t\t\t\tglobalInitialLoad = false\r\n\t\t\t})\r\n\t\t} else {\r\n\t\t\t// No modules to load, but still need to handle initial load state\r\n\t\t\tif (globalInitialLoad) {\r\n\t\t\t\tsetIsLoading(false)\r\n\t\t\t\tglobalInitialLoad = false\r\n\t\t\t}\r\n\t\t}\r\n\t}, [location.pathname, t])\r\n\r\n\treturn { isLoading }\r\n}\r\n"],"names":[],"mappings":";;;;;AAOA,IAAI,0BAA0B;AAC9B,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;AAExB,SAAwB,qBAAqB;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,iBAAiB;AAC5D,QAAM,WAAW,YAAA;AACjB,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,YAAU,MAAM;AACf,UAAM,aAAa,QAAQ,CAAC;AAC5B,UAAM,cAAc,SAAS,SAAS,YAAA;AAEtC,UAAM,gBAAgB,WAAW;AAAA,MAChC,CAAC,QAAA;;AACA,mBAAI,KAAK,YAAA,MAAkB,iBAC3B,SAAI,oBAAJ,mBAAqB,KAAK,CAAC,UAAkB,YAAY,WAAW,MAAM,aAAa;AAAA;AAAA,IAAC;AAG1F,QAAI,gBAA0B,CAAA;AAE9B,QAAI,+CAAe,mBAAmB;AACrC,sBAAgB,CAAC,GAAG,cAAc,mBAAmB,QAAQ;AAAA,IAC9D,WAAW,CAAC,iBAAiB,gBAAgB,cAAc;AAC1D,sBAAgB,CAAC,QAAQ;AAAA,IAC1B;AAEA,QAAI,cAAc,SAAS,GAAG;AAC7B,YAAM,YAAY,CAAC,GAAG,aAAa,EAAE,KAAA,EAAO,KAAK,GAAG;AAGpD,UAAI,4BAA4B,aAAa,iBAAiB;AAC7D,YAAI,mBAAmB;AACtB,uBAAa,KAAK;AAClB,8BAAoB;AAAA,QACrB;AACA;AAAA,MACD;AAEA,wBAAkB;AAClB,gCAA0B;AAC1B,mBAAa,IAAI;AAEjB,6BAAuB,aAAa,EAAE,QAAQ,MAAM;AACnD,0BAAkB;AAClB,qBAAa,KAAK;AAClB,4BAAoB;AAAA,MACrB,CAAC;AAAA,IACF,OAAO;AAEN,UAAI,mBAAmB;AACtB,qBAAa,KAAK;AAClB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAAA,EACD,GAAG,CAAC,SAAS,UAAU,CAAC,CAAC;AAEzB,SAAO,EAAE,UAAA;AACV;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/hooks/use-translations.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\r\nimport { useLocation } from 'react-router-dom'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { loadModuleTranslations } from '../utils/translations'\r\nimport modules from '../constants/modules'\r\n\r\n// Global state to prevent duplicate calls across all hook instances\r\nlet globalLastLoadedModules = ''\r\nlet globalIsLoading = false\r\nlet globalInitialLoad = true\r\n\r\nexport const useAppTranslations = () => {\r\n\tconst [isLoading, setIsLoading] = useState(globalInitialLoad)\r\n\tconst location = useLocation()\r\n\tconst { t } = useTranslation()\r\n\r\n\tuseEffect(() => {\r\n\t\tconst erpModules = modules(t)\r\n\t\tconst currentPath = location.pathname.toLowerCase()\r\n\r\n\t\tconst matchedModule = erpModules.find(\r\n\t\t\t(mod) =>\r\n\t\t\t\tmod.link.toLowerCase() === currentPath ||\r\n\t\t\t\tmod.connectedRoutes?.some((route: string) => currentPath.startsWith(route.toLowerCase()))\r\n\t\t)\r\n\r\n\t\tlet modulesToLoad: string[] = []\r\n\r\n\t\tif (matchedModule?.translationModule) {\r\n\t\t\tmodulesToLoad = [...matchedModule.translationModule, 'common']\r\n\t\t} else if (!matchedModule && currentPath === '/dashboard') {\r\n\t\t\tmodulesToLoad = ['common']\r\n\t\t}\r\n\r\n\t\tif (modulesToLoad.length > 0) {\r\n\t\t\tconst moduleKey = [...modulesToLoad].sort().join(',')\r\n\r\n\t\t\t// Skip if same modules are already loaded or currently loading\r\n\t\t\tif (globalLastLoadedModules === moduleKey || globalIsLoading) {\r\n\t\t\t\tif (globalInitialLoad) {\r\n\t\t\t\t\tsetIsLoading(false)\r\n\t\t\t\t\tglobalInitialLoad = false\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\r\n\t\t\tglobalIsLoading = true\r\n\t\t\tglobalLastLoadedModules = moduleKey\r\n\t\t\tsetIsLoading(true)\r\n\r\n\t\t\tloadModuleTranslations(modulesToLoad).finally(() => {\r\n\t\t\t\tglobalIsLoading = false\r\n\t\t\t\tsetIsLoading(false)\r\n\t\t\t\tglobalInitialLoad = false\r\n\t\t\t})\r\n\t\t} else {\r\n\t\t\t// No modules to load, but still need to handle initial load state\r\n\t\t\tif (globalInitialLoad) {\r\n\t\t\t\tsetIsLoading(false)\r\n\t\t\t\tglobalInitialLoad = false\r\n\t\t\t}\r\n\t\t}\r\n\t}, [location.pathname, t])\r\n\r\n\treturn { isLoading }\r\n};\r\n\r\nexport default useAppTranslations;\r\n"],"names":[],"mappings":";;;;;AAOA,IAAI,0BAA0B;AAC9B,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;AAEjB,MAAM,qBAAqB,MAAM;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,iBAAiB;AAC5D,QAAM,WAAW,YAAA;AACjB,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,YAAU,MAAM;AACf,UAAM,aAAa,QAAQ,CAAC;AAC5B,UAAM,cAAc,SAAS,SAAS,YAAA;AAEtC,UAAM,gBAAgB,WAAW;AAAA,MAChC,CAAC,QAAA;;AACA,mBAAI,KAAK,YAAA,MAAkB,iBAC3B,SAAI,oBAAJ,mBAAqB,KAAK,CAAC,UAAkB,YAAY,WAAW,MAAM,aAAa;AAAA;AAAA,IAAC;AAG1F,QAAI,gBAA0B,CAAA;AAE9B,QAAI,+CAAe,mBAAmB;AACrC,sBAAgB,CAAC,GAAG,cAAc,mBAAmB,QAAQ;AAAA,IAC9D,WAAW,CAAC,iBAAiB,gBAAgB,cAAc;AAC1D,sBAAgB,CAAC,QAAQ;AAAA,IAC1B;AAEA,QAAI,cAAc,SAAS,GAAG;AAC7B,YAAM,YAAY,CAAC,GAAG,aAAa,EAAE,KAAA,EAAO,KAAK,GAAG;AAGpD,UAAI,4BAA4B,aAAa,iBAAiB;AAC7D,YAAI,mBAAmB;AACtB,uBAAa,KAAK;AAClB,8BAAoB;AAAA,QACrB;AACA;AAAA,MACD;AAEA,wBAAkB;AAClB,gCAA0B;AAC1B,mBAAa,IAAI;AAEjB,6BAAuB,aAAa,EAAE,QAAQ,MAAM;AACnD,0BAAkB;AAClB,qBAAa,KAAK;AAClB,4BAAoB;AAAA,MACrB,CAAC;AAAA,IACF,OAAO;AAEN,UAAI,mBAAmB;AACtB,qBAAa,KAAK;AAClB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAAA,EACD,GAAG,CAAC,SAAS,UAAU,CAAC,CAAC;AAEzB,SAAO,EAAE,UAAA;AACV;"}