@dmsi/wedgekit-react 0.0.415 → 0.0.418

package/src/components/Grid.tsx

@@ -1,128 +1,96 @@
-import { ComponentProps, Children } from "react";
+import { ComponentProps } from "react";
 import { Sizing } from "../types";
 import clsx from "clsx";
 
-type GridProps = {
+type Breakpoint = "mobile" | "compact" | "desktop";
+
+export type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type GridProps = {
   children: React.ReactNode;
+  /** Design system sizing context controlling gap + optional padding token sets */
   sizing?: Sizing;
+  /** Adds the sizing-based padding classes when true */
   padding?: boolean;
-  hasSideMenu?: boolean;
-  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  /** Base column count applied at all breakpoints unless overridden */
+  columns: GridColumnCount;
+  /** Explicit responsive column overrides. e.g. { mobile:2, desktop-compact:3, desktop:6 } */
+  responsive?: Partial<Record<Breakpoint, GridColumnCount>>;
   id?: string;
   testid?: string;
+  className?: string;
+  style?: ComponentProps<"div">["style"];
 } & Omit<ComponentProps<"div">, "className">;
 
-// Grid class configuration maps for better maintainability
-const COLUMNS_WITH_SIDE_MENU_MAP: Record<number, string> = {
-  1: "grid-cols-1",
-  2: "sm:grid-cols-2",
-  3: "sm:grid-cols-2 md:grid-cols-3",
-  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
-  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
-  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
-  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
-  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
-  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
-  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
-  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
-  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+// Mapping helpers for sizing tokens -> gap & padding classes (centralised to reduce repetition)
+const GAP_BY_SIZING: Partial<Record<Sizing, string>> = {
+  none: "gap-0",
+  "layout-group":
+    "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+  layout:
+    "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+  container:
+    "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+  component:
+    "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
 };
 
-const COLUMNS_WITHOUT_SIDE_MENU_MAP: Record<number, string> = {
-  1: "grid-cols-1",
-  2: "sm:grid-cols-2",
-  3: "sm:grid-cols-2 md:grid-cols-3",
-  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
-  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
-  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
-  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
-  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
-  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
-  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
-  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12",
+const PADDING_BY_SIZING: Partial<Record<Sizing, string>> = {
+  none: "p-0",
+  container:
+    "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+  layout:
+    "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+  "layout-group":
+    "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+  component:
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
 };
 
-const getChildCountBasedClasses = (
-  childCount: number,
-  hasSideMenu: boolean,
+/** Build column classes from provided props. No child-count heuristics. */
+const buildColumnClasses = (
+  base: GridColumnCount,
+  responsive?: Partial<Record<Breakpoint, GridColumnCount>>,
 ): string => {
-  if (hasSideMenu) {
-    if (childCount <= 1) return "grid-cols-1";
-    if (childCount <= 2) return "sm:grid-cols-2";
-    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
-    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
-    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
-  }
-
-  if (childCount <= 1) return "grid-cols-1";
-  if (childCount <= 2) return "sm:grid-cols-2";
-  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
-  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
-  if (childCount <= 6)
-    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
-  if (childCount === 7)
-    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
-  if (childCount <= 11)
-    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
-  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
-};
-
-const getGridClasses = (
-  childCount: number,
-  hasSideMenu?: boolean,
-  columns?: number,
-) => {
-  if (columns) {
-    const map = hasSideMenu
-      ? COLUMNS_WITH_SIDE_MENU_MAP
-      : COLUMNS_WITHOUT_SIDE_MENU_MAP;
-    return map[columns] ?? map[12];
+  const classes: string[] = [`grid-cols-${base}`];
+  if (responsive) {
+    (
+      Object.entries(responsive) as Array<[Breakpoint, GridColumnCount]>
+    ).forEach(([bp, value]) => {
+      if (value && value > 0) classes.push(`${bp}:grid-cols-${value}`);
+    });
   }
-
-  return getChildCountBasedClasses(childCount, hasSideMenu ?? false);
+  return classes.join(" ");
 };
 
 export const Grid = ({
   children,
   sizing = "container",
   padding,
-  hasSideMenu = false,
   columns,
+  responsive,
   id,
   testid,
   style,
+  className,
+  ...rest
 }: GridProps) => {
-  const childCount = Children.count(children);
+  const columnClasses = buildColumnClasses(columns, responsive);
+
   return (
     <div
       id={id}
       data-testid={testid}
+      style={style}
+      {...rest}
       className={clsx(
-        padding &&
-          sizing === "container" &&
-          "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-        padding &&
-          sizing === "layout" &&
-          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-        padding &&
-          sizing === "layout-group" &&
-          "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-        padding &&
-          sizing === "component" &&
-          "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-        sizing === "layout-group" &&
-          "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-        sizing === "layout" &&
-          "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-        sizing === "container" &&
-          "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-        sizing === "component" &&
-          "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
         "w-full grid",
-        getGridClasses(childCount, hasSideMenu, columns),
+        GAP_BY_SIZING[sizing] ?? GAP_BY_SIZING.container,
+        padding && (PADDING_BY_SIZING[sizing] ?? PADDING_BY_SIZING.container),
+        columnClasses,
+        "grid-cols-1 desktop:grid-cols-4",
+        className,
       )}
-      style={style}
     >
       {children}
     </div>

package/src/components/ListGroup.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import { Stack } from "./Stack";
+import { Icon } from "./Icon";
+import { Label } from "./Label";
+
+export type ListGroupProps = {
+  /** Heading title displayed in the clickable header */
+  title: React.ReactNode;
+  /** Start open by default */
+  defaultOpen?: boolean;
+  /** Controlled open state (if provided component becomes controlled) */
+  open?: boolean;
+  /** Called when the accordion toggles (newState) */
+  onToggle?: (open: boolean) => void;
+  /** Optional test id */
+  testid?: string;
+  /** Disable user toggling */
+  disabled?: boolean;
+  className?: string;
+  /** Adds a border around the group */
+  bordered?: boolean;
+  /** Adds padding to the content area (uses layout sizing tokens) */
+  padded?: boolean;
+  children: React.ReactNode;
+};
+
+/**
+ * ListGroup is a simple accordion-like container that reveals its children.
+ * It uses Stack for consistent spacing and layout.
+ */
+export function ListGroup({
+  title,
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  testid,
+  disabled,
+  className,
+  children,
+}: ListGroupProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    if (!isControlled) setUncontrolledOpen(next);
+    onToggle?.(next);
+  };
+
+  return (
+    <div data-testid={testid} className={clsx("rounded-sm", className)}>
+      <Stack sizing="layout" noGap>
+        <button
+          type="button"
+          onClick={toggle}
+          className={clsx(
+            "w-full flex items-center justify-between text-left",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+          aria-expanded={isOpen}
+        >
+          <Label>{title}</Label>
+          <Icon
+            name="expand_more"
+            className={clsx(
+              "transition-transform duration-200",
+              isOpen ? "rotate-180" : "rotate-0",
+            )}
+          />
+        </button>
+        {isOpen && (
+          <Stack sizing="layout" paddingTop>
+            {children}
+          </Stack>
+        )}
+      </Stack>
+    </div>
+  );
+}

package/src/components/Pagination.tsx

@@ -0,0 +1,182 @@
+import React, { useCallback, useMemo } from "react";
+import clsx from "clsx";
+import { Icon } from "./Icon";
+import { paddingUsingComponentGap } from "../classNames";
+import { Subheader } from "./Subheader";
+
+export interface PaginationProps {
+  /** Total number of pages (>=1). Component returns null if < 2. */
+  totalPages: number;
+  /** Current page (1-based, controlled). */
+  currentPage: number;
+  /** Parent controls state; we just notify desired target page. */
+  onPageChange: (page: number) => void;
+  id?: string;
+  testid?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+  id,
+  testid,
+  className,
+  disabled,
+}: PaginationProps) => {
+  const goTo = useCallback(
+    (page: number) => {
+      if (disabled) return;
+      onPageChange(page);
+    },
+    [onPageChange, disabled],
+  );
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goTo(currentPage - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goTo(currentPage + 1);
+    }
+  };
+
+  type PageToken = number | "ellipsis";
+
+  const pageTokens: PageToken[] = useMemo(() => {
+    // If 5 or fewer pages, show all directly
+    if (totalPages <= 5) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    // Build a focused window around current page
+    const pages = new Set<number>();
+    pages.add(1);
+    pages.add(totalPages);
+
+    if (currentPage <= 3) {
+      // Near the start – show first 4 pages
+      pages.add(2);
+      pages.add(3);
+      pages.add(4);
+    } else if (currentPage >= totalPages - 2) {
+      // Near the end – show last 4 pages
+      pages.add(totalPages - 1);
+      pages.add(totalPages - 2);
+      pages.add(totalPages - 3);
+    } else {
+      // Middle – show current, one before & one after
+      pages.add(currentPage - 1);
+      pages.add(currentPage);
+      pages.add(currentPage + 1);
+    }
+
+    const sorted = Array.from(pages).sort((a, b) => a - b);
+
+    const tokens: PageToken[] = [];
+    for (let i = 0; i < sorted.length; i++) {
+      const value = sorted[i];
+      const prev = sorted[i - 1];
+      if (i > 0) {
+        if (value - prev === 2) {
+          // Single gap – include the missing number
+          tokens.push(prev + 1);
+        } else if (value - prev > 2) {
+          // Larger gap – ellipsis
+          tokens.push("ellipsis");
+        }
+      }
+      tokens.push(value);
+    }
+    return tokens;
+  }, [totalPages, currentPage]);
+
+  if (totalPages <= 1) return null;
+
+  const buttonClass = clsx(
+    "cursor-pointer disabled:cursor-default",
+    paddingUsingComponentGap,
+    "w-8 h-8",
+    "flex items-center justify-center",
+    "bg-transparent",
+    "box-content",
+    "hover:bg-background-grouped-secondary-normal",
+    "focus:bg-background-grouped-secondary-normal focus:outline-0",
+    "disabled:bg-transparent disabled:text-text-action-primary-disabled",
+  );
+
+  return (
+    <nav
+      id={id}
+      data-testid={testid}
+      aria-label="Pagination"
+      onKeyDown={handleKey}
+      className={clsx(
+        "flex items-center",
+        "border border-border-primary-normal",
+        "bg-background-grouped-primary-normal",
+        "rounded-sm",
+        className,
+      )}
+    >
+      <button
+        disabled={disabled || currentPage <= 1}
+        aria-label="Previous page"
+        onClick={() => goTo(currentPage - 1)}
+        className={clsx(buttonClass, "border-r-1 border-border-primary-normal")}
+      >
+        <Icon name="keyboard_arrow_left" />
+      </button>
+
+      <ul className={clsx("flex items-center")}>
+        {pageTokens.map((token, index) => {
+          if (token === "ellipsis") {
+            return (
+              <li
+                key={`ellipsis-${index}`}
+                className="w-8 h-8 select-none text-text-action-primary-disabled"
+              >
+                …
+              </li>
+            );
+          }
+          const selected = token === currentPage;
+          return (
+            <li key={token}>
+              <button
+                aria-label={`Page ${token}`}
+                aria-current={selected ? "page" : undefined}
+                disabled={disabled}
+                onClick={() => goTo(token)}
+                className={clsx(
+                  buttonClass,
+                  selected &&
+                    "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal",
+                )}
+              >
+                <Subheader align="center" weight="bold">
+                  {token}
+                </Subheader>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      <button
+        disabled={disabled || currentPage >= totalPages}
+        aria-label="Next page"
+        onClick={() => goTo(currentPage + 1)}
+        className={clsx(buttonClass, "border-l-1 border-border-primary-normal")}
+      >
+        <Icon name="keyboard_arrow_right" />
+      </button>
+    </nav>
+  );
+};
+
+Pagination.displayName = "Pagination";

package/src/components/Stack.tsx

@@ -17,6 +17,10 @@ type StackProps = {
   padding?: boolean;
   paddingX?: boolean;
   paddingY?: boolean;
+  paddingBottom?: boolean;
+  paddingTop?: boolean;
+  paddingLeft?: boolean;
+  paddingRight?: boolean;
   margin?: boolean;
   marginX?: boolean;
   marginY?: boolean;
@@ -33,6 +37,10 @@ type StackProps = {
   minHeight?: number | string;
   maxHeight?: number | string;
   borderColor?: BorderColorTokens;
+  borderTopColor?: BorderColorTokens;
+  borderRightColor?: BorderColorTokens;
+  borderBottomColor?: BorderColorTokens;
+  borderLeftColor?: BorderColorTokens;
   backgroundColor?: BackgroundColorTokens;
   overflowY?: "hidden" | "scroll" | "auto" | "inherit";
   overflowX?: "hidden" | "scroll" | "auto" | "inherit";
@@ -96,6 +104,10 @@ export const Stack = ({
   padding,
   paddingX,
   paddingY,
+  paddingBottom,
+  paddingTop,
+  paddingLeft,
+  paddingRight,
   margin,
   marginX,
   marginY,
@@ -111,6 +123,10 @@ export const Stack = ({
   height,
   maxHeight,
   borderColor,
+  borderTopColor,
+  borderRightColor,
+  borderBottomColor,
+  borderLeftColor,
   backgroundColor,
   sizing = "none",
   overflowY = "inherit",
@@ -172,6 +188,18 @@ export const Stack = ({
         border: borderColor
           ? `1px solid var(--color-${borderColor})`
           : undefined,
+        borderTop: borderTopColor
+          ? `1px solid var(--color-${borderTopColor})`
+          : undefined,
+        borderRight: borderRightColor
+          ? `1px solid var(--color-${borderRightColor})`
+          : undefined,
+        borderBottom: borderBottomColor
+          ? `1px solid var(--color-${borderBottomColor})`
+          : undefined,
+        borderLeft: borderLeftColor
+          ? `1px solid var(--color-${borderLeftColor})`
+          : undefined,
         backgroundColor: backgroundColor
           ? `var(--color-${backgroundColor})`
           : undefined,
@@ -235,6 +263,54 @@ export const Stack = ({
         paddingY &&
           sizing === "component" &&
           "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        paddingBottom &&
+          sizing === "container" &&
+          "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        paddingBottom &&
+          sizing === "layout" &&
+          "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        paddingBottom &&
+          sizing === "layout-group" &&
+          "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        paddingBottom &&
+          sizing === "component" &&
+          "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        paddingTop &&
+          sizing === "container" &&
+          "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        paddingTop &&
+          sizing === "layout" &&
+          "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        paddingTop &&
+          sizing === "layout-group" &&
+          "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        paddingTop &&
+          sizing === "component" &&
+          "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        paddingLeft &&
+          sizing === "container" &&
+          "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        paddingLeft &&
+          sizing === "layout" &&
+          "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        paddingLeft &&
+          sizing === "layout-group" &&
+          "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        paddingLeft &&
+          sizing === "component" &&
+          "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        paddingRight &&
+          sizing === "container" &&
+          "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        paddingRight &&
+          sizing === "layout" &&
+          "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        paddingRight &&
+          sizing === "layout-group" &&
+          "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        paddingRight &&
+          sizing === "component" &&
+          "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
         margin &&
           sizing === "container" &&
           "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",

package/src/components/Tooltip.tsx

@@ -30,7 +30,7 @@ export const Tooltip = ({
   children,
   showOnTruncation = false,
   offset = 8,
-  keepHidden = false
+  keepHidden = false,
 }: TooltipProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -105,13 +105,14 @@ export const Tooltip = ({
       id={id}
       data-testid={testid}
       ref={ref}
-      className="relative inline-grid grid-cols-[auto_1fr] items-center"
+      className="relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       {children}
 
-      {!keepHidden && isVisible &&
+      {!keepHidden &&
+        isVisible &&
         typeof document !== "undefined" &&
         createPortal(
           <div

package/src/components/index.ts

@@ -24,3 +24,7 @@ export { MobileDataGrid } from "./MobileDataGrid";
 export { ProductImagePreview } from "./ProductImagePreview";
 export { CompactImagesPreview } from "./CompactImagesPreview";
 export { SimpleTable } from "./SimpleTable";
+export { PDFViewer } from "./PDFViewer";
+export { ListGroup } from "./ListGroup";
+export { Pagination } from "./Pagination";
+export { SkeletonParagraph } from "./SkeletonParagraph";