@sequencing/design-system 1.0.48 → 1.0.49

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 import React, { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';
 
+type CustomLink = {
+    label: string;
+    url?: string;
+    onClick?: (url?: string) => void;
+};
 interface LinkProps {
     /** Custom css class to customize the stylings */
     customClass?: string;
@@ -20,12 +25,12 @@ interface LinkProps {
     variant?: "primary" | "secondary";
     /** Called when a click is performed. It receives the href set on the ``href`` property.
      * Use this handler to perform SPA navigation with you framework's router system.
-     * The returned ``href`` property is a convenient way to avoid rewriting the ``href`` property.
-     * as the second argument returned event from onClick
-     * Example using React Router:
+     * The returned ``href`` property is a convenient way to avoid rewriting the ``href`` property
+     * when navigating. Example using React Router:
      * `import { useNavigate } from 'react-router';`
      * `const navigate = useNavigate();`
-     * `return <Link href="/some-url" onClick={(href) => navigate(href)}>Navigate</Link>`
+     * `return <Link href="/some-url" onClick={navigate}>Navigate</Link>`
+     * The second returned argument is the native click event.
      */
     onClick?: (href: string, event?: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     /**
@@ -50,7 +55,7 @@ interface LinkProps {
  * Passed ``children`` will be rendered inside the anchor tag.
  *
 */
-declare const Link$1: ({ hint, href, children, selected, customClass, variant, onClick, onMouseEnter, onMouseLeave, }: PropsWithChildren<LinkProps>) => React.JSX.Element;
+declare const Link: ({ hint, href, children, selected, customClass, variant, onClick, onMouseEnter, onMouseLeave, }: PropsWithChildren<LinkProps>) => React.JSX.Element;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Custom css class to customize the stylings */
@@ -94,24 +99,35 @@ interface DropdownFunctions {
     close: () => void;
 }
 interface DropdownProps {
+    /**
+     * The start point of the dropdown content when it's open.
+     * Default: ``left``
+    */
+    anchorPoint?: 'left' | 'right';
     /** Custom css class to customize the stylings */
     customClass?: string;
     /**
      * Use it if you needs to change cared icon. Use icon in down state and component will automatically rotate it
-     */
+    */
     customCaretDownIconSrc?: string;
+    /** Custom css class to customize the content rendered inside the dropdown */
+    customContentClass?: string;
+    /** Custom css class to customize the stylings of the toggle button */
+    customToggleButtonClass?: string;
     /**
      * Defines if clicking outside of the button toggle or the dropdown content
      * should hide the floating container.
      * Default: ``true``
     */
     dismissOnClickOutside?: boolean;
+    /** Hides the default caret icon. It has precedence over any passed `customCaretDownIconSrc` */
+    hideCaret?: boolean;
     /** The hint to be displayed when hovering over the toggle button */
     hint?: string;
     /** The icon to be used as a left adornment of the toggle button */
     icon?: string;
     /** The label of the toggle button */
-    label: string;
+    label?: string;
     /**
      * The look and feel of the toggle button.
      * Default: ``primary``
@@ -362,6 +378,39 @@ interface DatePickerProps {
 }
 declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
 
+interface PageSelectorProps {
+    /**
+     * If pageLinks' length is greater than this value, only mobile views, a fly over menu will appear
+     * to provide easier access to all the links.
+     * Default: ``10``
+    */
+    minimumLinksToDisplayFlyOverMenu?: number;
+    /**
+     * Array of `CustomLink` to work as page selectors
+     * @see {@link CustomLink}
+    */
+    pageLinks: CustomLink[];
+    /**
+     * The index of the selected `pageLink`. This item will appear in a `selected` state.
+     * The look and feel of the item is determined by the `variant`.
+     * Default: ``0``
+    */
+    selectedIndex?: number;
+    /**
+     * The look and feel of the selectors.
+     * Default: ``primary``
+    */
+    variant?: 'primary' | 'secondary';
+}
+/**
+ * The Page Selector component is similar to the `TabMenu` component, but it's designed to work as a page navigator,
+ * unlike the TabMenu that is designed to switch between views. This component will render the given `pageLinks`
+ * as HTML links, triggering their `onClick` callbacks upon clicks. Use it to perform SPA or hard navigation
+ * based on your framework. Link labels longer than ~30 characters will be trimmed down in both the selector bar and
+ * the fly over menu.
+ */
+declare const PageSelector: ({ pageLinks, selectedIndex, variant, minimumLinksToDisplayFlyOverMenu, }: PageSelectorProps) => React.JSX.Element;
+
 interface PopoverContentProps {
     /** Title of the popover */
     title?: string;
@@ -515,11 +564,6 @@ interface HeaderProps {
  */
 declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HeaderFunctions>>;
 
-type Link = {
-    label: string;
-    url?: string;
-    onClick?: (url?: string) => void;
-};
 interface FooterProps {
     /** Optional app version to render on hover over the copyright text */
     appVersion?: string;
@@ -529,7 +573,7 @@ interface FooterProps {
      */
     onLinkClick?: (url?: string) => void;
     /** Links to be rendered on the right-bottom edge of the component. */
-    policiesLinks: Link[];
+    policiesLinks: CustomLink[];
     /**
      * The main links that will be rendered as columns. If you pass a custom `onClick` function to the link,
      * it will override the top-level `onLinkClick`.
@@ -537,7 +581,7 @@ interface FooterProps {
      */
     linkGroups: {
         title: string;
-        links: Link[];
+        links: CustomLink[];
     }[];
 }
 /**
@@ -550,4 +594,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$1 as Link, LinkProps, Modal, ModalProps, 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, HeaderLinkData, HeaderProps, Link, LinkProps, Modal, ModalProps, PageSelector, Popover, PopoverContent, PopoverContentProps, PopoverProps, Spinner, SpinnerProps, TabMenu, TabMenuProps, TextField, TextFieldProps };