@sendoutcards/quantum-design-ui 1.8.13 → 1.8.15

package/dist/index.es.js

@@ -15081,7 +15081,8 @@ var OptionContent = function (props) {
   } : {};
   return jsx(React.Fragment, null, props.type === 'text' ? jsx(Text, _extends({
     content: props.label,
-    type: "caption"
+    type: "caption",
+    whiteSpace: "nowrap"
   }, boldTextProp)) : props.type === 'graphic' ? jsx(Div, {
     display: "flex",
     justifyContent: "center",
@@ -15119,7 +15120,8 @@ var OptionContent = function (props) {
       left: 'x1'
     },
     content: props.label.text,
-    type: "caption"
+    type: "caption",
+    whiteSpace: "nowrap"
   }, boldTextProp))));
 };
 
@@ -17465,7 +17467,7 @@ var Logo = function (_a) {
     color: color,
     width: (_d = secondaryLogo === null || secondaryLogo === void 0 ? void 0 : secondaryLogo.width) !== null && _d !== void 0 ? _d : width,
     type: "fullLogo"
-  })), "company")));
+  })), "mechanism")));
 };
 
 var getDifference = function (currentDate, endDate) {
@@ -17757,7 +17759,7 @@ var LinkColumn = function (_a) {
   }, jsx(VStack, {
     gap: "x1_5"
   }, linkColumn.links.map(function (subLink, index) {
-    return jsx(Anchor, {
+    return typeof subLink.title === 'string' ? jsx(Anchor, {
       key: index,
       color: subLinkColor,
       cursor: 'pointer',
@@ -17766,7 +17768,14 @@ var LinkColumn = function (_a) {
       target: subLink.target,
       size: "small",
       onClick: subLink.onClick
-    });
+    }) : jsx(Anchor, {
+      key: index,
+      cursor: 'pointer',
+      href: subLink.href,
+      target: subLink.target,
+      size: "small",
+      onClick: subLink.onClick
+    }, subLink.title);
   })))));
 };
 
@@ -17807,7 +17816,7 @@ var DropDownMenu = function (_a) {
     weight: "semiBold",
     lineHeight: 1.2
   }), linkColumn.links.map(function (link) {
-    return link.icon ? jsx(IconLink, {
+    return typeof link.title === 'string' ? link.icon ? jsx(IconLink, {
       icon: link.icon,
       title: link.title,
       size: 'small',
@@ -17815,9 +17824,12 @@ var DropDownMenu = function (_a) {
     }) : jsx(Anchor, {
       title: link.title,
       href: link.href,
-      onClick: link.onClick ? link.onClick : function () {},
+      onClick: link.onClick,
       color: 'primaryBody'
-    });
+    }) : jsx(Anchor, {
+      href: link.href,
+      onClick: link.onClick
+    }, link.title);
   }))));
 };
 
@@ -21491,18 +21503,23 @@ var MobileView = function (_a) {
         }, jsx(VStack, {
           gap: "x0"
         }, links && links.map(function (item, i) {
-          return isLinkType(item) ? jsx(Anchor, _extends({
+          return isLinkType(item) ? typeof item.title === 'string' ? jsx(Anchor, _extends({
             inset: {
               horizontal: 'x3'
             },
             key: "pusher-anchor-" + i,
             target: "_blank"
           }, item, {
+            title: item.title,
             height: "70px",
             display: "flex",
             alignItems: "center",
             style: borderBottom
-          })) : jsx(Div, {
+          })) : jsx(Anchor, {
+            href: item.href,
+            onClick: item.onClick,
+            target: item.target
+          }, item.title) : jsx(Div, {
             cursor: "pointer",
             display: "flex",
             justifyContent: "space-between",
@@ -21575,7 +21592,7 @@ var AccordionSection = function (_a) {
       body: jsx(Div, {
         width: "100%"
       }, links.map(function (link, i) {
-        return jsx(Div, {
+        return typeof link.title === 'string' ? jsx(Div, {
           display: "flex",
           alignItems: "center",
           inset: {
@@ -21583,9 +21600,13 @@ var AccordionSection = function (_a) {
             vertical: 'x1'
           },
           key: "accordion-section-" + i
-        }, jsx(Anchor, _extends({
+        }, jsx(Anchor, _extends({}, link, {
+          title: link.title,
           target: "_blank"
-        }, link)));
+        }))) : jsx(Anchor, {
+          href: link.href,
+          onClick: link.onClick
+        }, link.title);
       }))
     };
   }
@@ -21609,30 +21630,30 @@ var styles$6 = {
 var templateObject_1$7;
 
 var StaticNavigation = function (_a) {
-  var _b;
+  var _b, _c;
   var accountSection = _a.accountSection,
     logo = _a.logo,
     links = _a.links,
-    _c = _a.zIndex,
-    zIndex = _c === void 0 ? 3 : _c,
+    _d = _a.zIndex,
+    zIndex = _d === void 0 ? 3 : _d,
     openValueOverride = _a.openValueOverride,
-    _d = _a.drawerOffset,
-    drawerOffset = _d === void 0 ? 60 : _d,
+    _e = _a.drawerOffset,
+    drawerOffset = _e === void 0 ? 60 : _e,
     isFrosted = _a.isFrosted,
-    menuDropdown = _a.menuDropdown;
-  var _e = useState(0),
-    selectedTab = _e[0],
-    setSelectedTab = _e[1];
-  var _f = useState(false),
-    isOpen = _f[0],
-    setIsOpen = _f[1];
-  var _g = React.useState(false),
-    isMenuOpen = _g[0],
-    setIsMenuOpen = _g[1];
+    menuDropdownLinks = _a.menuDropdownLinks;
+  var _f = useState(0),
+    selectedTab = _f[0],
+    setSelectedTab = _f[1];
+  var _g = useState(false),
+    isOpen = _g[0],
+    setIsOpen = _g[1];
+  var _h = React.useState(false),
+    isMenuOpen = _h[0],
+    setIsMenuOpen = _h[1];
   var size = useDeviceSize().device;
-  var _h = useResizeObserver(),
-    ref = _h.ref,
-    height = _h.height;
+  var _j = useResizeObserver(),
+    ref = _j.ref,
+    height = _j.height;
   var hocs = useEntities().hocs;
   var isDropdownLinkType = function (valueToCheck) {
     var dropDownLink = valueToCheck;
@@ -21663,7 +21684,7 @@ var StaticNavigation = function (_a) {
     alignItems: "center",
     flexDirection: "row",
     columnGap: "x1"
-  }, menuDropdown && jsx(Div, {
+  }, menuDropdownLinks && jsx(Div, {
     maxWidth: "300px"
   }, jsx("button", {
     style: {
@@ -21681,14 +21702,21 @@ var StaticNavigation = function (_a) {
     name: "promptingsIcon",
     primaryColor: "primaryHeadingText",
     size: "xSmall"
-  }), jsx(Icon, {
+  }), jsx(Div, {
+    style: {
+      transform: isMenuOpen ? 'rotate(90deg)' : 'rotate(-90deg)',
+      transition: 'transform 0.3s ease-in-out'
+    }
+  }, jsx(Icon, {
     name: "chevron",
-    orientation: 'down',
     primaryColor: "primaryHeadingText",
     size: "xSmall"
-  }))), jsx(DropDownMenu, _extends({}, menuDropdown, {
-    isOpen: isMenuOpen
-  }))), jsx(Logo, logo)), links && !isMobile && jsx(Flex, {
+  })))), jsx(DropDownMenu, {
+    linkColumn: menuDropdownLinks.linkColumn,
+    isOpen: isMenuOpen,
+    top: (_b = menuDropdownLinks.top) !== null && _b !== void 0 ? _b : 40,
+    left: menuDropdownLinks.left
+  })), jsx(Logo, logo)), links && !isMobile && jsx(Flex, {
     height: "100%",
     width: "100%",
     alignItems: "center",
@@ -21698,7 +21726,12 @@ var StaticNavigation = function (_a) {
       inset: {
         horizontal: size === 'large' ? 'x1' : 'x2'
       }
-    }, isDropdownLinkType(link) ? jsx(Div, {
+    }, 'href' in link && typeof link.title === 'string' ? jsx(NavigationLink, {
+      title: link.title,
+      isActive: selectedTab === index && isOpen,
+      href: link.href,
+      target: link.target
+    }) : isDropdownLinkType(link) ? jsx(Div, {
       onHoverStart: function () {
         setIsOpen(true);
         setSelectedTab(index);
@@ -21710,12 +21743,11 @@ var StaticNavigation = function (_a) {
     }, jsx(NavigationLink, {
       title: link.title,
       isActive: selectedTab === index && isOpen
-    })) : jsx(NavigationLink, {
-      title: link.title,
-      isActive: selectedTab === index && isOpen,
+    })) : jsx(Anchor, {
       href: link.href,
+      onClick: link.onClick,
       target: link.target
-    }));
+    }, link.title));
   })), accountSection && jsx(Div, {
     display: "flex"
   }, accountSection)), jsx(Div, {
@@ -21732,7 +21764,7 @@ var StaticNavigation = function (_a) {
     onClick: function () {
       return setIsOpen(false);
     },
-    openValue: openValueOverride ? openValueOverride : (_b = height && height + 64 < 248 ? 248 : height && height + 64) !== null && _b !== void 0 ? _b : 280,
+    openValue: openValueOverride ? openValueOverride : (_c = height && height + 64 < 248 ? 248 : height && height + 64) !== null && _c !== void 0 ? _c : 280,
     isTabHidden: true,
     showTab: false,
     zIndex: 10
@@ -21756,12 +21788,12 @@ var StaticNavigation = function (_a) {
         onClick: featuredColumn.onClick,
         href: featuredColumn.href,
         target: featuredColumn.target
-      }, jsx(Text, {
+      }, typeof featuredColumn.title === 'string' ? jsx(Text, {
         type: "body",
         content: featuredColumn.title,
         color: "primaryHeading",
         weight: "semiBold"
-      }));
+      }) : featuredColumn.title);
     })), jsx(Div, {
       height: "160px"
     }, jsx(Separator, {

package/dist/src/organisms/staticNavigation/staticNavigation.d.ts

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { TextColor, IconType } from "../../exports/atoms";
-import { LogoProps, DropDownMenuProps } from "../../exports/molecules";
+import { LogoProps } from "../../exports/molecules";
 export declare type Target = '_self' | '_blank' | '_parent' | '_top' | undefined;
 export declare type Link = {
-    title: string;
+    title: React.ReactNode;
     href: string;
     onClick?: () => void;
     icon?: IconType;
@@ -28,6 +28,10 @@ export declare type StaticNavigationProps = {
     openValueOverride?: number;
     drawerOffset?: number;
     isFrosted?: boolean;
-    menuDropdown?: DropDownMenuProps;
+    menuDropdownLinks?: {
+        linkColumn: LinkColumnType;
+        top?: number;
+        left?: number;
+    };
 };
 export declare const StaticNavigation: FC<StaticNavigationProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.8.13",
+  "version": "1.8.15",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",