@ctlyst.id/internal-ui 3.1.20 → 3.1.21

package/dist/index.js

@@ -4400,8 +4400,8 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
       flexDirection: "column",
       overflow: "hidden",
       shadow: "raised",
+      initial: { width: isCollapse ? "62px" : width },
       animate: { width: isCollapse ? "62px" : width },
-      transition: "10ms linear",
       ...props,
       children
     }
@@ -4440,9 +4440,9 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
               {
                 as: import_framer_motion2.motion.div,
                 boxSize: "4",
+                initial: { rotate: 0, x: 8 },
                 animate: { rotate: isCollapse ? 0 : -180, x: isCollapse ? 8 : 0 },
-                transition: "ease-in-out",
-                transitionDuration: "1ms",
+                transitionTimingFunction: "linear",
                 "aria-label": "toggle sidebar",
                 children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_internal_icon8.ArrowRight, { size: 4, color: "inherit" })
               }
@@ -4479,130 +4479,142 @@ var Icon8 = __toESM(require("@ctlyst.id/internal-icon"));
 var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: import_framer_motion3.motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Accordion, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
-    const isActive = active == null ? void 0 : active.includes(item.navLink);
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
-      const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
-      const noChild = !item.children.length;
-      const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
-          const activeOption = isOpen ? "primary.50" : "white";
-          const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
-          const activeParent = isActive ? backgroundColor : activeOption;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_react76.Box,
+    {
+      as: import_framer_motion3.motion.div,
+      transitionTimingFunction: "linear",
+      initial: { padding: "8px" },
+      animate: { padding: isCollapse ? "8px 16px" : "8px" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Accordion, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
+        const isActive = active == null ? void 0 : active.includes(item.navLink);
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
+          const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
+          const noChild = !item.children.length;
+          const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
           return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_react76.AccordionButton,
-              {
-                "data-test-id": `CTA_button-accordion-${item.title}`,
-                p: "0",
-                h: "fit-content",
-                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+              const activeOption = isOpen ? "primary.50" : "white";
+              const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
+              const activeParent = isActive ? backgroundColor : activeOption;
+              return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                  import_react76.AccordionButton,
+                  {
+                    "data-test-id": `CTA_button-accordion-${item.title}`,
+                    p: "0",
+                    h: "fit-content",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                      NavItem,
+                      {
+                        as: import_framer_motion3.motion.div,
+                        transitionTimingFunction: "linear",
+                        justifyContent: isCollapse ? "center" : "space-between",
+                        isActive,
+                        bg: activeParent,
+                        "data-test-id": `CTA_nav-item-${item.title}`,
+                        onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
+                        position: "relative",
+                        ...itemStyles,
+                        children: [
+                          mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                          !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                            import_react76.Box,
+                            {
+                              display: "flex",
+                              w: "full",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              ml: "2",
+                              as: import_framer_motion3.motion.div,
+                              transition: "20ms linear",
+                              transitionTimingFunction: "linear",
+                              initial: { opacity: 0, x: 24 },
+                              animate: { opacity: 1, x: 0 },
+                              exit: { opacity: 0, x: 16 },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                                !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                                  import_react76.Box,
+                                  {
+                                    display: "flex",
+                                    boxSize: "3",
+                                    as: import_framer_motion3.motion.div,
+                                    transitionTimingFunction: "linear",
+                                    animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon8.ChevronDown, { size: 3 })
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      item.id
+                    )
+                  },
+                  item.id
+                ) }, item.id),
+                isOpenOptions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Portal, { children: item.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.PopoverContent, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverHeader, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.Box, { display: "flex", alignItems: "center", children: [
+                    mappingIcon2.get(item.icon || ""),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: "span", ml: "2", children: item.title })
+                  ] }) }),
+                  !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    NavItem,
+                    {
+                      "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
+                      isChild: true,
+                      isActive: active === submenu.navLink,
+                      onClick: () => {
+                        setActive(submenu.navLink);
+                        onClose();
+                      },
+                      rounded: "none",
+                      ...itemStyles,
+                      children: submenu.title
+                    },
+                    submenu.id
+                  )) })
+                ] }) : isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverContent, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { py: "1", px: "0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
                   NavItem,
                   {
-                    as: import_framer_motion3.motion.div,
-                    justifyContent: isCollapse ? "center" : "space-between",
-                    isActive,
-                    bg: activeParent,
-                    "data-test-id": `CTA_nav-item-${item.title}`,
-                    onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
-                    position: "relative",
+                    "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
+                    justifyContent: "flex-start",
+                    isActive: active === item.navLink,
+                    onClick: () => {
+                      setActive(item.navLink);
+                      onClose();
+                    },
+                    rounded: "none",
                     ...itemStyles,
                     children: [
                       mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                      !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-                        import_react76.Box,
-                        {
-                          display: "flex",
-                          w: "full",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          ml: "2",
-                          as: import_framer_motion3.motion.div,
-                          transition: "20ms ease-in",
-                          initial: { opacity: 0, x: 24 },
-                          animate: { opacity: 1, x: 0 },
-                          exit: { opacity: 0, x: 16 },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
-                            !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                              import_react76.Box,
-                              {
-                                display: "flex",
-                                boxSize: "3",
-                                as: import_framer_motion3.motion.div,
-                                animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon8.ChevronDown, { size: 3 })
-                              }
-                            )
-                          ]
-                        }
-                      )
+                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                     ]
                   },
                   item.id
-                )
-              },
-              item.id
-            ) }, item.id),
-            isOpenOptions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Portal, { children: item.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.PopoverContent, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverHeader, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.Box, { display: "flex", alignItems: "center", children: [
-                mappingIcon2.get(item.icon || ""),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: "span", ml: "2", children: item.title })
-              ] }) }),
-              !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                NavItem,
-                {
-                  "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
-                  isChild: true,
-                  isActive: active === submenu.navLink,
-                  onClick: () => {
-                    setActive(submenu.navLink);
-                    onClose();
-                  },
-                  rounded: "none",
-                  ...itemStyles,
-                  children: submenu.title
-                },
-                submenu.id
-              )) })
-            ] }) : isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverContent, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { py: "1", px: "0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                ) }) }) })
+              ] });
+            } }, item.id),
+            !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionPanel, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               NavItem,
               {
-                "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
-                justifyContent: "flex-start",
-                isActive: active === item.navLink,
-                onClick: () => {
-                  setActive(item.navLink);
-                  onClose();
-                },
-                rounded: "none",
+                mt: "1",
+                "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
+                isActive: active === submenu.navLink,
+                isChild: true,
                 ...itemStyles,
-                children: [
-                  mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
-                ]
+                onClick: () => setActive(submenu.navLink),
+                children: submenu.title
               },
-              item.id
-            ) }) }) })
+              submenu.id
+            )) })
           ] });
-        } }, item.id),
-        !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionPanel, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          NavItem,
-          {
-            mt: "1",
-            "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
-            isActive: active === submenu.navLink,
-            isChild: true,
-            ...itemStyles,
-            onClick: () => setActive(submenu.navLink),
-            children: submenu.title
-          },
-          submenu.id
-        )) })
-      ] });
-    } }, item.id);
-  }) }) });
+        } }, item.id);
+      }) })
+    }
+  );
 };
 SidebarMenu.displayName = "SidebarMenu";
 SidebarMenu.defaultProps = {