@sequencing/design-system 1.0.48 → 1.0.49

package/dist/types/components/Atoms/Dropdown/Dropdown.d.ts

@@ -4,24 +4,35 @@ export interface DropdownFunctions {
     close: () => void;
 }
 export 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``

package/dist/types/components/Atoms/Link/Link.d.ts

@@ -1,4 +1,9 @@
 import React, { PropsWithChildren } from "react";
+export type CustomLink = {
+    label: string;
+    url?: string;
+    onClick?: (url?: string) => void;
+};
 export interface LinkProps {
     /** Custom css class to customize the stylings */
     customClass?: string;
@@ -19,12 +24,12 @@ export 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;
     /**

package/dist/types/components/Molecules/PageSelector/PageSelector.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { CustomLink } from "../../Atoms/Link/Link";
+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;
+export default PageSelector;

package/dist/types/components/Molecules/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Modal } from "./Modal/Modal";
 export { default as AppBar } from "./AppBar/AppBar";
 export { default as DatePicker } from "./DatePicker/DatePicker";
+export { default as PageSelector } from "./PageSelector/PageSelector";
 export { default as Popover, PopoverContent } from "./Popover/Popover";
 export type { AppBarProps } from "./AppBar/AppBar";
 export type { ModalProps } from "./Modal/Modal";

package/dist/types/components/Organisms/Footer/Footer.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-type Link = {
-    label: string;
-    url?: string;
-    onClick?: (url?: string) => void;
-};
+import { type CustomLink } from '../../Atoms/Link/Link';
 interface FooterProps {
     /** Optional app version to render on hover over the copyright text */
     appVersion?: string;
@@ -13,7 +9,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`.
@@ -21,7 +17,7 @@ interface FooterProps {
      */
     linkGroups: {
         title: string;
-        links: Link[];
+        links: CustomLink[];
     }[];
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sequencing/design-system",
-	"version": "1.0.48",
+	"version": "1.0.49",
 	"description": "Sequencing Design System",
 	"scripts": {
 		"test": "echo \"Error: no test specified\"",