@vygruppen/spor-react 3.4.4 → 3.5.1

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QBIZVUPL.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-HZ6V7HFA.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.4.4",
+  "version": "3.5.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,18 +25,19 @@
     "@vygruppen/spor-design-tokens": "*",
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
-    "framer-motion": ">6.0.0",
+    "awesome-phonenumber": "^5.10.0",
+    "framer-motion": "^10.16.4",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.27.0",
-    "react-stately": "^3.20.0",
+    "react-stately": "^3.25.0",
     "react-swipeable": "^7.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsup": "^6.2.2",
+    "tsup": "^7.2.0",
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.0"

package/src/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+} from "@chakra-ui/react";
+import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+type BreadcrumbProps = ChakraBreadcrumbProps;
+/**
+ * A breadcrumb component.
+ *
+ * Used to create customizable breadcrumbs.
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage={true}>
+ *    <BreadcrumbLink href="/about">About</BreadcrumbLink>
+ *  </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+export const Breadcrumb = (props: BreadcrumbProps) => {
+  return (
+    <ChakraBreadcrumb
+      separator={<DropdownRightFill18Icon color="blackAlpha.400" />}
+      {...props}
+    />
+  );
+};
+
+export const BreadcrumbItem = ChakraBreadcrumbItem;
+export const BreadcrumbLink = ChakraBreadcrumbLink;

package/src/breadcrumb/index.tsx

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

package/src/button/Button.tsx

@@ -121,7 +121,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           <ColorInlineLoader
             maxWidth={getLoaderWidth(finalSize)}
             width="100%"
-            mx={2}
+            marginX={2}
           />
         </Center>
       )}

package/src/button/FloatingActionButton.tsx

@@ -93,7 +93,7 @@ type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
-  const lastScrollPosition = React.useRef(window.scrollY);
+  const lastScrollPosition = React.useRef(typeof window !== "undefined" ? window.scrollY : 0);
   React.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;

package/src/button/IconButton.tsx

@@ -58,7 +58,7 @@ export const IconButton = forwardRef<IconButtonProps, As>(
     <ChakraIconButton
       title={props["aria-label"]}
       {...props}
-      spinner={<ColorSpinner m={1} />}
+      spinner={<ColorSpinner margin={1} />}
       ref={ref}
     />
   )

package/src/datepicker/DateRangePicker.tsx

@@ -136,7 +136,7 @@ export function DateRangePicker({
                 minHeight={minHeight}
               >
                 {!hasTrigger && (
-                  <CalendarOutline24Icon mr={2} alignSelf="center" />
+                  <CalendarOutline24Icon marginRight={2} alignSelf="center" />
                 )}
                 <DateField
                   {...startFieldProps}
@@ -145,7 +145,7 @@ export function DateRangePicker({
                   ref={hasTrigger ? undefined : ref}
                   labelProps={labelProps}
                 />
-                <Box as="span" aria-hidden="true" px="2">
+                <Box as="span" aria-hidden="true" paddingX="2">
                   –
                 </Box>
                 <DateField

package/src/index.tsx

@@ -2,6 +2,7 @@ export { extendTheme } from "@chakra-ui/react";
 export * as tokens from "@vygruppen/spor-design-tokens";
 export * from "./accordion";
 export * from "./alert";
+export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./datepicker";

package/src/input/ChoiceChip.tsx

@@ -94,7 +94,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
           {variant !== "icon" && children}
         </chakra.span>
         {variant === "filter" && state.isChecked && (
-          <CloseOutline24Icon ml={1.5} />
+          <CloseOutline24Icon marginLeft={1.5} />
         )}
       </chakra.div>
     </chakra.label>

package/src/input/PasswordInput.tsx

@@ -45,7 +45,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
             type="button"
             onClick={onToggle}
             borderRadius="sm"
-            mr={1}
+            marginRight={1}
           >
             {isShowingPassword ? t(texts.hidePassword) : t(texts.showPassword)}
           </Button>

package/src/input/SearchInput.tsx

@@ -39,8 +39,8 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput
-          pl={7}
-          pr={7}
+          paddingLeft={7}
+          paddingRight={7}
           {...props}
           id={inputId}
           type="search"
@@ -62,7 +62,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
               variant="ghost"
               type="button"
               size="sm"
-              mr={1}
+              marginRight={1}
               aria-label={t(texts.reset)}
               icon={<CloseOutline24Icon />}
               onClick={onReset}

package/src/layout/Divider.tsx

@@ -7,7 +7,7 @@ export type DividerProps = BoxProps;
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
  *
  * ```tsx
- * <Divider mt={4} mb={6} />
+ * <Divider marginTop={4} marginBottom={6} />
  * ```
  */
 export const Divider = forwardRef<BoxProps, As>((props, ref) => {

package/src/loader/ColorSpinner.tsx

@@ -35,7 +35,7 @@ export const ColorSpinner = ({
         </ClientOnly>
       </Box>
       {children && (
-        <Box mt={3} fontWeight="bold">
+        <Box marginTop={3} fontWeight="bold">
           {children}
         </Box>
       )}

package/src/loader/ContentLoader.tsx

@@ -12,7 +12,7 @@ export type ContentLoaderProps = BoxProps;
 export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
   return (
     <Box {...props}>
-      <Box maxWidth="140px" mx="auto">
+      <Box maxWidth="140px" marginX="auto">
         <ClientOnly>
           {() => <Lottie animationData={contentLoaderData} />}
         </ClientOnly>

package/src/loader/LightSpinner.tsx

@@ -29,10 +29,12 @@ export const LightSpinner = ({
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
-        <ClientOnly>{() => <Lottie animationData={spinnerLightData} />}</ClientOnly>
+        <ClientOnly>
+          {() => <Lottie animationData={spinnerLightData} />}
+        </ClientOnly>
       </Box>
       {children && (
-        <Box mt={3} fontWeight="bold">
+        <Box marginTop={3} fontWeight="bold">
           {children}
         </Box>
       )}

package/src/stepper/StepperStep.tsx

@@ -19,7 +19,7 @@ export const StepperStep = ({ children, stepNumber }: StepperStepProps) => {
   return (
     <Box __css={style.stepContainer}>
       {stepNumber > 1 && (
-        <DropdownRightFill18Icon mx={5} display={["none", "block"]} />
+        <DropdownRightFill18Icon marginX={5} display={["none", "block"]} />
       )}
 
       <Flex

package/src/theme/components/breadcrumb.ts

@@ -0,0 +1,47 @@
+import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleLink = defineStyle({
+  transitionProperty: "common",
+  transitionDuration: "fast",
+  transitionTimingFunction: "ease-out",
+  outline: "none",
+  color: "inherit",
+  textDecoration: "none",
+  "&:not([aria-current=page])": {
+    cursor: "pointer",
+    paddingX: 0.5,
+    borderRadius: "xs",
+    _hover: {
+      backgroundColor: "coralGreen",
+    },
+    _focusVisible: {
+      boxShadow: getBoxShadowString({
+        borderColor: "greenHaze",
+        borderWidth: 2,
+      }),
+    },
+    _active: {
+      backgroundColor: "mint",
+    },
+  },
+});
+
+const baseStyle = definePartsStyle({
+  link: baseStyleLink,
+  list: {
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+  },
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});

package/src/theme/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./accordion";
 export { default as Alert } from "./alert";
 export { default as Badge } from "./badge";
+export { default as Breadcrumb } from "./breadcrumb";
 export { default as Button } from "./button";
 export { default as Card } from "./card";
 export { default as CardSelect } from "./card-select";