@vygruppen/spor-react 9.4.0 → 9.5.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-JRXSGTL2.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-XXA3IGVH.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./logo";
 export * from "./media-controller";
 export * from "./modal";
 export * from "./nudge";
+export * from "./pagination";
 export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";

package/src/pagination/Pagination.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { Center, createTexts, useTranslation, Flex, TextLink } from "..";
+import {
+  ListItem,
+  UnorderedList,
+  useMultiStyleConfig,
+  Link,
+} from "@chakra-ui/react";
+import {
+  DropdownLeftFill18Icon,
+  DropdownRightFill18Icon,
+} 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;
+};
+
+/**
+ * A pagination component is used to navigate between multiple pages.
+ *
+ * You specify the total amount of pages and the currently selected page.
+ *
+ * ```tsx
+ * <Pagination
+ *   totalPages={10}
+ *   selectedPage={3}
+ *   onPageChange={handlePageChange}
+ * />
+ * ```
+ **/
+
+export const Pagination = ({
+  totalPages,
+  selectedPage,
+  onPageChange,
+}: PaginationProps) => {
+  const { t } = useTranslation();
+
+  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);
+            }
+          }}
+          padding={pageNumber === "..." ? 0 : undefined}
+          sx={pageNumber === selectedPage ? style.activeButton : style.link}
+        >
+          {pageNumber}
+        </Link>
+      ),
+    );
+  };
+
+  return (
+    <Flex as="nav" aria-label="pagination">
+      <UnorderedList
+        display="flex"
+        listStyleType="none"
+        gap={[0, 1]}
+        padding={0}
+        margin={0}
+      >
+        <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>
+  );
+};
+
+const texts = createTexts({
+  previousPage: {
+    nb: "Forrige side",
+    nn: "Førre side",
+    en: "Previous page",
+    sv: "Föregående sida",
+  },
+  nextPage: {
+    nb: "Neste side",
+    nn: "Neste side",
+    en: "Next page",
+    sv: "Nästa sida",
+  },
+});

package/src/pagination/index.tsx

@@ -0,0 +1 @@
+export * from "./Pagination";

package/src/theme/components/datepicker.ts

@@ -87,9 +87,9 @@ const config = helpers.defineMultiStyleConfig({
       [$arrowBackground.variable]: surface("default", props).backgroundColor,
     },
     calendarPopover: {
-      ...baseBackground("default", props),
+      ...floatingBackground("default", props),
       ...baseText("default", props),
-      ...baseBorder("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "md",
     },
     weekdays: {

package/src/theme/components/index.ts

@@ -26,6 +26,7 @@ export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
 export { default as NumericStepper } from "./numeric-stepper";
+export { default as Pagination } from "./pagination";
 export { default as Popover } from "./popover";
 export { default as ProgressBar } from "./progress-bar";
 export { default as ProgressIndicator } from "./progress-indicator";

package/src/theme/components/pagination.ts

@@ -0,0 +1,74 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { anatomy } from "@chakra-ui/theme-tools";
+import { ghostBackground } from "../utils/ghost-utils";
+import { baseText } from "../utils/base-utils";
+
+const parts = anatomy("Pagination").parts(
+  "listItem",
+  "link",
+  "activeButton",
+  "disabled",
+  "icon",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props: any) => ({
+    activeButton: {
+      fontWeight: "bold",
+      ...commonStyles,
+      ...ghostBackground("active", props),
+      _hover: {
+        ...ghostBackground("hover", props),
+        borderRadius: 50,
+      },
+      _active: {
+        borderRadius: 50,
+        ...ghostBackground("active", props),
+      },
+    },
+    disabled: {
+      ...commonStyles,
+      cursor: "not-allowed",
+      pointerEvents: "none",
+      boxShadow: "none",
+      ...baseText("disabled", props),
+    },
+    listItem: {
+      display: "flex",
+    },
+    link: {
+      ...commonStyles,
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
+      _hover: {
+        ...ghostBackground("hover", props),
+        borderRadius: 50,
+        _disabled: {
+          ...baseText("disabled", props),
+        },
+      },
+      _active: {
+        borderRadius: 50,
+        ...ghostBackground("active", props),
+      },
+    },
+    icon: {
+      bottom: "-0.03em !important",
+    },
+  }),
+});
+
+const commonStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 5,
+  height: 5,
+  backgroundImage: "none",
+  borderRadius: 50,
+  fontSize: "xs",
+};
+
+export default config;