@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/pagination/Pagination.tsx

@@ -1,142 +1,237 @@
-import React from "react";
-import { Center, createTexts, useTranslation, Flex, TextLink } from "..";
+"use client";
+
 import {
-  ListItem,
-  UnorderedList,
-  useMultiStyleConfig,
-  Link,
+  Box,
+  Pagination as ChakraPagination,
+  createContext,
+  usePaginationContext,
+  useSlotRecipe,
 } from "@chakra-ui/react";
+import * as React from "react";
 import {
-  DropdownLeftFill18Icon,
-  DropdownRightFill18Icon,
+  DropdownRightOutline18Icon,
+  DropdownLeftOutline18Icon,
 } from "@vygruppen/spor-icon-react";
-
-type PaginationProps = {
-  /** Specify the total amount of pages */
-  totalPages: number;
-  /** Specify the currently selected page */
-  selectedPage: number;
-  /** Callback for when a page is clicked */
-  onPageChange: (selected: number) => void;
-};
+import { createTexts, List, ListItem, useTranslation } from "..";
+import { ButtonVariantContext, PaginationRootProps } from "./types";
 
 /**
  * A pagination component is used to navigate between multiple pages.
  *
- * You specify the total amount of pages and the currently selected page.
+ * Count is the total number of pages.
+ * pageSize is the number of items per page.
+ * defaultPage is the default page to show.
+ * siblingCount is the number of sibling pages to show.
  *
  * ```tsx
- * <Pagination
- *   totalPages={10}
- *   selectedPage={3}
- *   onPageChange={handlePageChange}
- * />
+ * <Pagination count={10} pageSize={1} defaultPage={1}>
+ *  <PaginationPrevTrigger />
+ *  <PaginationItems />
+ *  <PaginationNextTrigger />
+ * </Pagination>
  * ```
  **/
 
-export const Pagination = ({
-  totalPages,
-  selectedPage,
-  onPageChange,
-}: PaginationProps) => {
+const [RootPropsProvider, useRootProps] = createContext<ButtonVariantContext>({
+  name: "RootPropsProvider",
+});
+
+export const Pagination = React.forwardRef<HTMLDivElement, PaginationRootProps>(
+  (props, ref) => {
+    const { getHref, children, ...rest } = props;
+    const recipe = useSlotRecipe({ key: "pagination" });
+    const styles = recipe();
+
+    return (
+      <RootPropsProvider
+        value={{
+          getHref,
+        }}
+      >
+        <ChakraPagination.Root
+          ref={ref}
+          type={getHref ? "link" : "button"}
+          {...rest}
+        >
+          <List css={styles.list}>{children}</List>
+        </ChakraPagination.Root>
+      </RootPropsProvider>
+    );
+  },
+);
+
+export const PaginationEllipsis = React.forwardRef<
+  HTMLDivElement,
+  ChakraPagination.EllipsisProps
+>((props, ref) => {
+  return (
+    <ListItem>
+      <ChakraPagination.Ellipsis ref={ref} {...props} asChild>
+        <Box cursor="default">...</Box>
+      </ChakraPagination.Ellipsis>
+    </ListItem>
+  );
+});
+
+export const PaginationItem = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.ItemProps
+>((props, ref) => {
+  const rootProps = useRootProps();
   const { t } = useTranslation();
+  const { page, totalPages } = usePaginationContext();
 
-  const style = useMultiStyleConfig("Pagination", { selectedPage });
-
-  const hasPreviousPage = selectedPage > 1;
-  const hasNextPage = selectedPage < totalPages;
-
-  const renderPaginationButtons = () => {
-    const displayPageNumbers = [];
-    const maxVisiblePages = 8;
-    if (totalPages <= maxVisiblePages) {
-      displayPageNumbers.push(
-        ...Array.from({ length: totalPages }, (_, i) => i + 1),
-      );
-    } else {
-      if (selectedPage <= Math.floor(maxVisiblePages / 2) + 1) {
-        // If selectedPage is near the beginning, display the first pages.
-        displayPageNumbers.push(
-          ...Array.from({ length: maxVisiblePages - 1 }, (_, i) => i + 1),
-        );
-        displayPageNumbers.push("...");
-        displayPageNumbers.push(totalPages);
-      } else if (selectedPage >= totalPages - Math.floor(maxVisiblePages / 2)) {
-        // If selectedPage is near the end, display the last pages.
-        displayPageNumbers.push(1);
-        displayPageNumbers.push("...");
-        displayPageNumbers.push(
-          ...Array.from(
-            { length: maxVisiblePages - 1 },
-            (_, i) => totalPages - maxVisiblePages + 2 + i,
-          ),
-        );
-      } else {
-        // Display pages with "..." in the middle.
-        displayPageNumbers.push(1);
-        displayPageNumbers.push("...");
-        for (
-          let i = selectedPage - Math.floor((maxVisiblePages - 3) / 2);
-          i <= selectedPage + Math.floor((maxVisiblePages - 3) / 2);
-          i++
-        ) {
-          displayPageNumbers.push(i);
-        }
-        displayPageNumbers.push("...");
-        displayPageNumbers.push(totalPages);
-      }
-    }
-    return displayPageNumbers.map((pageNumber, index) =>
-      pageNumber === "..." ? (
-        <ListItem key={index} sx={style.listItem}>
-          <Center>...</Center>
-        </ListItem>
-      ) : (
-        <Link
-          key={index}
-          as={ListItem}
-          onClick={() => {
-            if (pageNumber !== "...") {
-              onPageChange(+pageNumber);
-            }
+  if (rootProps.getHref) {
+    return (
+      <ListItem>
+        <ChakraPagination.Item
+          as={props.as ?? "a"}
+          {...{
+            href: rootProps.getHref(props.value as number),
+            to: rootProps.getHref(props.value as number),
+          }}
+          ref={ref}
+          aria-label={t(texts.pageOf(props.value, totalPages))}
+          {...props}
+        >
+          {props.value}
+        </ChakraPagination.Item>
+      </ListItem>
+    );
+  }
+
+  return (
+    <ListItem>
+      <ChakraPagination.Item
+        as={props.as ?? "button"}
+        ref={ref}
+        aria-label={t(texts.pageOf(props.value, totalPages))}
+        aria-selected={page === props.value}
+        {...props}
+      >
+        {props.value}
+      </ChakraPagination.Item>
+    </ListItem>
+  );
+});
+
+export const PaginationPrevTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.PrevTriggerProps
+>((props, ref) => {
+  const { page } = usePaginationContext();
+  const recipe = useSlotRecipe({ key: "pagination" });
+  const styles = recipe();
+  const { t } = useTranslation();
+  const rootProps = useRootProps();
+
+  if (page <= 1) return null;
+
+  if (rootProps.getHref) {
+    return (
+      <ListItem>
+        <ChakraPagination.PrevTrigger
+          as={props.as ?? "a"}
+          asChild
+          {...{
+            href: rootProps.getHref(props.value as number),
+            to: rootProps.getHref(props.value as number),
           }}
-          padding={pageNumber === "..." ? 0 : undefined}
-          sx={pageNumber === selectedPage ? style.activeButton : style.link}
+          ref={ref}
+          css={styles.item}
+          aria-label={t(texts.previousPage)}
+          {...props}
         >
-          {pageNumber}
-        </Link>
-      ),
+          <DropdownLeftOutline18Icon />
+        </ChakraPagination.PrevTrigger>
+      </ListItem>
     );
-  };
+  }
+  return (
+    <ListItem>
+      <ChakraPagination.PrevTrigger
+        ref={ref}
+        asChild
+        aria-label={t(texts.previousPage)}
+        as={props.as || "button"}
+        css={styles.item}
+        {...props}
+      >
+        <DropdownLeftOutline18Icon />
+      </ChakraPagination.PrevTrigger>
+    </ListItem>
+  );
+});
+
+export const PaginationNextTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.NextTriggerProps
+>((props, ref) => {
+  const { page, totalPages } = usePaginationContext();
+  const recipe = useSlotRecipe({ key: "pagination" });
+  const styles = recipe();
+  const { t } = useTranslation();
+  const rootProps = useRootProps();
+
+  if (page >= totalPages) return null;
 
+  if (rootProps.getHref) {
+    return (
+      <ListItem>
+        <ChakraPagination.NextTrigger
+          ref={ref}
+          {...{
+            href: rootProps.getHref(props.value as number),
+            to: rootProps.getHref(props.value as number),
+          }}
+          css={styles.item}
+          aria-label={t(texts.nextPage)}
+          {...props}
+        >
+          <DropdownRightOutline18Icon />
+        </ChakraPagination.NextTrigger>
+      </ListItem>
+    );
+  }
   return (
-    <Flex as="nav" aria-label="pagination">
-      <UnorderedList
-        display="flex"
-        listStyleType="none"
-        gap={[0, 1]}
-        padding={0}
-        margin={0}
+    <ListItem>
+      <ChakraPagination.NextTrigger
+        ref={ref}
+        css={styles.item}
+        aria-label={t(texts.nextPage)}
+        as={props.as || "button"}
+        {...props}
       >
-        <ListItem aria-label={t(texts.previousPage)}>
-          <TextLink
-            onClick={() => onPageChange(selectedPage - 1)}
-            sx={hasPreviousPage ? style.link : style.disabled}
-          >
-            <DropdownLeftFill18Icon sx={style.icon} />
-          </TextLink>
-        </ListItem>
-        {renderPaginationButtons()}
-        <ListItem aria-label={t(texts.nextPage)}>
-          <TextLink
-            onClick={() => onPageChange(selectedPage + 1)}
-            sx={hasNextPage ? style.link : style.disabled}
-          >
-            <DropdownRightFill18Icon sx={style.icon} />
-          </TextLink>
-        </ListItem>
-      </UnorderedList>
-    </Flex>
+        <DropdownRightOutline18Icon />
+      </ChakraPagination.NextTrigger>
+    </ListItem>
+  );
+});
+
+export const PaginationItems = (
+  props: React.HTMLAttributes<HTMLElement> & {},
+) => {
+  return (
+    <ChakraPagination.Context>
+      {({ pages }) =>
+        pages.map((page, index) => {
+          return page.type === "ellipsis" ? (
+            <PaginationEllipsis
+              key={`ellipsis-${index}`}
+              index={index}
+              {...props}
+            />
+          ) : (
+            <PaginationItem
+              key={`pagination-item-${page.value}`}
+              value={page.value}
+              type="page"
+              {...props}
+            />
+          );
+        })
+      }
+    </ChakraPagination.Context>
   );
 };
 
@@ -153,4 +248,12 @@ const texts = createTexts({
     en: "Next page",
     sv: "Nästa sida",
   },
+  pageOf: (page, totalPages) => {
+    return {
+      nb: `Side ${page} av ${totalPages}`,
+      nn: `Side ${page} av ${totalPages}`,
+      en: `Page ${page} of ${totalPages}`,
+      sv: `Sida ${page} av ${totalPages}`,
+    };
+  },
 });

package/src/pagination/types.ts

@@ -0,0 +1,23 @@
+import { paginationSlotRecipe } from "@/theme/slot-recipes/pagination";
+import {
+  Pagination as ChakraPagination,
+  RecipeVariantProps,
+} from "@chakra-ui/react";
+
+export type PaginationVariantProps = RecipeVariantProps<
+  typeof paginationSlotRecipe
+>;
+
+export type ButtonVariantContext = {
+  getHref?: (page: number) => string;
+};
+
+export type PaginationProps = Omit<
+  ChakraPagination.RootProps,
+  "type" | "translations"
+> &
+  ButtonVariantContext & {};
+
+export type PaginationRootProps = Omit<ChakraPagination.RootProps, "type"> &
+  React.PropsWithChildren<PaginationVariantProps> &
+  ButtonVariantContext & {};

package/src/popover/index.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { CloseButton } from "@/button";
+import { useColorMode } from "@/color-mode";
+import {
+  Portal,
+  Popover as ChakraPopover,
+  usePopoverContext,
+} from "@chakra-ui/react";
+import React, { forwardRef, useEffect } from "react";
+
+export const Popover = ChakraPopover.Root;
+
+export const PopoverTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.TriggerProps
+>(({ children, ...props }, ref) => {
+  const isStringChild = typeof children === "string";
+
+  return (
+    <ChakraPopover.Trigger {...props} ref={ref} asChild={!isStringChild}>
+      {children}
+    </ChakraPopover.Trigger>
+  );
+});
+
+export type PopoverProps = ChakraPopover.ContentProps &
+  React.RefAttributes<HTMLDivElement> & {
+    showCloseButton?: boolean;
+  };
+
+export const PopoverContent = forwardRef<HTMLDivElement, PopoverProps>(
+  ({ children, showCloseButton = false, ...props }, ref) => {
+    const { colorMode } = useColorMode();
+
+    const closeButtonRef = React.useRef<HTMLButtonElement>(null);
+
+    const { open } = usePopoverContext();
+
+    useEffect(() => {
+      if (showCloseButton && open && closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+    }, [showCloseButton, open]);
+
+    return (
+      <Portal>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content ref={ref} {...props}>
+            <ChakraPopover.Arrow />
+            {showCloseButton && (
+              <div>
+                <ChakraPopover.CloseTrigger asChild>
+                  <CloseButton
+                    className={colorMode === "dark" ? "light" : "dark"}
+                    ref={closeButtonRef}
+                  />
+                </ChakraPopover.CloseTrigger>
+              </div>
+            )}
+            <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
+          </ChakraPopover.Content>
+        </ChakraPopover.Positioner>
+      </Portal>
+    );
+  },
+);

package/src/progress-indicator/ProgressDot.tsx

@@ -1,23 +1,24 @@
-import React from "react";
-import { Box } from "..";
-import { useMultiStyleConfig } from "@chakra-ui/react";
+"use client";
+import React, { PropsWithChildren } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+import { ProgressIndicatorVariantProps } from "./ProgressIndicator";
 
-type ProgressDot = {
+type ProgressDot = PropsWithChildren<ProgressIndicatorVariantProps> & {
   isActive: boolean;
 };
 
 export const ProgressDot = ({ isActive }: ProgressDot) => {
-  const style = useMultiStyleConfig("ProgressIndicator");
+  const recipe = useSlotRecipe({ key: "progressIndicator" });
+  const style = recipe({});
   return (
-    <Box
-      as="svg"
+    <chakra.svg
       display="block"
-      __css={style.progressDot}
+      css={style.progressDot}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 100 100"
       aria-current={isActive ? "step" : undefined}
     >
-      <Box as="circle" cx="50" cy="50" r="50" />
-    </Box>
+      <chakra.circle as="circle" cx="50" cy="50" r="50" />
+    </chakra.svg>
   );
 };

package/src/progress-indicator/ProgressIndicator.tsx

@@ -1,12 +1,21 @@
-import { useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
+"use client";
+import { BoxProps, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { Box, createTexts, useTranslation } from "..";
 import { ProgressDot } from "./ProgressDot";
+import { progressIndicatorRecipe } from "../theme/slot-recipes/progress-indicator";
 
-type ProgressIndicatorProps = {
-  numberOfSteps: number;
-  activeStep: number;
-};
+export type ProgressIndicatorVariantProps = RecipeVariantProps<
+  typeof progressIndicatorRecipe
+>;
+
+export type ProgressIndicatorProps = BoxProps &
+  PropsWithChildren<ProgressIndicatorVariantProps> & {
+    children?: React.ReactNode;
+    numberOfSteps: number;
+    activeStep: number;
+    colorPalette?: string;
+  };
 
 /**
  * A progress indicator is used to show which step of a process a user is currently in
@@ -21,23 +30,28 @@ type ProgressIndicatorProps = {
  * />
  * ```
  */
-export const ProgressIndicator = ({
-  numberOfSteps,
-  activeStep,
-}: ProgressIndicatorProps) => {
+
+export const ProgressIndicator = forwardRef<
+  HTMLDivElement,
+  ProgressIndicatorProps
+>(({ numberOfSteps, activeStep, colorPalette = "brand" }) => {
   const { t } = useTranslation();
-  const style = useMultiStyleConfig("ProgressIndicator");
+  const recipe = useSlotRecipe({
+    key: "progressIndicator",
+  });
+
+  const styles = recipe({});
 
   return (
     <Box
-      __css={style.root}
+      css={styles.root}
       role="progressbar"
       aria-valuemin={1}
       aria-valuemax={numberOfSteps}
       aria-valuenow={activeStep}
       aria-valuetext={t(texts.stepsOf(activeStep, numberOfSteps))}
     >
-      <Box __css={style.container}>
+      <Box css={styles.container}>
         {Array.from({ length: numberOfSteps }, (_, i) => (
           <ProgressDot
             key={i}
@@ -48,8 +62,7 @@ export const ProgressIndicator = ({
       </Box>
     </Box>
   );
-};
-
+});
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,

package/src/provider/SporProvider.tsx

@@ -1,11 +1,15 @@
-import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
+"use client";
 import { Global } from "@emotion/react";
-import deepmerge from "deepmerge";
 import React from "react";
-import { Language, LanguageProvider } from "..";
-import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../";
+import { Language, LanguageProvider, system, themes } from "..";
+
+import { Toaster } from "../toast/toast";
+
+import { Brand, fontFaces } from "../theme/brand";
+import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
+import { ColorModeProvider } from "../color-mode";
 
-type SporProviderProps = ChakraProviderProps & {
+type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
   language?: Language;
   brand?: Brand;
 };
@@ -35,6 +39,7 @@ type SporProviderProps = ChakraProviderProps & {
  *
  * ```tsx
  * import { extendTheme, SporProvider } from "@vygruppen/spor-react";
+import { theme } from '../../../../apps/docs/app/features/portable-text/code-block/codeTheme';
  * const theme = extendTheme({
  *  colors: { myApp: { primary: "tomato" } }
  * });
@@ -47,21 +52,19 @@ type SporProviderProps = ChakraProviderProps & {
  * ```
  */
 export const SporProvider = ({
-  theme = defaultSporTheme,
   language = Language.NorwegianBokmal,
   brand = Brand.VyDigital,
   children,
-  ...props
 }: SporProviderProps) => {
-  const brandCustomizations = brandTheme[brand] ?? {};
-
-  const extendedTheme = deepmerge(theme, brandCustomizations);
-
   return (
     <LanguageProvider language={language}>
-      <ChakraProvider theme={extendedTheme} {...props}>
-        <Global styles={fontFaces} />
-        {children}
+      <ChakraProvider value={themes[brand] ?? system}>
+        <ColorModeProvider>
+          <Toaster />
+          <Global styles={fontFaces} />
+
+          {children}
+        </ColorModeProvider>
       </ChakraProvider>
     </LanguageProvider>
   );