kui-complex 0.0.82 → 0.0.83

package/index.d.ts

@@ -93,23 +93,23 @@ declare const CalendarStandardHeader: React.ForwardRefExoticComponent<CalendarHe
 
 declare const DesktopInputWithMonthPicker: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
 
-type TabPanelVariants = "grey" | "white"
-
-type MenuPanelProps = {
-  tabs: { label: string }[]
-  tabPanels: ReactNode[]
-  paths: string[]
-  activeTab: number | null
-  variant?: TabPanelVariants
+type TabPanelVariants = "grey" | "white"
+
+type MenuPanelProps = {
+  tabs: string[]
+  tabPanels: ReactNode[]
+  paths: string[]
+  activeTab: number | null
+  variant?: TabPanelVariants
 }
 
-type DesktopMenuPanelProps = {
-  tabs: { label: string }[]
-  active: number | null
-  handleClick: (index: number) => void
-  variant: TabPanelVariants
-  isScrolling: boolean
-  setIsScrolling: (val: boolean) => void
+type DesktopMenuPanelProps = {
+  tabs: string[]
+  active: number | null
+  handleClick: (index: number) => void
+  variant: TabPanelVariants
+  isScrolling: boolean
+  setIsScrolling: (val: boolean) => void
 }
 
 /** @jsxImportSource @emotion/react */
@@ -179,14 +179,14 @@ declare const InputWithDatePicker: React.ForwardRefExoticComponent<Pick<{
 
 declare const InputWithMonthPicker: <T extends FieldValues>(props: any) => JSX.Element;
 
-type TabItemProps = {
-  tab: { label: string }
-  active: number | null
-  index: number
-  handleClick: (index: number) => void
-  offset: number
-  isScrolling: boolean
-  setIsScrolling: (val: boolean) => void
+type TabItemProps = {
+  tab: string
+  active: number | null
+  index: number
+  handleClick: (index: number) => void
+  offset: number
+  isScrolling: boolean
+  setIsScrolling: (val: boolean) => void
 }
 
 /** @jsxImportSource @emotion/react */
@@ -199,13 +199,13 @@ declare const MenuPanel: React.ForwardRefExoticComponent<MenuPanelProps & React.
 
 declare const MobileInputWithMonthPicker: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
 
-type MobileMenuPanelProps = {
-  tabs: { label: string }[]
-  active: number | null
-  handleClick: (index: number) => void
-  variant: TabPanelVariants
-  isScrolling: boolean
-  setIsScrolling: (val: boolean) => void
+type MobileMenuPanelProps = {
+  tabs: string[]
+  active: number | null
+  handleClick: (index: number) => void
+  variant: TabPanelVariants
+  isScrolling: boolean
+  setIsScrolling: (val: boolean) => void
 }
 
 /** @jsxImportSource @emotion/react */

package/index.js

@@ -484,7 +484,7 @@ var MenuItem = forwardRef(function (_a, ref) {
     };
     useEffect(function () {
         if (active === index) {
-            scroller.scrollTo(tab.label, { offset: offset });
+            scroller.scrollTo(tab, { offset: offset });
         }
         Events.scrollEvent.register("begin", function (to, element) {
             startScrolling();
@@ -500,7 +500,7 @@ var MenuItem = forwardRef(function (_a, ref) {
             Events.scrollEvent.remove("end");
         };
     }, []);
-    return (jsx$1(Link$1, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$2, __assign({ ref: ref }, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
+    return (jsx$1(Link$1, __assign({ to: tab, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$2, __assign({ ref: ref }, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab })) })) })));
 });
 var ButtonWrapper$2 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"], ["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"])));
 var disabledStyles = css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), theme.palette.grey.seventy);
@@ -508,7 +508,7 @@ var templateObject_1$s, templateObject_2$h;
 
 var DesktopMenuPanel = forwardRef(function (_a, ref) {
     var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
-    return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
+    return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab) }), index)); }) })));
 });
 var Wrapper$3 = styled(Grid)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), theme.palette.background.light1);
 var templateObject_1$r;
@@ -863,7 +863,7 @@ var MobileMenuPanel = forwardRef(function (_a, ref) {
         }, 16);
         handleClick(index);
     };
-    return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
+    return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab) }, index)); }) })) })));
 });
 var Wrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"])), theme.palette.background.light1);
 var SlideWrapper = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"], ["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"])));
@@ -912,7 +912,7 @@ var MenuPanel = forwardRef(function (_a, ref) {
     if (width === 0) {
         return null;
     }
-    return (jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsx$1(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsx$1(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsx$1("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsx$1(Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] })));
+    return (jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsx$1(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsx$1(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsx$1("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsx$1(Element, __assign({ name: tabs[index], "data-index": index }, { children: item }), index) }), index)); })] })));
 });
 MenuPanel.defaultProps = {
     variant: "grey",