@nulogy/components 6.1.3 → 6.1.7

package/dist/main.js

@@ -16588,9 +16588,12 @@
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
 
-    return /*#__PURE__*/React__default['default'].createElement(Box, null, /*#__PURE__*/React__default['default'].createElement(Link, {
+    return /*#__PURE__*/React__default['default'].createElement(Flex, {
+      ml: "x2"
+    }, /*#__PURE__*/React__default['default'].createElement(Link, {
       as: "button",
       color: "darkGrey",
+      lineHeight: "0",
       hover: "blue",
       onClick: onClick,
       "aria-label": ariaLabel || t("close")
@@ -16607,12 +16610,11 @@
         title = _a.title,
         _a$type = _a.type,
         type = _a$type === void 0 ? "informative" : _a$type,
-        className = _a.className,
         closeAriaLabel = _a.closeAriaLabel,
         onClose = _a.onClose,
         _a$controlled = _a.controlled,
         controlled = _a$controlled === void 0 ? false : _a$controlled,
-        props = __rest(_a, ["children", "isCloseable", "title", "type", "className", "closeAriaLabel", "onClose", "controlled"]);
+        props = __rest(_a, ["children", "isCloseable", "title", "type", "closeAriaLabel", "onClose", "controlled"]);
 
     var _useState = React.useState(true),
         isVisible = _useState[0],
@@ -16633,8 +16635,7 @@
       borderLeftWidth: "4px",
       borderLeftColor: alertColours[type].borderColor,
       borderLeftStyle: "solid",
-      role: "alert",
-      className: className
+      role: "alert"
     }, props), type === "danger" && /*#__PURE__*/React__default['default'].createElement(Icon, {
       icon: "error",
       mr: "x1",
@@ -27920,36 +27921,39 @@
           children = _this$props.children,
           onTabClick = _this$props.onTabClick;
       var selectedIndex = this.getSelectedIndex();
-      var tabs = React__default['default'].Children.map(children, function (tab, index) {
-        return /*#__PURE__*/React__default['default'].cloneElement(tab, {
-          onClick: function onClick(e) {
-            setFocusToTab(index);
+      return React__default['default'].Children.map(children, function (tab, index) {
+        if (tab) {
+          return /*#__PURE__*/React__default['default'].cloneElement(tab, {
+            onClick: function onClick(e) {
+              var _a, _b;
 
-            if (tab.props.onClick) {
-              tab.props.onClick(e);
-            }
+              setFocusToTab(index);
 
-            if (onTabClick) {
-              onTabClick(e, index);
-            } else {
-              _this2.handleTabClick(index);
+              if ((_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                (_b = tab === null || tab === void 0 ? void 0 : tab.props) === null || _b === void 0 ? void 0 : _b.onClick(e);
+              }
+
+              if (onTabClick) {
+                onTabClick(e, index);
+              } else {
+                _this2.handleTabClick(index);
+              }
+            },
+            onFocus: function onFocus(e) {
+              e.stopPropagation();
+            },
+            onKeyDown: handleArrowNavigation,
+            index: index,
+            tabIndex: index === focusedIndex ? 0 : -1,
+            selected: index === selectedIndex,
+            "aria-selected": index === selectedIndex,
+            fullWidth: fitted,
+            ref: function ref(_ref2) {
+              _this2.tabRefs[index] = _ref2;
             }
-          },
-          onFocus: function onFocus(e) {
-            e.stopPropagation();
-          },
-          onKeyDown: handleArrowNavigation,
-          index: index,
-          tabIndex: index === focusedIndex ? 0 : -1,
-          selected: index === selectedIndex,
-          "aria-selected": index === selectedIndex,
-          fullWidth: fitted,
-          ref: function ref(_ref2) {
-            _this2.tabRefs[index] = _ref2;
-          }
-        });
+          });
+        }
       });
-      return tabs;
     };
 
     _proto.getTabContent = function getTabContent() {
@@ -27958,6 +27962,8 @@
           renderTabContentOnlyWhenSelected = _this$props2.renderTabContentOnlyWhenSelected;
       var selectedIndex = this.getSelectedIndex();
       var tabContent = React__default['default'].Children.map(children, function (tab, index) {
+        var _a;
+
         var selected = index === selectedIndex;
 
         if (renderTabContentOnlyWhenSelected && !selected) {
@@ -27967,7 +27973,7 @@
             "aria-hidden": !selected,
             hidden: !selected,
             selected: selected
-          }, tab.props.children);
+          }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children);
         }
       });
       return tabContent;
@@ -44066,9 +44072,9 @@
         testId = _a["data-testid"],
         props = __rest(_a, ["children", "element", "indicator", "maxCharacters", "showTooltip", "tooltipProps", "data-testid"]);
 
-    var innerText = children;
+    var innerText = children !== null && children !== void 0 ? children : "";
     var requiresTruncation = innerText.length > maxCharacters;
-    var truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : children;
+    var truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : innerText;
     var hasTooltip = showTooltip && requiresTruncation;
     return /*#__PURE__*/React__default['default'].createElement(MaybeTooltip, Object.assign({
       showTooltip: hasTooltip,
@@ -52409,6 +52415,8 @@
     var transitionDuration = _ref.transitionDuration,
         top = _ref.top,
         transparent = _ref.transparent,
+        _ref$zIndex = _ref.zIndex,
+        zIndex = _ref$zIndex === void 0 ? 799 : _ref$zIndex,
         onClick = _ref.onClick;
     return /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
       position: "fixed",
@@ -52416,7 +52424,7 @@
       bottom: "0",
       left: "0",
       right: "0",
-      zIndex: "799",
+      zIndex: zIndex,
       bg: !transparent && "rgba(18, 43, 71, 0.5)",
       initial: {
         opacity: 0
@@ -52463,7 +52471,8 @@
         disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
         _a$hideCloseButton = _a.hideCloseButton,
         hideCloseButton = _a$hideCloseButton === void 0 ? false : _a$hideCloseButton,
-        props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton"]);
+        zIndex = _a.zIndex,
+        props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex"]);
 
     var closeButton = React.useRef(null);
 
@@ -52528,6 +52537,7 @@
       top: top,
       transparent: !overlay,
       transitionDuration: duration,
+      zIndex: zIndex,
       onClick: closeOnOutsideClick && isOpen && onClose
     })), /*#__PURE__*/React__default['default'].createElement(AnimatedBox, Object.assign({
       role: "dialog",
@@ -52549,7 +52559,7 @@
         default: "100%",
         small: width
       } : width,
-      zIndex: "sidebar",
+      zIndex: zIndex || "sidebar",
       ref: sideBarRef
     }, props), /*#__PURE__*/React__default['default'].createElement(Flex, {
       p: p,

package/dist/main.module.js

@@ -16562,9 +16562,12 @@ var CloseButton = function CloseButton(_ref3) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  return /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Link, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    ml: "x2"
+  }, /*#__PURE__*/React__default.createElement(Link, {
     as: "button",
     color: "darkGrey",
+    lineHeight: "0",
     hover: "blue",
     onClick: onClick,
     "aria-label": ariaLabel || t("close")
@@ -16581,12 +16584,11 @@ var Alert = styled(function (_a) {
       title = _a.title,
       _a$type = _a.type,
       type = _a$type === void 0 ? "informative" : _a$type,
-      className = _a.className,
       closeAriaLabel = _a.closeAriaLabel,
       onClose = _a.onClose,
       _a$controlled = _a.controlled,
       controlled = _a$controlled === void 0 ? false : _a$controlled,
-      props = __rest(_a, ["children", "isCloseable", "title", "type", "className", "closeAriaLabel", "onClose", "controlled"]);
+      props = __rest(_a, ["children", "isCloseable", "title", "type", "closeAriaLabel", "onClose", "controlled"]);
 
   var _useState = useState(true),
       isVisible = _useState[0],
@@ -16607,8 +16609,7 @@ var Alert = styled(function (_a) {
     borderLeftWidth: "4px",
     borderLeftColor: alertColours[type].borderColor,
     borderLeftStyle: "solid",
-    role: "alert",
-    className: className
+    role: "alert"
   }, props), type === "danger" && /*#__PURE__*/React__default.createElement(Icon, {
     icon: "error",
     mr: "x1",
@@ -27894,36 +27895,39 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         children = _this$props.children,
         onTabClick = _this$props.onTabClick;
     var selectedIndex = this.getSelectedIndex();
-    var tabs = React__default.Children.map(children, function (tab, index) {
-      return /*#__PURE__*/React__default.cloneElement(tab, {
-        onClick: function onClick(e) {
-          setFocusToTab(index);
+    return React__default.Children.map(children, function (tab, index) {
+      if (tab) {
+        return /*#__PURE__*/React__default.cloneElement(tab, {
+          onClick: function onClick(e) {
+            var _a, _b;
 
-          if (tab.props.onClick) {
-            tab.props.onClick(e);
-          }
+            setFocusToTab(index);
 
-          if (onTabClick) {
-            onTabClick(e, index);
-          } else {
-            _this2.handleTabClick(index);
+            if ((_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+              (_b = tab === null || tab === void 0 ? void 0 : tab.props) === null || _b === void 0 ? void 0 : _b.onClick(e);
+            }
+
+            if (onTabClick) {
+              onTabClick(e, index);
+            } else {
+              _this2.handleTabClick(index);
+            }
+          },
+          onFocus: function onFocus(e) {
+            e.stopPropagation();
+          },
+          onKeyDown: handleArrowNavigation,
+          index: index,
+          tabIndex: index === focusedIndex ? 0 : -1,
+          selected: index === selectedIndex,
+          "aria-selected": index === selectedIndex,
+          fullWidth: fitted,
+          ref: function ref(_ref2) {
+            _this2.tabRefs[index] = _ref2;
           }
-        },
-        onFocus: function onFocus(e) {
-          e.stopPropagation();
-        },
-        onKeyDown: handleArrowNavigation,
-        index: index,
-        tabIndex: index === focusedIndex ? 0 : -1,
-        selected: index === selectedIndex,
-        "aria-selected": index === selectedIndex,
-        fullWidth: fitted,
-        ref: function ref(_ref2) {
-          _this2.tabRefs[index] = _ref2;
-        }
-      });
+        });
+      }
     });
-    return tabs;
   };
 
   _proto.getTabContent = function getTabContent() {
@@ -27932,6 +27936,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         renderTabContentOnlyWhenSelected = _this$props2.renderTabContentOnlyWhenSelected;
     var selectedIndex = this.getSelectedIndex();
     var tabContent = React__default.Children.map(children, function (tab, index) {
+      var _a;
+
       var selected = index === selectedIndex;
 
       if (renderTabContentOnlyWhenSelected && !selected) {
@@ -27941,7 +27947,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           "aria-hidden": !selected,
           hidden: !selected,
           selected: selected
-        }, tab.props.children);
+        }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children);
       }
     });
     return tabContent;
@@ -44040,9 +44046,9 @@ var TruncatedTextMaxCharacters = function TruncatedTextMaxCharacters(_a) {
       testId = _a["data-testid"],
       props = __rest(_a, ["children", "element", "indicator", "maxCharacters", "showTooltip", "tooltipProps", "data-testid"]);
 
-  var innerText = children;
+  var innerText = children !== null && children !== void 0 ? children : "";
   var requiresTruncation = innerText.length > maxCharacters;
-  var truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : children;
+  var truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : innerText;
   var hasTooltip = showTooltip && requiresTruncation;
   return /*#__PURE__*/React__default.createElement(MaybeTooltip, Object.assign({
     showTooltip: hasTooltip,
@@ -52383,6 +52389,8 @@ var SidebarOverlay = function SidebarOverlay(_ref) {
   var transitionDuration = _ref.transitionDuration,
       top = _ref.top,
       transparent = _ref.transparent,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 799 : _ref$zIndex,
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
     position: "fixed",
@@ -52390,7 +52398,7 @@ var SidebarOverlay = function SidebarOverlay(_ref) {
     bottom: "0",
     left: "0",
     right: "0",
-    zIndex: "799",
+    zIndex: zIndex,
     bg: !transparent && "rgba(18, 43, 71, 0.5)",
     initial: {
       opacity: 0
@@ -52437,7 +52445,8 @@ var Sidebar = function Sidebar(_a) {
       disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
       _a$hideCloseButton = _a.hideCloseButton,
       hideCloseButton = _a$hideCloseButton === void 0 ? false : _a$hideCloseButton,
-      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton"]);
+      zIndex = _a.zIndex,
+      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex"]);
 
   var closeButton = useRef(null);
 
@@ -52502,6 +52511,7 @@ var Sidebar = function Sidebar(_a) {
     top: top,
     transparent: !overlay,
     transitionDuration: duration,
+    zIndex: zIndex,
     onClick: closeOnOutsideClick && isOpen && onClose
   })), /*#__PURE__*/React__default.createElement(AnimatedBox, Object.assign({
     role: "dialog",
@@ -52523,7 +52533,7 @@ var Sidebar = function Sidebar(_a) {
       default: "100%",
       small: width
     } : width,
-    zIndex: "sidebar",
+    zIndex: zIndex || "sidebar",
     ref: sideBarRef
   }, props), /*#__PURE__*/React__default.createElement(Flex, {
     p: p,

package/dist/src/Alert/Alert.d.ts

@@ -11,5 +11,5 @@ export declare type AlertProps = BoxProps & {
     controlled?: boolean;
     style?: React.CSSProperties;
 };
-declare const Alert: import("styled-components").StyledComponent<({ children, isCloseable, title, type, className, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const Alert: import("styled-components").StyledComponent<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export default Alert;

package/dist/src/Layout/Sidebar.d.ts

@@ -16,5 +16,5 @@ declare type SidebarProps = AnimatedBoxProps & {
     disableScroll?: boolean;
     hideCloseButton?: boolean;
 };
-declare const Sidebar: ({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, ...props }: SidebarProps) => JSX.Element;
+declare const Sidebar: ({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, ...props }: SidebarProps) => JSX.Element;
 export default Sidebar;

package/dist/src/Link/Link.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ColorProps, SpaceProps, LayoutProps } from "styled-system";
+import { ColorProps, SpaceProps, LayoutProps, TypographyProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-export declare type LinkProps = React.ComponentPropsWithRef<"a"> & ColorProps & SpaceProps & LayoutProps & {
+export declare type LinkProps = React.ComponentPropsWithRef<"a"> & ColorProps & SpaceProps & LayoutProps & TypographyProps & {
     className?: string;
     underline?: boolean;
     hover?: string;

package/dist/src/Tabs/TabScrollIndicators.d.ts

@@ -11,10 +11,6 @@ declare type TabScrollIndicatorsProps = {
 declare type TabScrollIndicatorsState = {
     contentHiddenLeft: boolean;
     contentHiddenRight: boolean;
-    contentHiddenLeft: boolean;
-    contentHiddenRight: boolean;
-    contentHiddenLeft: boolean;
-    contentHiddenRight: boolean;
 };
 declare class TabScrollIndicators extends React.Component<TabScrollIndicatorsProps, TabScrollIndicatorsState> {
     constructor(props: any);

package/dist/src/Tabs/Tabs.d.ts

@@ -9,7 +9,6 @@ export declare type TabsProps = {
 };
 export declare type TabsState = {
     selectedIndex: any;
-    selectedIndex: any;
 };
 declare class Tabs extends React.Component<TabsProps, TabsState> {
     constructor(props: any);

package/dist/src/Tabs/Tabs.story.d.ts

@@ -51,3 +51,9 @@ export declare const WithContentLoadedOnSelection: {
         name: string;
     };
 };
+export declare const WithConditionallyRenderedTabs: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Toast/Toast.story.d.ts

@@ -22,6 +22,12 @@ export declare const WithCloseButton: {
         name: string;
     };
 };
+export declare const CloseableWithMultiLineMessage: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const MultipleCloseableToastsExample: {
     (): JSX.Element;
     story: {

package/dist/src/TruncatedText/TruncatedText.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import PropTypes from "prop-types";
-import { TooltipProps } from '../Tooltip/Tooltip';
+import { TooltipProps } from "../Tooltip/Tooltip";
 declare type TruncatedTextProps = {
     children?: string;
     indicator?: string;

package/dist/src/TruncatedText/TruncatedText.story.d.ts

@@ -45,3 +45,9 @@ export declare const FullWidth: {
         name: string;
     };
 };
+export declare const WithoutChildren: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.1.3",
+  "version": "6.1.7",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {