@nulogy/components 8.15.3 → 8.16.0

package/dist/main.js

@@ -41989,6 +41989,14 @@
       }, children));
     };
 
+    var sidebarWidths = {
+      xs: "400px",
+      s: "520px",
+      m: "640px",
+      l: "768px",
+      xl: "1024px"
+    };
+
     var focusFirstElement = function focusFirstElement() {
       var FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
       var focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
@@ -42030,11 +42038,13 @@
       });
     };
 
-    var Sidebar = function Sidebar(_a) {
+    function Sidebar(_a) {
+      var _b;
+
       var _a$p = _a.p,
-          p = _a$p === void 0 ? "x3" : _a$p,
+          p = _a$p === void 0 ? "x2" : _a$p,
           _a$width = _a.width,
-          width = _a$width === void 0 ? "400px" : _a$width,
+          width = _a$width === void 0 ? "xs" : _a$width,
           children = _a.children,
           onClose = _a.onClose,
           title = _a.title,
@@ -42058,8 +42068,11 @@
           disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
           _a$hideCloseButton = _a.hideCloseButton,
           hideCloseButton = _a$hideCloseButton === void 0 ? false : _a$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"]);
+          _a$zIndex = _a.zIndex,
+          zIndex = _a$zIndex === void 0 ? "sidebar" : _a$zIndex,
+          helpText = _a.helpText,
+          renderHelpText = _a.renderHelpText,
+          props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
 
       var closeButton = React.useRef(null);
 
@@ -42072,7 +42085,10 @@
 
       var sideBarRef = React.useRef(null);
       var contentRef = React.useRef(null);
+      var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
       React.useEffect(function () {
+        var _a;
+
         if (closeButton.current && isOpen) {
           if (closeButton && closeButton.current) {
             closeButton.current.focus();
@@ -42081,7 +42097,7 @@
           }
         } else if (shouldUpdateFocus) {
           if (triggerRef) {
-            triggerRef.current.focus();
+            (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
           } else {
             focusFirstElement();
           }
@@ -42141,11 +42157,11 @@
         position: "fixed",
         top: top,
         right: offset,
-        width: typeof width === "string" ? {
+        width: typeof selectedWidth === "string" ? {
           default: "100%",
-          small: width
-        } : width,
-        zIndex: zIndex || "sidebar",
+          small: selectedWidth
+        } : selectedWidth,
+        zIndex: zIndex,
         ref: sideBarRef
       }, props), /*#__PURE__*/React__default["default"].createElement(Flex, {
         p: p,
@@ -42157,9 +42173,14 @@
           overflowBehaviour: "contain"
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex, {
-        justifyContent: "space-between",
-        alignItems: "flex-start",
+        flexDirection: "column",
         pb: "x3"
+      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+        flexDirection: "column",
+        pb: "x2"
+      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+        justifyContent: "space-between",
+        alignItems: "flex-start"
       }, title && /*#__PURE__*/React__default["default"].createElement(Flex, {
         alignItems: "center",
         height: "100%"
@@ -42174,7 +42195,13 @@
         onClick: onClose,
         "data-testid": closeButtonTestId,
         "aria-label": closeButtonAriaLabel || t("close")
-      }))), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
+      }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default["default"].createElement(Text, {
+        pt: "x1",
+        color: "midGrey"
+      }, helpText)), /*#__PURE__*/React__default["default"].createElement(Divider$1, {
+        m: "0 -8px",
+        width: "calc(100% + 16px)"
+      })), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         variants: childVariants,
         animate: isOpen ? "open" : "closed",
         flexGrow: 1,
@@ -42192,7 +42219,7 @@
       }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default["default"].createElement(PreventBodyElementScrolling, {
         scrollRef: sideBarRef
       })));
-    };
+    }
 
     var LoadingAnimation = function LoadingAnimation(_ref) {
       var inactive = _ref.inactive;

package/dist/main.module.js

@@ -41966,6 +41966,14 @@ var Page = function Page(_a) {
   }, children));
 };
 
+var sidebarWidths = {
+  xs: "400px",
+  s: "520px",
+  m: "640px",
+  l: "768px",
+  xl: "1024px"
+};
+
 var focusFirstElement = function focusFirstElement() {
   var FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
   var focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
@@ -42007,11 +42015,13 @@ var SidebarOverlay = function SidebarOverlay(_ref) {
   });
 };
 
-var Sidebar = function Sidebar(_a) {
+function Sidebar(_a) {
+  var _b;
+
   var _a$p = _a.p,
-      p = _a$p === void 0 ? "x3" : _a$p,
+      p = _a$p === void 0 ? "x2" : _a$p,
       _a$width = _a.width,
-      width = _a$width === void 0 ? "400px" : _a$width,
+      width = _a$width === void 0 ? "xs" : _a$width,
       children = _a.children,
       onClose = _a.onClose,
       title = _a.title,
@@ -42035,8 +42045,11 @@ 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,
-      zIndex = _a.zIndex,
-      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex"]);
+      _a$zIndex = _a.zIndex,
+      zIndex = _a$zIndex === void 0 ? "sidebar" : _a$zIndex,
+      helpText = _a.helpText,
+      renderHelpText = _a.renderHelpText,
+      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
 
   var closeButton = useRef(null);
 
@@ -42049,7 +42062,10 @@ var Sidebar = function Sidebar(_a) {
 
   var sideBarRef = useRef(null);
   var contentRef = useRef(null);
+  var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
   useEffect(function () {
+    var _a;
+
     if (closeButton.current && isOpen) {
       if (closeButton && closeButton.current) {
         closeButton.current.focus();
@@ -42058,7 +42074,7 @@ var Sidebar = function Sidebar(_a) {
       }
     } else if (shouldUpdateFocus) {
       if (triggerRef) {
-        triggerRef.current.focus();
+        (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       } else {
         focusFirstElement();
       }
@@ -42118,11 +42134,11 @@ var Sidebar = function Sidebar(_a) {
     position: "fixed",
     top: top,
     right: offset,
-    width: typeof width === "string" ? {
+    width: typeof selectedWidth === "string" ? {
       default: "100%",
-      small: width
-    } : width,
-    zIndex: zIndex || "sidebar",
+      small: selectedWidth
+    } : selectedWidth,
+    zIndex: zIndex,
     ref: sideBarRef
   }, props), /*#__PURE__*/React__default.createElement(Flex, {
     p: p,
@@ -42134,9 +42150,14 @@ var Sidebar = function Sidebar(_a) {
       overflowBehaviour: "contain"
     }
   }, /*#__PURE__*/React__default.createElement(Flex, {
-    justifyContent: "space-between",
-    alignItems: "flex-start",
+    flexDirection: "column",
     pb: "x3"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column",
+    pb: "x2"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    justifyContent: "space-between",
+    alignItems: "flex-start"
   }, title && /*#__PURE__*/React__default.createElement(Flex, {
     alignItems: "center",
     height: "100%"
@@ -42151,7 +42172,13 @@ var Sidebar = function Sidebar(_a) {
     onClick: onClose,
     "data-testid": closeButtonTestId,
     "aria-label": closeButtonAriaLabel || t("close")
-  }))), /*#__PURE__*/React__default.createElement(AnimatedBox, {
+  }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default.createElement(Text, {
+    pt: "x1",
+    color: "midGrey"
+  }, helpText)), /*#__PURE__*/React__default.createElement(Divider$1, {
+    m: "0 -8px",
+    width: "calc(100% + 16px)"
+  })), /*#__PURE__*/React__default.createElement(AnimatedBox, {
     variants: childVariants,
     animate: isOpen ? "open" : "closed",
     flexGrow: 1,
@@ -42169,7 +42196,7 @@ var Sidebar = function Sidebar(_a) {
   }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, {
     scrollRef: sideBarRef
   })));
-};
+}
 
 var LoadingAnimation = function LoadingAnimation(_ref) {
   var inactive = _ref.inactive;

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

@@ -1,20 +1,25 @@
 import React, { RefObject } from "react";
 import { AnimatedBoxProps } from "../Box/Box";
-type SidebarProps = AnimatedBoxProps & {
+type PredefinedSidebarWidth = "xs" | "s" | "m" | "l" | "xl";
+type SidebarWidth = PredefinedSidebarWidth | (string & {});
+type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
     children?: React.ReactNode;
-    onClose?: (arg: any) => any;
+    onClose?: () => void;
     title?: string;
     isOpen?: boolean;
     footer?: React.ReactNode;
     closeButtonTestId?: string;
     closeButtonAriaLabel?: string;
     offset?: string;
-    triggerRef?: RefObject<any>;
+    triggerRef?: RefObject<HTMLInputElement | HTMLButtonElement>;
     duration?: number;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
     disableScroll?: boolean;
     hideCloseButton?: boolean;
+    width?: SidebarWidth;
+    helpText?: React.ReactNode;
+    renderHelpText?: () => React.ReactNode;
 };
-declare const Sidebar: React.FC<SidebarProps>;
+declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): React.JSX.Element;
 export default Sidebar;

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

@@ -16,3 +16,7 @@ export declare const WithCustomOffset: () => React.JSX.Element;
 export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
 export declare const WithoutCloseButton: () => React.JSX.Element;
 export declare const WithALongTitle: () => React.JSX.Element;
+export declare const WithDifferentWidths: () => React.JSX.Element;
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithOtherElementsInHelpText: () => React.JSX.Element;
+export declare const WithARenderedHelpText: () => React.JSX.Element;

package/package.json

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