@sequencing/design-system 1.0.62 → 1.0.63

package/dist/index.d.ts

@@ -476,30 +476,6 @@ interface PopoverProps {
  */
 declare const Popover: (props: PopoverProps) => React.JSX.Element;
 
-interface HeaderLinkData {
-    /** Link path. Ignored if ``items`` prop is non-empty */
-    path: string;
-    /** Link label. */
-    label: string;
-    /** Custom classname. */
-    className?: string;
-    /** Custom onClick, takes priority over main onLinkClick prop. */
-    onClick?: (url: string) => void;
-    /** A list of nested link objects. */
-    items?: Array<{
-        /** Absolute URL, used for outside links. Will be ignored if ``path`` prop is non-empty. */
-        url?: string;
-        /** Relative URL, used for links with the app. Takes precedence over ``url`` prop. */
-        path?: string;
-        /** Link label. */
-        label: string;
-        /** Custom classname. */
-        className?: string;
-        /** Custom onClick, takes priority over main onLinkClick prop. */
-        onClick?: (url: string) => void;
-    }>;
-}
-
 interface User {
     name: string;
     avatarImageUrl?: string;
@@ -508,11 +484,6 @@ interface HeaderFunctions {
     closeMobileMenu: () => void;
 }
 interface HeaderProps {
-    /**
-     * A React node with the links to be rendered on the right side of the header,
-     * it will be rendered after the search bar toggle button (if provided)
-     */
-    auxiliaryLinks?: ReactNode | HeaderLinkData[];
     /**
      * A React node with an optional banner to be rendered above the header.
      * The total header height is dynamic calculated and includes the banner's height
@@ -521,32 +492,28 @@ interface HeaderProps {
     /** Custom css class to customize the stylings */
     customClass?: string;
     /**
-     * A React node to be rendered on the right side of the header when the user is unauthenticated.
-     */
-    loggedOutButton?: ReactNode;
-    /** A React node with the links to be rendered on the left side of the header */
-    mainLinks?: ReactNode | HeaderLinkData[];
-    /** The URL of user's account page */
-    myAccountUrl: string;
-    /**
-     * A React node with the search component containing:
-     * - A button to toggle the visibility of the search bar
-     * - A div with the search bar implementation
-     */
-    searchComponent?: ReactNode;
-    /**
-     * If the user is authenticated, pass their name and avatar image here,
-     * otherwise, `loggedOutButton` will be displayed instead.
+     * The URL of the site's home page. It will be used when the user clicks on the site's logo.
+     *
+     * PLEASE NOTE: If you want to use the SOFT navigation from your framework (React, NextJs, etc), you should
+     * path the `onRequestHomePage` prop and call the navigation method in the callback.
+     * e.g. for NextJs `onRequestHomePage={(url) => router.push(url)}`
+     * WARNING: Do not change or modify url argument inside your callback, because you will have undocumented behavior
+     * with your navigation. Your goal is only call the navigation method with the url argument.
+     * Default value is `/`.
+     * Without the `onRequestHomePage` prop, the component will use the default behavior of the anchor tag.
      */
-    user?: User;
+    homePageUrl?: string;
     /** Displays loading skeleton animation when set to `true` */
     isLoading?: boolean;
-    /** Specify number of skeleton links to display during loading. Default value is 3 */
+    /** The URL of user's account page */
+    myAccountUrl: string;
+    /** Specify number of skeleton links to display during loading. Default value is 6 */
     numberOfSkeletonLinks?: number;
-    /** Router redirect method. Used to support different routers (Next, react-router-dom, etc) */
+    /** Link clicks callback. Use it together with ``preventHardNavigation``
+     * to support different routers (Next, react-router-dom, etc.).
+     * NOTE: When ``preventHardNavigation`` is disabled, it has no effect.
+     */
     onLinkClick?: (url: string) => void;
-    /** Called when an authenticated user clicks on the Sign Out button inside the main right HeaderChip */
-    onRequestSignOut?: () => void;
     /**
      * Called when a user clicks on the site's logo, provide url argument to callback.
      * Typically used to make soft navigation in your framework (React, NextJs, etc).
@@ -554,20 +521,28 @@ interface HeaderProps {
      * url argument is the `homePageUrl` prop value.
      */
     onRequestHomePage?: (url: string) => void;
-    /**
-     * The URL of the site's home page. It will be used when the user clicks on the site's logo.
-     *
-     * PLEASE NOTE: If you want to use the SOFT navigation from your framework (React, NextJs, etc), you should
-     * path the `onRequestHomePage` prop and call the navigation method in the callback.
-     * e.g. for NextJs `onRequestHomePage={(url) => router.push(url)}`
-     * WARNING: Do not change or modify url argument inside your callback, because you will have undocumented behavior
-     * with your navigation. Your goal is only call the navigation method with the url argument.
-     * Default value is `/`.
-     * Without the `onRequestHomePage` prop, the component will use the default behavior of the anchor tag.
-     */
-    homePageUrl?: string;
     /** Called when an authenticated user clicks on the My Account link inside the main right HeaderChip */
     onRequestMyAccount?: () => void;
+    /** Called when an anonymous user clicks on the Sign In button inside the auxiliary links section */
+    onRequestSignIn?: () => void;
+    /** Called when an authenticated user clicks on the Sign Out button inside the main right HeaderChip */
+    onRequestSignOut?: () => void;
+    /**
+     * A React node with the search component containing:
+     * - A button to toggle the visibility of the search bar
+     * - A div with the search bar implementation
+     */
+    searchComponent?: ReactNode;
+    /**
+     * If the user is authenticated, pass their name and avatar image here
+     */
+    user?: User;
+    /**
+     * When enabled, it avoids setting ``document.location.href`` upon link clicks and you will be
+     * responsible for handling the navigation through the ``onLinkClick`` function.
+     * This enables soft navigation for apps that want to support it.
+     */
+    preventHardNavigation?: boolean;
 }
 /**
  * This is the default header for Sequencing.
@@ -575,6 +550,7 @@ interface HeaderProps {
  * and two group of links. The main links are rendered on the left side of the bar,
  * next to the company's logo and the auxiliary links appear on the right side.
  * On the mobile view, all links appear stacked up in a slidein/slide-out menu.
+ * If want to use soft navigation for links, enable the ``preventHardNavigation`` flag.
  * The header is rendered on z-index 5.
  * When logged in, it will render a HeaderChip component with a link to the My Account page
  * and a button for sign-out.
@@ -582,6 +558,28 @@ interface HeaderProps {
  */
 declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HeaderFunctions>>;
 
+interface HeaderLink {
+    /** Absolute or relative link URL. */
+    pathOrUrl?: string;
+    /** Link label. */
+    label: string;
+    /** Custom classname. */
+    className?: string;
+    /** Custom onClick, takes priority over main onLinkClick prop. */
+    onClick?: (url: string) => void;
+    /** A list of nested link objects. */
+    items?: Array<{
+        /** Absolute or relative link URL. */
+        pathOrUrl?: string;
+        /** Link label. */
+        label: string;
+        /** Custom classname. */
+        className?: string;
+        /** Custom onClick, takes priority over main onLinkClick prop. */
+        onClick?: (url: string) => void;
+    }>;
+}
+
 interface FooterProps {
     /** Optional app version to render on hover over the copyright text */
     appVersion?: string;
@@ -612,4 +610,4 @@ interface FooterProps {
  */
 declare const Footer: ({ appVersion, linkGroups, onLinkClick, policiesLinks }: FooterProps) => React.JSX.Element;
 
-export { Accordion, AccordionProps, AppBar, AppBarProps, Button, ButtonProps, DatePicker, DatePickerProps, Dropdown, DropdownFunctions, DropdownProps, Footer, Header, HeaderFunctions, HeaderLinkData, HeaderProps, Link, LinkProps, Modal, ModalProps, PageSelector, Popover, PopoverContent, PopoverContentProps, PopoverProps, Spinner, SpinnerProps, TabMenu, TabMenuProps, TextField, TextFieldProps };
+export { Accordion, AccordionProps, AppBar, AppBarProps, Button, ButtonProps, DatePicker, DatePickerProps, Dropdown, DropdownFunctions, DropdownProps, Footer, Header, HeaderFunctions, HeaderLink, HeaderProps, Link, LinkProps, Modal, ModalProps, PageSelector, Popover, PopoverContent, PopoverContentProps, PopoverProps, Spinner, SpinnerProps, TabMenu, TabMenuProps, TextField, TextFieldProps };