@kashifd/jwero-components 0.7.41 → 0.7.43

package/dist/index.es.js

@@ -46404,11 +46404,15 @@ const oa = ({ stroke: e = "#000", ...t }) => /* @__PURE__ */ v.jsxs(
             mt: 1,
             height: "2.375rem",
             borderRadius: "0.625rem",
+            overflow: "hidden",
             backgroundColor: E
           },
           fullWidth: !0,
           SelectDisplayProps: {
-            style: { backgroundColor: E }
+            style: {
+              backgroundColor: E,
+              borderRadius: "0.625rem"
+            }
           },
           ...s,
           children: r == null ? void 0 : r.map((W, te) => {
@@ -48523,10 +48527,11 @@ const fW = ({
   tableHeaderList: r,
   rowData: a,
   onClick: s = () => {
-  }
+  },
+  enableScrollButtons: c = !1
 }) => {
-  const c = jt();
-  return /* @__PURE__ */ v.jsx(
+  const d = jt();
+  return /* @__PURE__ */ v.jsx(v.Fragment, { children: /* @__PURE__ */ v.jsx(
     iv,
     {
       component: lo,
@@ -48535,48 +48540,54 @@ const fW = ({
         ...e
       },
       children: /* @__PURE__ */ v.jsxs(ov, { stickyHeader: !0, children: [
-        /* @__PURE__ */ v.jsx(sv, { children: /* @__PURE__ */ v.jsx(xd, { sx: { border: 0 }, children: Gr.isArrayWithValues(r) && r.map((d) => /* @__PURE__ */ v.jsx(
+        /* @__PURE__ */ v.jsx(sv, { children: /* @__PURE__ */ v.jsx(xd, { sx: { border: 0 }, children: Gr.isArrayWithValues(r) && r.map((g) => /* @__PURE__ */ v.jsx(
           bd,
           {
             sx: {
-              backgroundColor: c.palette.background.paper,
+              backgroundColor: d.palette.background.paper,
               border: 0,
               padding: "1rem 1rem 0.5rem 1rem"
             },
-            align: d.align,
-            children: /* @__PURE__ */ v.jsx(vt, { sx: { color: c.colors.text_secondary }, children: d.label })
+            align: g.align,
+            children: /* @__PURE__ */ v.jsx(
+              vt,
+              {
+                sx: { color: d.colors.text_secondary },
+                children: g.label
+              }
+            )
           },
-          d.value
+          g.value
         )) }) }),
-        /* @__PURE__ */ v.jsx(av, { children: Gr.isArrayWithValues(t) && t.map((d, g) => /* @__PURE__ */ v.jsx(
+        /* @__PURE__ */ v.jsx(av, { children: Gr.isArrayWithValues(t) && t.map((g, m) => /* @__PURE__ */ v.jsx(
           xd,
           {
-            onClick: (m) => s(m, d),
+            onClick: (b) => s(b, g),
             sx: {
               "&:last-child td, &:last-child th": { border: 0 },
               borderBottom: '1px solid "#f5f6f7"',
               cursor: "pointer",
               transition: "0.3s ease",
               "&:hover": {
-                backgroundColor: c.palette.background.default
+                backgroundColor: d.palette.background.default
               }
             },
-            children: r.map((m) => /* @__PURE__ */ v.jsx(
+            children: r.map((b) => /* @__PURE__ */ v.jsx(
               bd,
               {
                 component: "th",
                 scope: "row",
-                align: m.align,
-                children: a == null ? void 0 : a[m == null ? void 0 : m.value](d)
+                align: b.align,
+                children: a == null ? void 0 : a[b == null ? void 0 : b.value](g)
               },
-              m.value
+              b.value
             ))
           },
-          `${d.id}_${g}`
+          `${g.id}_${m}`
         )) })
       ] })
     }
-  );
+  ) });
 }, VF = ({
   currentPage: e,
   totalPages: t,
@@ -48645,40 +48656,42 @@ const fW = ({
   customTableHeader: s,
   onClick: c = () => {
   },
-  pagination: d = {
+  enableScrollButtons: d = !1,
+  pagination: g = {
     flag: !1,
     currentPage: 1,
     totalPages: 1
   },
-  rowsPerPageProps: g = {
+  rowsPerPageProps: m = {
     flag: !1,
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 25, 50, 100],
     onChange: () => {
     }
   },
-  sx: m
+  sx: b
 }) => {
-  const b = [
+  const w = [
     { value: "title", label: "Title", align: "left" },
     { value: "event", label: "Event", align: "left" }
-  ], w = {
-    title: (S) => /* @__PURE__ */ v.jsx(vt, { children: "EXAMPLE TITLE" }),
-    event: (S) => /* @__PURE__ */ v.jsx(vt, { children: "EXAMPLE EVENT" })
+  ], S = {
+    title: (O) => /* @__PURE__ */ v.jsx(vt, { children: "EXAMPLE TITLE" }),
+    event: (O) => /* @__PURE__ */ v.jsx(vt, { children: "EXAMPLE EVENT" })
   };
-  return /* @__PURE__ */ v.jsxs(Ve, { sx: { gap: "1rem", ...m }, children: [
+  return /* @__PURE__ */ v.jsxs(Ve, { sx: { gap: "1rem", height: "100%", width: "100%", ...b }, children: [
     s,
     /* @__PURE__ */ v.jsx(
       YF,
       {
         tableSx: e,
         data: t,
-        tableHeaderList: r || b,
-        rowData: a || w,
-        onClick: c
+        tableHeaderList: r || w,
+        rowData: a || S,
+        onClick: c,
+        enableScrollButtons: d
       }
     ),
-    (d.flag || (g == null ? void 0 : g.flag)) && /* @__PURE__ */ v.jsxs(Ve, { direction: "row", sx: { width: "100%" }, children: [
+    (g.flag || (m == null ? void 0 : m.flag)) && /* @__PURE__ */ v.jsxs(Ve, { direction: "row", sx: { width: "100%" }, children: [
       /* @__PURE__ */ v.jsx(
         Ve,
         {
@@ -48686,25 +48699,25 @@ const fW = ({
           alignItems: "center",
           justifyContent: "center",
           sx: { width: "100%" },
-          children: d.flag && /* @__PURE__ */ v.jsx(
+          children: g.flag && /* @__PURE__ */ v.jsx(
             VF,
             {
-              currentPage: d.currentPage,
-              totalPages: d.totalPages,
-              onChange: d.onChange,
+              currentPage: g.currentPage,
+              totalPages: g.totalPages,
+              onChange: g.onChange,
               sx: {
-                ml: g.flag ? "10%" : "0"
+                ml: m.flag ? "10%" : "0"
               }
             }
           )
         }
       ),
-      g.flag && /* @__PURE__ */ v.jsx(
+      m.flag && /* @__PURE__ */ v.jsx(
         UF,
         {
-          rowsPerPage: g.rowsPerPage,
-          rowsPerPageOptions: g.rowsPerPageOptions,
-          onChange: g.onChange,
+          rowsPerPage: m.rowsPerPage,
+          rowsPerPageOptions: m.rowsPerPageOptions,
+          onChange: m.onChange,
           sx: { ml: "1rem" }
         }
       )
@@ -58585,6 +58598,7 @@ const hz = ({ name: e, data: t, labels: r }) => {
   return /* @__PURE__ */ v.jsxs(
     Ve,
     {
+      className: "no-scrollbar",
       sx: {
         backgroundColor: w.colors.white,
         minWidth: "200px",
@@ -58607,48 +58621,55 @@ const hz = ({ name: e, data: t, labels: r }) => {
             children: /* @__PURE__ */ v.jsx(vt, { variant: "xxxlSemibold", ...r, children: e })
           }
         ),
-        /* @__PURE__ */ v.jsx(Ve, { sx: { gap: "1rem", height: "100%", overflowY: "auto", ...c }, children: Gr.isArrayWithValues(s) && s.map((S, O) => /* @__PURE__ */ v.jsx(
-          Mr,
+        /* @__PURE__ */ v.jsx(
+          Ve,
           {
-            title: S.access ? "" : `You don't have permission to edit ${S.label.toLowerCase() || ""}`,
-            children: /* @__PURE__ */ v.jsxs(
-              Ve,
+            className: "no-scrollbar",
+            sx: { gap: "1rem", height: "100%", overflowY: "auto", ...c },
+            children: Gr.isArrayWithValues(s) && s.map((S, O) => /* @__PURE__ */ v.jsx(
+              Mr,
               {
-                onClick: () => {
-                  b && b(S.value, S.access, S == null ? void 0 : S.navigate);
-                },
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-                sx: {
-                  borderRadius: "0.5rem",
-                  padding: "0.75rem",
-                  backgroundColor: S.value === t ? w.colors.light_blue : w.palette.background.paper,
-                  color: S.value === t ? w.colors.secondary : w.colors.text_secondary,
-                  cursor: S.access ? "pointer" : "not-allowed",
-                  "&:hover": {
-                    backgroundColor: S.value === t ? w.colors.light_blue : w.colors.light_grey
-                  },
-                  ...m
-                },
-                children: [
-                  /* @__PURE__ */ v.jsx(vt, { variant: "xlMedium", ...a, children: S.label }),
-                  (S == null ? void 0 : S.count) && /* @__PURE__ */ v.jsx(
-                    af,
-                    {
-                      type: "single",
-                      count: S == null ? void 0 : S.count,
-                      sx: {
-                        backgroundColor: w.colors.secondary
-                      }
-                    }
-                  )
-                ]
-              }
-            )
-          },
-          `${S.value}_${O}`
-        )) })
+                title: S.access ? "" : `You don't have permission to edit ${S.label.toLowerCase() || ""}`,
+                children: /* @__PURE__ */ v.jsxs(
+                  Ve,
+                  {
+                    onClick: () => {
+                      b && b(S.value, S.access, S == null ? void 0 : S.navigate);
+                    },
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    sx: {
+                      borderRadius: "0.5rem",
+                      padding: "0.75rem",
+                      backgroundColor: S.value === t ? w.colors.light_blue : w.palette.background.paper,
+                      color: S.value === t ? w.colors.secondary : w.colors.text_secondary,
+                      cursor: S.access ? "pointer" : "not-allowed",
+                      "&:hover": {
+                        backgroundColor: S.value === t ? w.colors.light_blue : w.colors.light_grey
+                      },
+                      ...m
+                    },
+                    children: [
+                      /* @__PURE__ */ v.jsx(vt, { variant: "xlMedium", ...a, children: S.label }),
+                      (S == null ? void 0 : S.count) && /* @__PURE__ */ v.jsx(
+                        af,
+                        {
+                          type: "single",
+                          count: S == null ? void 0 : S.count,
+                          sx: {
+                            backgroundColor: w.colors.secondary
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              `${S.value}_${O}`
+            ))
+          }
+        )
       ]
     }
   );
@@ -60212,7 +60233,7 @@ const fy = ({ ...e }) => /* @__PURE__ */ v.jsxs(
   }, c = [
     {
       name: e || "",
-      data: r == null ? void 0 : r.map((d, g) => (g + 1) * 20).reverse()
+      data: r == null ? void 0 : r.map((d, g) => (g + 1) * 20)
     }
   ];
   return /* @__PURE__ */ v.jsx(