@opengovsg/oui 0.0.0-snapshot-20250812083020 → 0.0.0-snapshot-20250813172831

package/dist/esm/pagination/pagination.js

@@ -0,0 +1,261 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback, createElement } from 'react';
+import { useLocale } from '@react-aria/i18n';
+import { cn, dataAttr } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { PaginationItemType } from './hooks/use-pagination.js';
+import { PaginationCursor } from './pagination-cursor.js';
+import { PaginationItem } from './pagination-item.js';
+import { usePagination } from './use-pagination.js';
+import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
+import Ellipsis from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/ellipsis.js';
+import ChevronsRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-right.js';
+
+const Pagination = forwardRef((props, ref) => {
+  const {
+    Component,
+    dotsJump,
+    slots,
+    classNames,
+    total,
+    range,
+    loop,
+    activePage,
+    disableCursorAnimation,
+    disableAnimation,
+    renderItem: renderItemProp,
+    onNext,
+    onPrevious,
+    setPage,
+    getItemAriaLabel,
+    getItemRef,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps
+  } = usePagination({ ...props, ref });
+  const { direction } = useLocale();
+  const isRTL = direction === "rtl";
+  const renderChevronIcon = useCallback(
+    (key) => {
+      if (key === PaginationItemType.PREV && !isRTL || key === PaginationItemType.NEXT && isRTL) {
+        return /* @__PURE__ */ jsx(ChevronLeft, {});
+      }
+      return /* @__PURE__ */ jsx(
+        ChevronLeft,
+        {
+          className: slots.chevronNext({
+            class: classNames?.chevronNext
+          })
+        }
+      );
+    },
+    [isRTL, slots, classNames?.chevronNext]
+  );
+  const renderPrevItem = useCallback(() => {
+    return /* @__PURE__ */ jsx(
+      PaginationItem,
+      {
+        className: slots.prev({
+          class: classNames?.prev
+        }),
+        "data-slot": "prev",
+        getAriaLabel: getItemAriaLabel,
+        isDisabled: props.isDisabled || !loop && activePage === 1,
+        value: PaginationItemType.PREV,
+        onPress: onPrevious,
+        children: renderChevronIcon(PaginationItemType.PREV)
+      },
+      PaginationItemType.PREV
+    );
+  }, [
+    slots,
+    classNames?.prev,
+    getItemAriaLabel,
+    props.isDisabled,
+    loop,
+    activePage,
+    onPrevious,
+    renderChevronIcon
+  ]);
+  const renderNextItem = useCallback(() => {
+    return /* @__PURE__ */ jsx(
+      PaginationItem,
+      {
+        className: slots.next({
+          class: cn(classNames?.next)
+        }),
+        "data-slot": "next",
+        getAriaLabel: getItemAriaLabel,
+        isDisabled: props.isDisabled || !loop && activePage === total,
+        value: PaginationItemType.NEXT,
+        onPress: onNext,
+        children: renderChevronIcon(PaginationItemType.NEXT)
+      },
+      PaginationItemType.NEXT
+    );
+  }, [
+    slots,
+    classNames?.next,
+    getItemAriaLabel,
+    props.isDisabled,
+    loop,
+    activePage,
+    total,
+    onNext,
+    renderChevronIcon
+  ]);
+  const renderItem = useCallback(
+    (value, index) => {
+      const isBefore = index < range.indexOf(activePage);
+      if (renderItemProp && typeof renderItemProp === "function") {
+        let page = typeof value == "number" ? value : index;
+        if (value === PaginationItemType.NEXT) {
+          page = activePage + 1;
+        }
+        if (value === PaginationItemType.PREV) {
+          page = activePage - 1;
+        }
+        if (value === PaginationItemType.DOTS) {
+          page = isBefore ? activePage - dotsJump >= 1 ? activePage - dotsJump : 1 : activePage + dotsJump <= total ? activePage + dotsJump : total;
+        }
+        const itemChildren = {
+          [PaginationItemType.PREV]: renderChevronIcon(PaginationItemType.PREV),
+          [PaginationItemType.NEXT]: renderChevronIcon(PaginationItemType.NEXT),
+          [PaginationItemType.DOTS]: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Ellipsis,
+              {
+                className: slots?.ellipsis({ class: classNames?.ellipsis })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronsRight,
+              {
+                className: slots?.forwardIcon({
+                  class: classNames?.forwardIcon
+                }),
+                "data-before": dataAttr(isBefore)
+              }
+            )
+          ] })
+        };
+        return renderItemProp({
+          value,
+          index,
+          key: `${value}-${index}`,
+          page,
+          total,
+          children: typeof value === "number" ? value : itemChildren[value],
+          activePage,
+          dotsJump,
+          isBefore,
+          isActive: value === activePage,
+          isPrevious: value === activePage - 1,
+          isNext: value === activePage + 1,
+          isFirst: value === 1,
+          isLast: value === total,
+          onNext,
+          onPrevious,
+          setPage,
+          onPress: () => setPage(page),
+          ref: typeof value === "number" ? (node) => getItemRef(node, value) : void 0,
+          className: slots.item({ class: classNames?.item }),
+          getAriaLabel: getItemAriaLabel
+        });
+      }
+      if (value === PaginationItemType.PREV) {
+        return renderPrevItem();
+      }
+      if (value === PaginationItemType.NEXT) {
+        return renderNextItem();
+      }
+      if (value === PaginationItemType.DOTS) {
+        return /* @__PURE__ */ jsxs(
+          PaginationItem,
+          {
+            className: slots.item({
+              class: cn(classNames?.item, "group")
+            }),
+            isDisabled: props.isDisabled,
+            "data-slot": "item",
+            getAriaLabel: getItemAriaLabel,
+            value,
+            onPress: () => isBefore ? setPage(
+              activePage - dotsJump >= 1 ? activePage - dotsJump : 1
+            ) : setPage(
+              activePage + dotsJump <= total ? activePage + dotsJump : total
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Ellipsis,
+                {
+                  className: slots?.ellipsis({ class: classNames?.ellipsis })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChevronsRight,
+                {
+                  className: slots?.forwardIcon({ class: classNames?.forwardIcon }),
+                  "data-before": dataAttr(isRTL ? !isBefore : isBefore)
+                }
+              )
+            ]
+          },
+          PaginationItemType.DOTS + isBefore
+        );
+      }
+      return /* @__PURE__ */ createElement(
+        PaginationItem,
+        {
+          ...getItemProps({ value }),
+          key: value,
+          getAriaLabel: getItemAriaLabel
+        },
+        value
+      );
+    },
+    [
+      range,
+      activePage,
+      renderItemProp,
+      getItemProps,
+      getItemAriaLabel,
+      renderChevronIcon,
+      slots,
+      classNames?.ellipsis,
+      classNames?.forwardIcon,
+      classNames?.item,
+      total,
+      dotsJump,
+      onNext,
+      onPrevious,
+      setPage,
+      getItemRef,
+      renderPrevItem,
+      renderNextItem,
+      props.isDisabled,
+      isRTL
+    ]
+  );
+  if (props.isCompact) {
+    return /* @__PURE__ */ jsx(Component, { ...getBaseProps(), children: /* @__PURE__ */ jsxs("ul", { ...getWrapperProps(), children: [
+      renderPrevItem(),
+      /* @__PURE__ */ jsxs("li", { className: slots.item({ class: classNames?.item }), children: [
+        "Page ",
+        activePage,
+        " of ",
+        total
+      ] }),
+      renderNextItem()
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Component, { ...getBaseProps(), children: /* @__PURE__ */ jsxs("ul", { ...getWrapperProps(), children: [
+    !disableCursorAnimation && !disableAnimation && /* @__PURE__ */ jsx(PaginationCursor, { ...getCursorProps() }),
+    range.map(renderItem)
+  ] }) });
+});
+
+export { Pagination };

package/dist/esm/pagination/use-pagination-item.js

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+import { useMemo } from 'react';
+import { useFocusRing as $f7dceffc5ad7768b$export$4e328f61c538687f } from '../node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.js';
+import { useRouter, mergeProps, chain, shouldClientNavigate } from '@react-aria/utils';
+import { useHover as $6179b936705e76d3$export$ae780daf29e6d456 } from '../node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.js';
+import { usePress as $f6c31cce2adf654f$export$45712eceda6fad21 } from '../node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.js';
+import { cn, dataAttr } from '@opengovsg/oui-theme';
+import { filterDOMProps } from '../system/react-utils/filter-dom-props.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+function usePaginationItem(props) {
+  const {
+    as,
+    ref,
+    value,
+    children,
+    isActive,
+    isDisabled,
+    onPress,
+    onClick,
+    getAriaLabel,
+    className,
+    ...otherProps
+  } = props;
+  const isLink = !!props?.href;
+  const Component = as || isLink ? "a" : "li";
+  const shouldFilterDOMProps = typeof Component === "string";
+  const domRef = useDomRef(ref);
+  const router = useRouter();
+  const ariaLabel = useMemo(
+    () => isActive ? `${getAriaLabel?.(value)} active` : getAriaLabel?.(value),
+    [isActive, getAriaLabel, value]
+  );
+  const { isPressed, pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled,
+    onPress
+  });
+  const { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled });
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-current": dataAttr(isActive),
+      "aria-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(isDisabled),
+      "data-active": dataAttr(isActive),
+      "data-focus": dataAttr(isFocused),
+      "data-hover": dataAttr(isHovered),
+      "data-pressed": dataAttr(isPressed),
+      "data-focus-visible": dataAttr(isFocusVisible),
+      ...mergeProps(
+        props2,
+        pressProps,
+        focusProps,
+        hoverProps,
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps
+        })
+      ),
+      className: cn(className, props2.className),
+      onClick: (e) => {
+        chain(pressProps?.onClick, onClick)(e);
+        if (!router.isNative && e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.href && // If props are applied to a router Link component, it may have already prevented default.
+        !e.isDefaultPrevented() && shouldClientNavigate(e.currentTarget, e) && props2.href) {
+          e.preventDefault();
+          router.open(e.currentTarget, e, props2.href, props2.routerOptions);
+        }
+      }
+    };
+  };
+  return {
+    Component,
+    children,
+    ariaLabel,
+    isFocused,
+    isFocusVisible,
+    getItemProps
+  };
+}
+
+export { usePaginationItem };

package/dist/esm/pagination/use-pagination.js

@@ -0,0 +1,248 @@
+"use strict";
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { paginationStyles, cn, dataAttr } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { usePagination as usePagination$1, PaginationItemType } from './hooks/use-pagination.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const CURSOR_TRANSITION_TIMEOUT = 300;
+function usePagination(originalProps) {
+  const [props, variantProps] = mapPropsVariants(
+    originalProps,
+    paginationStyles.variantKeys
+  );
+  const {
+    as,
+    ref,
+    classNames,
+    dotsJump = 5,
+    loop = false,
+    showControls = false,
+    total = 1,
+    initialPage = 1,
+    page,
+    siblings,
+    boundaries,
+    onChange,
+    className,
+    renderItem,
+    getItemAriaLabel: getItemAriaLabelProp,
+    ...otherProps
+  } = props;
+  const Component = as || "nav";
+  const domRef = useDomRef(ref);
+  const cursorRef = useRef(null);
+  const itemsRef = useRef(null);
+  const cursorTimer = useRef(null);
+  const disableAnimation = originalProps?.disableAnimation ?? false;
+  const disableCursorAnimation = originalProps?.disableCursorAnimation ?? disableAnimation ?? false;
+  function getItemsRefMap() {
+    if (!itemsRef.current) {
+      itemsRef.current = /* @__PURE__ */ new Map();
+    }
+    return itemsRef.current;
+  }
+  function getItemRef(node, value) {
+    const map = getItemsRefMap();
+    if (node) {
+      map.set(value, node);
+    } else {
+      map.delete(value);
+    }
+  }
+  const scrollTo = useCallback(
+    (value, skipAnimation) => {
+      const map = getItemsRefMap();
+      const node = map.get(value);
+      if (!node || !cursorRef.current) return;
+      if (cursorTimer.current) {
+        clearTimeout(cursorTimer.current);
+      }
+      scrollIntoView(node, {
+        scrollMode: "always",
+        behavior: "smooth",
+        block: "start",
+        inline: "start",
+        boundary: domRef.current
+      });
+      const { offsetLeft } = node;
+      if (skipAnimation) {
+        cursorRef.current.setAttribute("data-moving", "false");
+        cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+        return;
+      }
+      cursorRef.current.setAttribute("data-moving", "true");
+      cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`;
+      cursorTimer.current = setTimeout(() => {
+        if (cursorRef.current) {
+          cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+        }
+        cursorTimer.current = setTimeout(() => {
+          cursorRef.current?.setAttribute("data-moving", "false");
+          if (cursorTimer.current) {
+            clearTimeout(cursorTimer.current);
+          }
+        }, CURSOR_TRANSITION_TIMEOUT);
+      }, CURSOR_TRANSITION_TIMEOUT);
+    },
+    [domRef]
+  );
+  const { range, activePage, setPage, previous, next, first, last } = usePagination$1({
+    page,
+    total,
+    initialPage,
+    siblings,
+    boundaries,
+    showControls,
+    onChange
+  });
+  const [setRef, isVisible] = useIntersectionObserver();
+  useEffect(() => {
+    if (domRef.current) {
+      setRef(domRef.current);
+    }
+  }, [domRef, setRef]);
+  const activePageRef = useRef(activePage);
+  useEffect(() => {
+    if (activePage && !disableAnimation && isVisible) {
+      scrollTo(activePage, activePage === activePageRef.current);
+    }
+    activePageRef.current = activePage;
+  }, [
+    page,
+    activePage,
+    disableAnimation,
+    disableCursorAnimation,
+    isVisible,
+    originalProps.dotsJump,
+    originalProps.isCompact,
+    originalProps.showControls,
+    scrollTo
+  ]);
+  const slots = useDeepCompareMemo(
+    () => paginationStyles({
+      ...variantProps,
+      disableAnimation,
+      disableCursorAnimation
+    }),
+    [variantProps, disableCursorAnimation, disableAnimation]
+  );
+  const baseStyles = cn(classNames?.base, className);
+  const onNext = () => {
+    if (loop && activePage === total) {
+      return first();
+    }
+    return next();
+  };
+  const onPrevious = () => {
+    if (loop && activePage === 1) {
+      return last();
+    }
+    return previous();
+  };
+  const getBaseProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "navigation",
+      "aria-label": props2["aria-label"] || "pagination navigation",
+      "data-slot": "base",
+      "data-controls": dataAttr(showControls),
+      "data-loop": dataAttr(loop),
+      "data-dots-jump": dotsJump,
+      "data-total": total,
+      "data-active-page": activePage,
+      className: slots.base({ class: cn(baseStyles, props2?.className) }),
+      ...otherProps,
+      ...props2
+    };
+  };
+  const getWrapperProps = (props2 = {}) => {
+    return {
+      "data-slot": "wrapper",
+      "data-disabled": dataAttr(variantProps.isDisabled),
+      role: "none",
+      className: slots.wrapper({
+        class: cn(classNames?.wrapper, props2?.className)
+      }),
+      ...props2
+    };
+  };
+  const getItemAriaLabel = (page2) => {
+    if (!page2) return;
+    if (getItemAriaLabelProp) {
+      return getItemAriaLabelProp(page2);
+    }
+    switch (page2) {
+      case PaginationItemType.DOTS:
+        return "dots element";
+      case PaginationItemType.PREV:
+        return "previous page button";
+      case PaginationItemType.NEXT:
+        return "next page button";
+      case "first":
+        return "first page button";
+      case "last":
+        return "last page button";
+      default:
+        return `pagination item ${page2}`;
+    }
+  };
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: (node) => getItemRef(node, props2.value),
+      "aria-disabled": dataAttr(variantProps.isDisabled),
+      "data-disabled": dataAttr(variantProps.isDisabled),
+      "data-slot": "item",
+      isActive: props2.value === activePage,
+      className: slots.item({
+        class: cn(classNames?.item, props2?.className)
+      }),
+      onPress: () => {
+        if (props2.value !== activePage) {
+          setPage(props2.value);
+        }
+      },
+      ...props2
+    };
+  };
+  const getCursorProps = (props2 = {}) => {
+    return {
+      ref: cursorRef,
+      activePage,
+      "data-slot": "cursor",
+      className: slots.cursor({
+        class: cn(classNames?.cursor, props2?.className)
+      }),
+      ...props2
+    };
+  };
+  return {
+    Component,
+    showControls,
+    dotsJump,
+    slots,
+    classNames,
+    loop,
+    total,
+    range,
+    activePage,
+    getItemRef,
+    disableAnimation,
+    disableCursorAnimation,
+    setPage,
+    onPrevious,
+    onNext,
+    renderItem,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps,
+    getItemAriaLabel
+  };
+}
+
+export { CURSOR_TRANSITION_TIMEOUT, usePagination };

package/dist/esm/select/select.js

@@ -4,11 +4,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Provider, Select as Select$1, SelectValue, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
 import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { SelectVariantContext } from './select-variant-context.js';
 import { Label, Description, FieldError } from '../field/field.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import { Popover } from '../popover/popover.js';
 import { Button } from '../button/button.js';
 
 const calculateEstimatedRowHeight = (size) => {