@luscii-healthtech/web-ui 30.9.1 → 30.10.1

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.
@@ -3866,11 +3875,20 @@ function TableBody(props) {
     ) },
     !props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => React__namespace.default.createElement(
       "tr",
-      { tabIndex: 0, className: classNames__default.default("ui-group", {
-        "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onRowClick,
-        "ui-cursor-default hover:ui-bg-white": !props.onRowClick,
-        "ui-bg-blue-100": isItemChecked(index)
-      }, props.className), onClick: generateRowClickHandler(item) },
+      {
+        /**
+         * Not the best, but I'm re-adding what it existed in the TableBodyRow:
+         * https://github.com/Luscii/web-ui/pull/820/files#diff-a4cc940bcb5cc070b340404e9d7fb626ab529bac099dba0cb0b8b2b0cbc274bfL67
+         */
+        key: JSON.stringify(item),
+        tabIndex: 0,
+        className: classNames__default.default("ui-group", {
+          "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onRowClick,
+          "ui-cursor-default hover:ui-bg-white": !props.onRowClick,
+          "ui-bg-blue-100": isItemChecked(index)
+        }, props.className),
+        onClick: generateRowClickHandler(item)
+      },
       props.isSelectable && React__namespace.default.createElement(
         "td",
         { className: "ui-px-2 first:ui-pl-6 last:ui-pr-6" },
@@ -4097,15 +4115,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 +4177,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) => ({