@luscii-healthtech/web-ui 30.9.1 → 30.10.0

package/dist/components/PaginationMenu/PaginationMenu.types.d.ts

@@ -1,13 +1,28 @@
-export interface PaginationMenuProps {
-    pageCount: number;
-    currentPageNumber: number;
-    onChange: OnPaginationChange;
-    pageSize?: PageSize;
-    localization?: Localization;
-    resultCount?: number;
-    small?: boolean;
+export type PaginationMenuProps = {
     className?: string;
-}
+    type?: "small" | "large" | "cursor";
+    /** @deprecated use type instead */
+    small?: boolean;
+    pageSize?: PageSize;
+} & (PaginationMenuPropsSmall | PaginationMenuPropsLarge | PaginationMenuPropsCursor);
+type PaginationMenuPropsSmall = ({
+    type: "small";
+    small?: never;
+} | {
+    small: true;
+    type?: never;
+}) & PaginationMenuSmallProps;
+type PaginationMenuPropsLarge = ({
+    type: "large";
+    small?: never;
+} | {
+    small?: false | undefined;
+    type?: never;
+}) & PaginationMenuLargeProps;
+type PaginationMenuPropsCursor = {
+    type: "cursor";
+    small?: never;
+} & PaginationMenuCursorProps;
 export interface PaginationMenuSmallProps {
     pageCount: number;
     currentPageNumber: number;
@@ -22,7 +37,15 @@ export interface PaginationMenuLargeProps {
     localization: Localization;
     resultCount?: number;
 }
+export interface PaginationMenuCursorProps {
+    previousCursor?: string | null;
+    nextCursor?: string | null;
+    onChange: OnPaginationCursorChange;
+    pageSize?: number;
+    localization: Pick<Localization, "previous" | "next">;
+}
 export type OnPaginationChange = (pageNumber: number, pageSize?: PageSize) => void;
+export type OnPaginationCursorChange = (newCursor: string) => void;
 export type PageSize = 25 | 50 | 75 | 100;
 export interface Localization {
     display: string;
@@ -35,3 +58,4 @@ export type Option = {
     value: number;
     label: string;
 };
+export {};

package/dist/components/PaginationMenu/PaginationMenuCursor.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PaginationMenuCursorProps } from "./PaginationMenu.types";
+export declare const PaginationMenuCursor: (props: PaginationMenuCursorProps) => React.JSX.Element;

package/dist/components/Table/Table.utils.d.ts

@@ -1,6 +1,8 @@
+import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
 import { TableFieldText, TableFieldAction, TableFieldContent } from "./Table.types";
 export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
 export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];
+export declare const shouldShowPagination: (paginationMenuProps: PaginationMenuProps | undefined) => paginationMenuProps is PaginationMenuProps;
 /**
  * This function is to be used when the data we need can be completely on the client side.
  * By doing so we have a centralized way to deal with pagination.

package/dist/index.development.js

@@ -3745,6 +3745,15 @@ function isTableFieldText(content) {
 function isTableFieldAction(content) {
   return Array.isArray(content) && content.some((action) => action && "key" in action && "icon" in action && "handleClick" in action);
 }
+const shouldShowPagination = (paginationMenuProps) => {
+  if (!paginationMenuProps) {
+    return false;
+  }
+  if (paginationMenuProps.type === "cursor") {
+    return Boolean(paginationMenuProps.previousCursor || paginationMenuProps.nextCursor);
+  }
+  return paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0;
+};
 function prepareClientSidePagination({
   /**
    * The array to be split into chunks.
@@ -4097,15 +4106,27 @@ const PaginationMenuLarge = (props) => {
   );
 };
 
-const PaginationMenu = (props) => {
-  const buildPaginationLarge = () => {
-    if (!props.localization) {
-      console.error("Localization is required to use the non small Pagination component, please make sure to pass it as a prop.");
-      return React__namespace.default.createElement("span", null, "Invalid props passed to this component.");
-    }
-    return React__namespace.default.createElement(PaginationMenuLarge, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, onChange: props.onChange, pageSize: props.pageSize, localization: props.localization, resultCount: props.resultCount });
+const PaginationMenuCursor = (props) => {
+  const handleOnChange = (event) => {
+    const cursor = event.currentTarget.dataset.cursor;
+    cursor && props.onChange(cursor);
   };
-  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-w-full ui-flex-row ui-items-center ui-justify-between", props.className) }, props.small ? React__namespace.default.createElement(PaginationMenuSmall, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, pageSize: props.pageSize, onChange: props.onChange }) : buildPaginationLarge());
+  return React__namespace.default.createElement(
+    Stack,
+    { axis: "x", gap: "m", justify: "end", width: "full" },
+    React__namespace.default.createElement(SecondaryButton, { "data-test-id": "prev-button", leadingIcon: React__namespace.default.createElement(LeftArrowIcon, null), "data-cursor": props.previousCursor, isDisabled: !props.previousCursor, onClick: handleOnChange }, props.localization.previous),
+    React__namespace.default.createElement(SecondaryButton, { "data-test-id": "next-button", trailingIcon: React__namespace.default.createElement(RightArrowIcon, null), "data-cursor": props.nextCursor, isDisabled: !props.nextCursor, onClick: handleOnChange }, props.localization.next)
+  );
+};
+
+const PaginationMenu = (props) => {
+  return React__namespace.default.createElement(
+    "div",
+    { className: classNames__default.default("ui-flex ui-w-full ui-flex-row ui-items-center ui-justify-between", props.className) },
+    (props.type === "small" || props.small) && React__namespace.default.createElement(PaginationMenuSmall, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, pageSize: props.pageSize, onChange: props.onChange }),
+    (props.type === "large" || !props.small && props.type === void 0) && React__namespace.default.createElement(PaginationMenuLarge, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, onChange: props.onChange, pageSize: props.pageSize, localization: props.localization, resultCount: props.resultCount }),
+    props.type === "cursor" && React__namespace.default.createElement(PaginationMenuCursor, { previousCursor: props.previousCursor, nextCursor: props.nextCursor, onChange: props.onChange, pageSize: props.pageSize, localization: props.localization })
+  );
 };
 
 const TableFooter = (props) => {
@@ -4147,7 +4168,7 @@ function Table(_a) {
     setIsPristine(false);
   }, [items, isLoading]);
   const showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
-  const showFooter = !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0;
+  const showFooter = !isLoading && !showEmptyView && shouldShowPagination(paginationMenuProps);
   const colSpan = isSelectable ? fieldConfigurations.length + 1 : fieldConfigurations.length;
   const handleOnToggleAll = () => {
     const newState = getSelectAllCheckboxState() === "checked" ? [] : (items !== null && items !== void 0 ? items : []).map((value, index) => ({