@ctlyst.id/internal-ui 3.1.19 → 3.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +148 -125
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +148 -125
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4011,9 +4011,11 @@ var selectStyle = {
4011
4011
  };
4012
4012
  function selectStyles(colorMode, _isError) {
4013
4013
  return {
4014
- control: (base, { isFocused }) => {
4014
+ control: (base, { isFocused, isMulti }) => {
4015
4015
  const style = {
4016
4016
  ...base,
4017
+ minHeight: 40,
4018
+ height: isMulti ? "fit-content" : 40,
4017
4019
  flexWrap: "nowrap",
4018
4020
  borderColor: isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-400)",
4019
4021
  boxShadow: "none",
@@ -4045,23 +4047,32 @@ function selectStyles(colorMode, _isError) {
4045
4047
  };
4046
4048
  },
4047
4049
  singleValue: (base) => {
4048
- return { ...base, ...selectStyle };
4050
+ return {
4051
+ ...base,
4052
+ ...selectStyle,
4053
+ marginLeft: 0
4054
+ };
4055
+ },
4056
+ input: (base) => {
4057
+ return {
4058
+ ...base,
4059
+ ...selectStyle,
4060
+ padding: 0,
4061
+ margin: 0
4062
+ };
4049
4063
  },
4050
- input: (base) => ({
4051
- ...base,
4052
- ...selectStyle,
4053
- paddingTop: 8,
4054
- paddingBottom: 8,
4055
- margin: 0
4056
- }),
4057
4064
  dropdownIndicator: (base) => {
4058
4065
  return { ...base, ...selectStyle, color: "var(--chakra-colors-neutral-400)" };
4059
4066
  },
4060
4067
  indicatorSeparator: (base) => {
4061
4068
  return { ...base, background: "var(--chakra-colors-neutral-400)", borderRadius: 10 };
4062
4069
  },
4063
- valueContainer: (base) => {
4064
- return { ...base, ...selectStyle, marginLeft: 0 };
4070
+ valueContainer: (base, { isMulti }) => {
4071
+ return {
4072
+ ...base,
4073
+ ...selectStyle,
4074
+ marginLeft: 0
4075
+ };
4065
4076
  },
4066
4077
  placeholder: (base) => {
4067
4078
  return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)", marginLeft: 0 };
@@ -4340,7 +4351,7 @@ var SelectWithCheckboxBase = ({
4340
4351
  );
4341
4352
  };
4342
4353
  var SelectCheckbox = (props) => {
4343
- const { isMulti, options, value, components, styles, ...rest } = props;
4354
+ const { isMulti, options, value, components, ...rest } = props;
4344
4355
  const selectValue = value || [];
4345
4356
  const defaultComponents = {
4346
4357
  DropdownIndicator,
@@ -4389,8 +4400,8 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
4389
4400
  flexDirection: "column",
4390
4401
  overflow: "hidden",
4391
4402
  shadow: "raised",
4403
+ initial: { width: isCollapse ? "62px" : width },
4392
4404
  animate: { width: isCollapse ? "62px" : width },
4393
- transition: "10ms linear",
4394
4405
  ...props,
4395
4406
  children
4396
4407
  }
@@ -4429,9 +4440,9 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
4429
4440
  {
4430
4441
  as: import_framer_motion2.motion.div,
4431
4442
  boxSize: "4",
4443
+ initial: { rotate: 0, x: 8 },
4432
4444
  animate: { rotate: isCollapse ? 0 : -180, x: isCollapse ? 8 : 0 },
4433
- transition: "ease-in-out",
4434
- transitionDuration: "1ms",
4445
+ transitionTimingFunction: "linear",
4435
4446
  "aria-label": "toggle sidebar",
4436
4447
  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_internal_icon8.ArrowRight, { size: 4, color: "inherit" })
4437
4448
  }
@@ -4468,130 +4479,142 @@ var Icon8 = __toESM(require("@ctlyst.id/internal-icon"));
4468
4479
  var import_framer_motion3 = require("framer-motion");
4469
4480
  var import_jsx_runtime60 = require("react/jsx-runtime");
4470
4481
  var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
4471
- 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) => {
4472
- const isActive = active == null ? void 0 : active.includes(item.navLink);
4473
- return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
4474
- const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
4475
- const noChild = !item.children.length;
4476
- const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
4477
- return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
4478
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
4479
- const activeOption = isOpen ? "primary.50" : "white";
4480
- const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
4481
- const activeParent = isActive ? backgroundColor : activeOption;
4482
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
4483
+ import_react76.Box,
4484
+ {
4485
+ as: import_framer_motion3.motion.div,
4486
+ transitionTimingFunction: "linear",
4487
+ initial: { padding: "8px" },
4488
+ animate: { padding: isCollapse ? "8px 16px" : "8px" },
4489
+ 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) => {
4490
+ const isActive = active == null ? void 0 : active.includes(item.navLink);
4491
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
4492
+ const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
4493
+ const noChild = !item.children.length;
4494
+ const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
4482
4495
  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
4483
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
4484
- import_react76.AccordionButton,
4485
- {
4486
- "data-test-id": `CTA_button-accordion-${item.title}`,
4487
- p: "0",
4488
- h: "fit-content",
4489
- children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
4496
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
4497
+ const activeOption = isOpen ? "primary.50" : "white";
4498
+ const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
4499
+ const activeParent = isActive ? backgroundColor : activeOption;
4500
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
4501
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
4502
+ import_react76.AccordionButton,
4503
+ {
4504
+ "data-test-id": `CTA_button-accordion-${item.title}`,
4505
+ p: "0",
4506
+ h: "fit-content",
4507
+ children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
4508
+ NavItem,
4509
+ {
4510
+ as: import_framer_motion3.motion.div,
4511
+ transitionTimingFunction: "linear",
4512
+ justifyContent: isCollapse ? "center" : "space-between",
4513
+ isActive,
4514
+ bg: activeParent,
4515
+ "data-test-id": `CTA_nav-item-${item.title}`,
4516
+ onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
4517
+ position: "relative",
4518
+ ...itemStyles,
4519
+ children: [
4520
+ mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
4521
+ !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
4522
+ import_react76.Box,
4523
+ {
4524
+ display: "flex",
4525
+ w: "full",
4526
+ alignItems: "center",
4527
+ justifyContent: "space-between",
4528
+ ml: "2",
4529
+ as: import_framer_motion3.motion.div,
4530
+ transition: "20ms linear",
4531
+ transitionTimingFunction: "linear",
4532
+ initial: { opacity: 0, x: 24 },
4533
+ animate: { opacity: 1, x: 0 },
4534
+ exit: { opacity: 0, x: 16 },
4535
+ children: [
4536
+ /* @__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 }) }),
4537
+ !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
4538
+ import_react76.Box,
4539
+ {
4540
+ display: "flex",
4541
+ boxSize: "3",
4542
+ as: import_framer_motion3.motion.div,
4543
+ transitionTimingFunction: "linear",
4544
+ animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
4545
+ children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon8.ChevronDown, { size: 3 })
4546
+ }
4547
+ )
4548
+ ]
4549
+ }
4550
+ )
4551
+ ]
4552
+ },
4553
+ item.id
4554
+ )
4555
+ },
4556
+ item.id
4557
+ ) }, item.id),
4558
+ 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: [
4559
+ /* @__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: [
4560
+ mappingIcon2.get(item.icon || ""),
4561
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: "span", ml: "2", children: item.title })
4562
+ ] }) }),
4563
+ !!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)(
4564
+ NavItem,
4565
+ {
4566
+ "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
4567
+ isChild: true,
4568
+ isActive: active === submenu.navLink,
4569
+ onClick: () => {
4570
+ setActive(submenu.navLink);
4571
+ onClose();
4572
+ },
4573
+ rounded: "none",
4574
+ ...itemStyles,
4575
+ children: submenu.title
4576
+ },
4577
+ submenu.id
4578
+ )) })
4579
+ ] }) : 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)(
4490
4580
  NavItem,
4491
4581
  {
4492
- as: import_framer_motion3.motion.div,
4493
- justifyContent: isCollapse ? "center" : "space-between",
4494
- isActive,
4495
- bg: activeParent,
4496
- "data-test-id": `CTA_nav-item-${item.title}`,
4497
- onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
4498
- position: "relative",
4582
+ "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
4583
+ justifyContent: "flex-start",
4584
+ isActive: active === item.navLink,
4585
+ onClick: () => {
4586
+ setActive(item.navLink);
4587
+ onClose();
4588
+ },
4589
+ rounded: "none",
4499
4590
  ...itemStyles,
4500
4591
  children: [
4501
4592
  mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
4502
- !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
4503
- import_react76.Box,
4504
- {
4505
- display: "flex",
4506
- w: "full",
4507
- alignItems: "center",
4508
- justifyContent: "space-between",
4509
- ml: "2",
4510
- as: import_framer_motion3.motion.div,
4511
- transition: "20ms ease-in",
4512
- initial: { opacity: 0, x: 24 },
4513
- animate: { opacity: 1, x: 0 },
4514
- exit: { opacity: 0, x: 16 },
4515
- children: [
4516
- /* @__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 }) }),
4517
- !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
4518
- import_react76.Box,
4519
- {
4520
- display: "flex",
4521
- boxSize: "3",
4522
- as: import_framer_motion3.motion.div,
4523
- animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
4524
- children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon8.ChevronDown, { size: 3 })
4525
- }
4526
- )
4527
- ]
4528
- }
4529
- )
4593
+ /* @__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 }) })
4530
4594
  ]
4531
4595
  },
4532
4596
  item.id
4533
- )
4534
- },
4535
- item.id
4536
- ) }, item.id),
4537
- 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: [
4538
- /* @__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: [
4539
- mappingIcon2.get(item.icon || ""),
4540
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: "span", ml: "2", children: item.title })
4541
- ] }) }),
4542
- !!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)(
4543
- NavItem,
4544
- {
4545
- "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
4546
- isChild: true,
4547
- isActive: active === submenu.navLink,
4548
- onClick: () => {
4549
- setActive(submenu.navLink);
4550
- onClose();
4551
- },
4552
- rounded: "none",
4553
- ...itemStyles,
4554
- children: submenu.title
4555
- },
4556
- submenu.id
4557
- )) })
4558
- ] }) : 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)(
4597
+ ) }) }) })
4598
+ ] });
4599
+ } }, item.id),
4600
+ !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)(
4559
4601
  NavItem,
4560
4602
  {
4561
- "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
4562
- justifyContent: "flex-start",
4563
- isActive: active === item.navLink,
4564
- onClick: () => {
4565
- setActive(item.navLink);
4566
- onClose();
4567
- },
4568
- rounded: "none",
4603
+ mt: "1",
4604
+ "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
4605
+ isActive: active === submenu.navLink,
4606
+ isChild: true,
4569
4607
  ...itemStyles,
4570
- children: [
4571
- mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
4572
- /* @__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 }) })
4573
- ]
4608
+ onClick: () => setActive(submenu.navLink),
4609
+ children: submenu.title
4574
4610
  },
4575
- item.id
4576
- ) }) }) })
4611
+ submenu.id
4612
+ )) })
4577
4613
  ] });
4578
- } }, item.id),
4579
- !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)(
4580
- NavItem,
4581
- {
4582
- mt: "1",
4583
- "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
4584
- isActive: active === submenu.navLink,
4585
- isChild: true,
4586
- ...itemStyles,
4587
- onClick: () => setActive(submenu.navLink),
4588
- children: submenu.title
4589
- },
4590
- submenu.id
4591
- )) })
4592
- ] });
4593
- } }, item.id);
4594
- }) }) });
4614
+ } }, item.id);
4615
+ }) })
4616
+ }
4617
+ );
4595
4618
  };
4596
4619
  SidebarMenu.displayName = "SidebarMenu";
4597
4620
  SidebarMenu.defaultProps = {