@vygruppen/spor-react 8.2.1 → 9.0.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, 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, 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, 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-AKOJGLTQ.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, 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, 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-BWLVKMWU.mjs';

package/package.json

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

package/src/accordion/Expandable.tsx

@@ -12,7 +12,10 @@ import { Accordion, AccordionProps } from "./Accordion";
 import { useAccordionContext } from "./AccordionContext";
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<
+  AccordionProps,
+  "title" | "index" | "defaultIndex" | "onChange"
+> & {
   /** The hidden content */
   children: React.ReactNode;
   /** The title that's shown inside the toggle button */
@@ -28,6 +31,13 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
    * If the size is set to `lg`, the icon should be 30px.
    */
   leftIcon?: React.ReactNode;
+
+  /** Controlled value of whether the accordion is open or not */
+  isOpen?: boolean;
+  /** Default value of when the accordion is open or not */
+  defaultOpen?: boolean;
+  /** Callback for when the expandable opens or closes */
+  onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -47,10 +57,20 @@ export const Expandable = ({
   title,
   leftIcon,
   size = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {},
   ...rest
 }: ExpandableProps) => {
   return (
-    <Accordion {...rest} size={size}>
+    <Accordion
+      {...rest}
+      index={isOpen ? 0 : undefined}
+      defaultIndex={defaultOpen ? 0 : undefined}
+      allowMultiple={true}
+      size={size}
+      onChange={(expandedIndex) => onChange(expandedIndex === 0)}
+    >
       <ExpandableItem
         headingLevel={headingLevel}
         title={title}

package/src/breadcrumb/Breadcrumb.tsx

@@ -3,12 +3,14 @@ import {
   BreadcrumbItem as ChakraBreadcrumbItem,
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbProps as ChakraBreadcrumbProps,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
-import { useColorModeValue } from "@chakra-ui/react";
 
-type BreadcrumbProps = ChakraBreadcrumbProps;
+type BreadcrumbProps = Omit<ChakraBreadcrumbProps, "variant"> & {
+  variant?: "base" | "ghost";
+};
 /**
  * A breadcrumb component.
  *

package/src/datepicker/DateRangePicker.tsx

@@ -121,6 +121,7 @@ export function DateRangePicker({
           isOpen={state.isOpen}
           onOpen={state.open}
           onClose={state.close}
+          flip={false}
         >
           <InputGroup {...groupProps} width="auto" display="inline-flex">
             <PopoverAnchor>

package/src/input/ChoiceChip.tsx

@@ -19,14 +19,14 @@ export type ChoiceChipProps = {
     default: React.ReactNode;
     checked: React.ReactNode;
   };
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg";
   chipType?: "icon" | "choice" | "filter";
   variant?: "base" | "accent" | "floating";
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
  *
- * Choice chips are available in four different sizes - `sm`, `md`, `lg` and `xl`.
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
  *
  * ```tsx
  * <Stack flexDirection="row">
@@ -59,7 +59,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
     children,
     icon,
     isDisabled,
-    size = "md",
+    size = "sm",
     chipType = "choice",
     variant = "base",
   } = props;

package/src/input/NumericStepper.tsx

@@ -1,8 +1,8 @@
 import {
   chakra,
-  useColorModeValue,
   useControllableState,
   useFormControl,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import {
@@ -13,7 +13,6 @@ import {
   createTexts,
   useTranslation,
 } from "..";
-import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
 
 type NumericStepperProps = {
   /** The name of the input field */
@@ -76,19 +75,17 @@ export function NumericStepper({
   ...boxProps
 }: NumericStepperProps) {
   const { t } = useTranslation();
+  const styles = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState<number>({
     value: valueProp,
     onChange: onChangeProp,
     defaultValue,
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
-  const textColor = useColorModeValue("darkGrey", "white");
-  const backgroundColor = useColorModeValue("white", "darkGrey");
-  const focusColor = useColorModeValue("greenHaze", "azure");
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
   return (
-    <Flex alignItems="center" {...boxProps}>
+    <Flex __css={styles.container} {...boxProps}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
@@ -106,38 +103,11 @@ export function NumericStepper({
           value={value}
           {...formControlProps}
           id={!showZero && value === 0 ? undefined : formControlProps.id}
-          fontSize="sm"
-          fontWeight="bold"
+          sx={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
-          marginX={1}
-          paddingX={1}
-          borderRadius="xs"
-          textAlign="center"
-          backgroundColor={backgroundColor}
-          color={textColor}
-          transition="box-shadow .1s ease-out"
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           aria-label={value.toString()}
-          _hover={{
-            boxShadow: getBoxShadowString({
-              borderColor: "currentColor",
-              borderWidth: 1,
-            }),
-            _disabled: {
-              boxShadow: "none",
-            },
-          }}
-          _disabled={{
-            opacity: 0.5,
-          }}
-          _focus={{
-            outline: "none",
-            boxShadow: getBoxShadowString({
-              borderColor: focusColor,
-              borderWidth: 1,
-            }),
-          }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const numericInput = Number(e.target.value);
             if (Number.isNaN(numericInput)) {
@@ -148,14 +118,7 @@ export function NumericStepper({
         />
       ) : (
         <chakra.text
-          fontSize="sm"
-          fontWeight="bold"
-          width="4ch"
-          marginX={1}
-          paddingX={1}
-          textAlign="center"
-          color={textColor}
-          transition="box-shadow .1s ease-out"
+          sx={styles.text}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-label={value.toString()}
         >
@@ -190,14 +153,9 @@ type VerySmallButtonProps = {
 };
 /** Internal override for extra small icon buttons */
 const VerySmallButton = (props: VerySmallButtonProps) => {
+  const styles = useMultiStyleConfig("NumericStepper", {});
   return (
-    <IconButton
-      variant="primary"
-      size="xs"
-      minWidth="24px"
-      minHeight="24px"
-      {...props}
-    />
+    <IconButton variant="primary" size="xs" sx={styles.button} {...props} />
   );
 };
 

package/src/input/PasswordInput.tsx

@@ -43,6 +43,8 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
           <Button
             variant="ghost"
             type="button"
+            fontWeight="normal"
+            size="sm"
             onClick={onToggle}
             borderRadius="sm"
             marginRight={1}

package/src/input/PhoneNumberInput.tsx

@@ -106,7 +106,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             });
           }}
           position="relative"
-          left="-1px" // Makes the borders overlap
+          left="1px" // Makes the borders overlap
         />
       </AttachedInputs>
     );

package/src/input/Switch.tsx

@@ -5,10 +5,7 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 
-export type SwitchProps = Exclude<
-  ChakraSwitchProps,
-  "colorScheme" | "variant"
-> & {
+export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
   size?: "sm" | "md" | "lg";
 };
 
@@ -24,17 +21,17 @@ export type SwitchProps = Exclude<
  * </FormControl>
  * ```
  *
- * Switches are available in three different sizes - `sm`, `md` and `lg`. There are also two variants - `solid` and `outline`.
+ * Switches are available in three different sizes - `sm`, `md` and `lg`.
  *
  * ```tsx
  * <FormControl>
  *   <FormLabel>Enable alerts?</FormLabel>
- *   <Switch variant="outline" size="lg" />
+ *   <Switch size="sm" />
  * </FormControl>
  * ```
  */
 export const Switch = forwardRef<SwitchProps, "input">(
   ({ size = "md", ...props }: SwitchProps, ref) => {
-    return <ChakraSwitch variant="solid" size={size} {...props} ref={ref} />;
+    return <ChakraSwitch size={size} {...props} ref={ref} />;
   },
 );

package/src/loader/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex, Text } from "@chakra-ui/react";
+import { Box, BoxProps, Text, useMultiStyleConfig } from "@chakra-ui/react";
 import React from "react";
 import { useProgressBar } from "react-aria";
 import { createTexts, useTranslation } from "..";
@@ -79,37 +79,20 @@ export const ProgressBar = ({
     value,
     "aria-label": ariaLabel || t(texts.label(value)),
   });
+  const styles = useMultiStyleConfig("ProgressBar", {});
   return (
     <>
       <Box
         {...progressBarProps}
         title={t(texts.label(value))}
-        minWidth="100px"
+        __css={styles.container}
         {...rest}
       >
-        <Flex
-          backgroundColor="coralGreen"
-          borderRadius="sm"
-          width={width}
-          justifyContent="flex-start"
-          marginX="auto"
-        >
-          <Box
-            backgroundColor="greenHaze"
-            borderRadius="sm"
-            height={height}
-            width={`${value}%`}
-            maxWidth="100%"
-            transition="width .2s ease-out"
-          />
-        </Flex>
+        <Box width={width} __css={styles.background}>
+          <Box __css={styles.progress} height={height} width={`${value}%`} />
+        </Box>
         {currentLoadingText && (
-          <Text
-            textAlign="center"
-            marginTop={2}
-            fontWeight="bold"
-            {...labelProps}
-          >
+          <Text sx={styles.description} {...labelProps}>
             {currentLoadingText}
           </Text>
         )}

package/src/tab/Tabs.tsx

@@ -9,11 +9,10 @@ export type TabsProps = Exclude<
   ChakraTabsProps,
   "colorScheme" | "variant" | "orientation" | "size"
 > & {
-  colorScheme: "base" | "accent";
-  /** Defaults to `md` */
-  size?: "sm" | "md" | "lg" | "xl";
-  /** Defaults to `round` */
-  variant?: "square" | "round";
+  /** Defaults to `base` */
+  variant: "base" | "accent";
+  /** Defaults to `sm` */
+  size?: "xs" | "sm" | "md" | "lg";
 };
 export const Tabs = forwardRef<TabsProps, "div">((props, ref) => {
   return <ChakraTabs {...props} ref={ref} />;

package/src/theme/components/accordion.ts

@@ -1,38 +1,32 @@
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import {
-  baseBackground,
-  floatingBackground,
-  ghostBackground,
-} from "../utils/background-utils";
-import { baseBorder, floatingBorder } from "../utils/border-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
-import { baseText } from "../utils/text-utils";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      border: "none",
       borderRadius: "sm",
     },
     button: {
       transitionProperty:
         "background-color, color, border-radius, box-shadow, opacity",
-      transitionDuration: "normal",
-      border: "none",
+      transitionDuration: "fast",
       borderRadius: "sm",
-      borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
       ...baseText("default", props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
+      outlineOffset: "-2px",
       ...focusVisibleStyles(props),
       _disabled: {
+        pointerEvents: "none",
         opacity: 0.4,
-        cursor: "not-allowed",
       },
     },
     panel: {
@@ -46,7 +40,6 @@ const config = helpers.defineMultiStyleConfig({
   variants: {
     ghost: (props) => ({
       button: {
-        boxShadow: "none",
         _hover: {
           ...ghostBackground("hover", props),
         },
@@ -65,6 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         },
         _hover: {
           ...baseBorder("hover", props),
+          outlineOffset: 0,
         },
         _active: {
           ...baseBackground("active", props),
@@ -76,14 +70,16 @@ const config = helpers.defineMultiStyleConfig({
       container: {
         ...floatingBackground("default", props),
         ...floatingBorder("default", props),
+        boxShadow: "sm",
       },
       button: {
         _expanded: {
           borderBottomRadius: "none",
         },
         _hover: {
-          ...ghostBackground("hover", props),
-          ...floatingBorder("default", props),
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          outlineOffset: 1,
         },
         _active: {
           ...ghostBackground("active", props),

package/src/theme/components/alert-expandable.ts

@@ -1,6 +1,5 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
 
 const parts = anatomy("alertExpandable").parts("container");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -11,19 +10,21 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: 3,
       paddingY: 2,
       fontSize: "inherit",
+      transitionProperty: "outline, border-radius",
+      transitionDuration: "fast",
       _expanded: {
         borderBottomRadius: "none",
       },
+      _hover: {
+        outline: "2px solid",
+      },
     },
   },
   variants: {
     info: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sky",
-            borderWidth: 2,
-          }),
+          outlineColor: "sky",
         },
         _active: {
           backgroundColor: "icyBlue",
@@ -33,10 +34,7 @@ const config = helpers.defineMultiStyleConfig({
     success: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "blueGreen",
-            borderWidth: 2,
-          }),
+          outlineColor: "blueGreen",
         },
         _active: {
           backgroundColor: "mint",
@@ -46,10 +44,7 @@ const config = helpers.defineMultiStyleConfig({
     warning: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sunshine",
-            borderWidth: 2,
-          }),
+          outlineColor: "sunshine",
         },
         _active: {
           backgroundColor: "cornSilk",
@@ -59,10 +54,7 @@ const config = helpers.defineMultiStyleConfig({
     "alt-transport": {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "golden",
-            borderWidth: 2,
-          }),
+          outlineColor: "golden",
         },
         _active: {
           backgroundColor: "sunshine",
@@ -72,10 +64,7 @@ const config = helpers.defineMultiStyleConfig({
     error: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "apricot",
-            borderWidth: 2,
-          }),
+          outlineColor: "apricot",
         },
         _active: {
           backgroundColor: "pink",

package/src/theme/components/breadcrumb.ts

@@ -4,7 +4,8 @@ import {
   defineStyle,
 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, baseBorder } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -21,12 +22,12 @@ const baseStyleLink = defineStyle((props) => ({
   "&:not([aria-current=page])": {
     cursor: "pointer",
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props),
+      ...baseBackground("hover", props),
     },
-    ...focusVisibleStyles(props),
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      ...baseBackground("active", props),
     },
+    ...focusVisibleStyles(props),
   },
 }));
 
@@ -39,5 +40,59 @@ const baseStyle = definePartsStyle((props) => ({
 }));
 
 export default defineMultiStyleConfig({
-  baseStyle,
+  baseStyle: definePartsStyle((props) => ({
+    link: {
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      transitionTimingFunction: "ease-out",
+      color: "inherit",
+      textDecoration: "none",
+      textStyle: "xs",
+      paddingX: 0.5,
+      borderRadius: "xs",
+      "&:not([aria-current=page])": {
+        cursor: "pointer",
+        ...focusVisibleStyles(props),
+      },
+    },
+    list: {
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+    },
+  })),
+  variants: {
+    base: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            ...baseBorder("default", props),
+          },
+          _active: {
+            ...baseBackground("active", props),
+          },
+        },
+      },
+    }),
+    ghost: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            backgroundColor: mode(
+              "ghost.surface.hover.light",
+              "ghost.surface.hover.dark",
+            )(props),
+          },
+          _active: {
+            backgroundColor: mode(
+              "ghost.surface.active.light",
+              "ghost.surface.active.dark",
+            )(props),
+          },
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });