@vygruppen/spor-react 12.1.2 → 12.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.1.2",
+  "version": "12.2.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -36,8 +36,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.5",
-    "@vygruppen/spor-icon-react": "4.0.3",
-    "@vygruppen/spor-loader": "0.6.0"
+    "@vygruppen/spor-loader": "0.6.0",
+    "@vygruppen/spor-icon-react": "4.0.4"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.8.0",

package/src/accordion/Accordion.tsx

@@ -8,7 +8,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DropdownDownFill24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { warnAboutMismatchingIcon } from "./helpers";
 import {
@@ -112,5 +112,6 @@ export const AccordionItemContent = forwardRef<
     </ChakraAccordion.ItemContent>
   );
 });
+Accordion.displayName = "Accordion";
 
 export const AccordionItem = ChakraAccordion.Item;

package/src/accordion/Expandable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import {
   Accordion,
@@ -85,3 +85,5 @@ export const ExpandableItem = (props: ExpandableItemProps) => {
     </AccordionItem>
   );
 };
+
+Expandable.displayName = "Expandable";

package/src/accordion/helpers.ts

@@ -1,5 +1,6 @@
 type WarnAboutMismatchingIcon = {
-  icon: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  icon: any; //See if we can fint another type for this
 };
 
 export const warnAboutMismatchingIcon = ({

package/src/alert/Alert.tsx

@@ -7,7 +7,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { IconComponent } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { CloseButton } from "@/button";
 
@@ -101,3 +101,5 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
     </ChakraAlert.Root>
   );
 });
+
+Alert.displayName = "Alert";

package/src/alert/AlertIcon.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert as ChakraAlert, Box, useSlotRecipe } from "@chakra-ui/react";
+import { Alert as ChakraAlert, Box } from "@chakra-ui/react";
 import {
   AltTransportFill24Icon,
   ErrorFill24Icon,
@@ -12,7 +12,6 @@ import {
   SuccessFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { PropsWithChildren } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
@@ -41,22 +40,30 @@ export const AlertIcon = ({ variant, customIcon }: AlertIconProps) => {
 
 const getIcon = (variant: AlertProps["variant"]) => {
   switch (variant) {
-    case "info":
+    case "info": {
       return InformationFill24Icon;
-    case "success":
+    }
+    case "success": {
       return SuccessFill24Icon;
-    case "important":
+    }
+    case "important": {
       return WarningFill24Icon;
-    case "alt":
+    }
+    case "alt": {
       return AltTransportFill24Icon;
-    case "error":
+    }
+    case "error": {
       return ErrorFill24Icon;
-    case "error-secondary":
+    }
+    case "error-secondary": {
       return ErrorOutline24Icon;
-    case "neutral":
+    }
+    case "neutral": {
       return QuestionFill24Icon;
-    case "service":
+    }
+    case "service": {
       return ServiceFill24Icon;
+    }
   }
 };
 

package/src/alert/ExpandableAlert.tsx

@@ -10,12 +10,11 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { AccordionItemContent } from "@/accordion";
 import { alertExpandableSlotRecipe } from "@/theme/slot-recipes/alert-expandable";
 
-import { AlertProps } from "./Alert";
 import { AlertIcon } from "./AlertIcon";
 
 type ExpandableAlertVariantProps = RecipeVariantProps<
@@ -125,3 +124,5 @@ export const ExpandableAlert = forwardRef<HTMLDivElement, ExpandableAlertProps>(
     );
   },
 );
+
+ExpandableAlert.displayName = "ExpandableAlert";

package/src/alert/ServiceAlert.tsx

@@ -15,7 +15,7 @@ import {
   ServiceFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { alertServiceSlotRecipe } from "../theme/slot-recipes/alert-service";
@@ -143,6 +143,7 @@ export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
     );
   },
 );
+ServiceAlert.displayName = "ServiceAlert";
 
 const texts = createTexts({
   notification: (notification) => {

package/src/breadcrumb/Breadcrumb.tsx

@@ -2,9 +2,6 @@
 
 import {
   Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbCurrentLink as ChakraBreadcrumbCurrentLink,
-  BreadcrumbEllipsis as ChakraBreadcrumbEllipsis,
-  BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbRootProps,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
@@ -25,8 +22,8 @@ import React, { forwardRef } from "react";
  */
 export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   ({ children, ...props }, ref) => {
-    const validChildren = React.Children.toArray(children).filter(
-      React.isValidElement,
+    const validChildren = React.Children.toArray(children).filter((element) =>
+      React.isValidElement(element),
     );
 
     return (
@@ -51,6 +48,10 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   },
 );
 
-export const BreadcrumbLink = ChakraBreadcrumbLink;
-export const BreadcrumbCurrentLink = ChakraBreadcrumbCurrentLink;
-export const BreadcrumbEllipsis = ChakraBreadcrumbEllipsis;
+Breadcrumb.displayName = "Breadcrumb";
+
+export {
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipsis,
+  BreadcrumbLink,
+} from "@chakra-ui/react";

package/src/button/Button.tsx

@@ -92,7 +92,6 @@ const LoadingContent = ({
   </>
 );
 
-// eslint-disable-next-line react/display-name
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -158,6 +157,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
+Button.displayName = "Button";
+
 const texts = createTexts({
   loadingText: {
     nb: "Laster…",

package/src/button/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import {
   type GroupProps as ChakraGroupProps,
   type RecipeVariantProps,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { groupRecipe } from "../theme/recipes/group";
 
@@ -67,3 +67,4 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     );
   },
 );
+ButtonGroup.displayName = "ButtonGroup";

package/src/button/Clipboard.tsx

@@ -34,6 +34,7 @@ const ClipboardIcon = React.forwardRef<
     </ChakraClipboard.Indicator>
   );
 });
+ClipboardIcon.displayName = "ClipboardIcon";
 
 const ClipboardCopyText = React.forwardRef<
   HTMLDivElement,
@@ -50,6 +51,7 @@ const ClipboardCopyText = React.forwardRef<
     </ChakraClipboard.Indicator>
   );
 });
+ClipboardCopyText.displayName = "ClipboardCopyText";
 
 type ClipboardButtonProps = ButtonProps;
 
@@ -65,6 +67,7 @@ export const ClipboardButton = React.forwardRef<
     </ChakraClipboard.Trigger>
   );
 });
+ClipboardButton.displayName = "ClipboardButton";
 
 export const Clipboard = ChakraClipboard.Root;
 

package/src/button/CloseButton.tsx

@@ -5,7 +5,7 @@ import {
   CloseFill24Icon,
   CloseFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { IconButton, IconButtonProps } from "./IconButton";
@@ -42,16 +42,20 @@ export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
     );
   },
 );
+CloseButton.displayName = "CloseButton";
 
 const getIcon = (size: CloseButtonProps["size"]) => {
   switch (size) {
     case "xs":
-    case "sm":
+    case "sm": {
       return <CloseFill18Icon />;
-    case "md":
+    }
+    case "md": {
       return <CloseFill24Icon />;
-    case "lg":
+    }
+    case "lg": {
       return <CloseFill30Icon />;
+    }
   }
 };
 

package/src/button/FloatingActionButton.tsx

@@ -42,7 +42,6 @@ export const FloatingActionButton = forwardRef<
 >(
   (
     {
-      as,
       children,
       icon,
       variant,
@@ -53,18 +52,18 @@ export const FloatingActionButton = forwardRef<
     ref,
   ) => {
     const [isTextVisible, setIsTextVisible] = React.useState(
-      externalIsTextVisible !== undefined ? externalIsTextVisible : false,
+      externalIsTextVisible === undefined ? false : externalIsTextVisible,
     );
     const scrollDirection = useScrollDirection();
     useEffect(() => {
       if (externalIsTextVisible !== undefined) {
         return;
       }
-      const id = window.setTimeout(
+      const id = globalThis.setTimeout(
         () => setIsTextVisible(scrollDirection !== "down"),
         1000,
       );
-      return () => window.clearTimeout(id);
+      return () => globalThis.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
 
     useEffect(() => {
@@ -96,13 +95,14 @@ export const FloatingActionButton = forwardRef<
     );
   },
 );
+FloatingActionButton.displayName = "FloatingActionButton";
 
 type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
   const lastScrollPosition = React.useRef(
-    typeof window !== "undefined" ? window.scrollY : 0,
+    globalThis.window === undefined ? 0 : window.scrollY,
   );
   React.useEffect(() => {
     const onScroll = () => {

package/src/button/IconButton.tsx

@@ -72,3 +72,4 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     );
   },
 );
+IconButton.displayName = "IconButton";

package/src/color-mode/color-mode.tsx

@@ -7,7 +7,7 @@ import { ThemeProvider, useTheme } from "next-themes";
 import * as React from "react";
 import { LuMoon, LuSun } from "react-icons/lu";
 
-export interface ColorModeProviderProps extends ThemeProviderProps {}
+export type ColorModeProviderProps = ThemeProviderProps;
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
@@ -45,7 +45,7 @@ export function ColorModeIcon() {
   return colorMode === "dark" ? <LuMoon /> : <LuSun />;
 }
 
-interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+type ColorModeButtonProps = Omit<IconButtonProps, "aria-label">;
 
 export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,

package/src/datepicker/Calendar.tsx

@@ -2,7 +2,6 @@
 
 import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { createCalendar } from "@internationalized/date";
-import React from "react";
 import {
   CalendarProps as ReactAriaCalendarProps,
   DateValue,

package/src/datepicker/CalendarCell.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { Box, ConditionalValue, useSlotRecipe } from "@chakra-ui/react";
+import { Box, useSlotRecipe } from "@chakra-ui/react";
 import {
   CalendarDate,
   DateValue,
   isSameMonth,
   isToday,
 } from "@internationalized/date";
-import React, { PropsWithChildren, useEffect, useRef } from "react";
+import { PropsWithChildren, useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
@@ -27,7 +27,7 @@ export function CalendarCell({
   currentMonth,
   variant,
 }: CalendarCellProps) {
-  const ref = useRef(null);
+  const ref = useRef<HTMLButtonElement>(null);
   const {
     cellProps,
     buttonProps,
@@ -44,7 +44,7 @@ export function CalendarCell({
   });
   const styles = recipe({ variant });
 
-  const stateProps: Record<string, any> = {};
+  const stateProps: Record<string, unknown> = {};
   if (isSelected) {
     stateProps["data-selected"] = true;
   }
@@ -64,7 +64,7 @@ export function CalendarCell({
   TODO: Follow up with react-spectrum to see if they can solve it on their end
   */
   useEffect(() => {
-    (ref as any)?.current?.addEventListener(
+    ref.current?.addEventListener(
       "touchend",
       (event: TouchEvent) => {
         event.preventDefault();

package/src/datepicker/CalendarGrid.tsx

@@ -2,7 +2,6 @@
 
 import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { endOfMonth, getWeeksInMonth } from "@internationalized/date";
-import React from "react";
 import { AriaCalendarGridProps, useCalendarGrid } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
@@ -44,7 +43,9 @@ export function CalendarGrid({
 
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
+  const weeksInMonthRange = Array.from({ length: weeksInMonth })
+    .fill(0)
+    .map((_, i) => i);
   const recipe = useSlotRecipe({
     key: "datePicker",
     recipe: datePickerSlotRecipe,

package/src/datepicker/CalendarHeader.tsx

@@ -5,7 +5,6 @@ import {
   ArrowLeftOutline24Icon,
   ArrowRightOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
 import { createTexts, useTranslation } from "../i18n";
@@ -43,9 +42,7 @@ export function CalendarHeader({
   return (
     <Flex alignItems="center" paddingBottom="4" justifyContent="space-between">
       <CalendarNavigator
-        title={
-          title ? title : isYearPickerVisible ? monthTitle : monthAndYearTitle
-        }
+        title={title || (isYearPickerVisible ? monthTitle : monthAndYearTitle)}
         unit="month"
         onPrevious={() =>
           state.setFocusedDate(state.focusedDate.subtract({ months: 1 }))

package/src/datepicker/CalendarTriggerButton.tsx

@@ -2,7 +2,7 @@
 
 import { BoxProps, PopoverAnchor, useSlotRecipe } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 import { AriaButtonProps } from "react-aria";
 
 import {
@@ -24,7 +24,7 @@ type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
 export const CalendarTriggerButton = forwardRef<
   HTMLDivElement,
   CalendarTriggerButtonProps
->(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+>(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "datePicker",
@@ -32,8 +32,6 @@ export const CalendarTriggerButton = forwardRef<
   });
   const styles = recipe({ variant });
 
-  const { onPress, ...filteredButtonProps } = buttonProps;
-
   return (
     <PopoverAnchor {...buttonProps}>
       <IconButton
@@ -47,6 +45,7 @@ export const CalendarTriggerButton = forwardRef<
     </PopoverAnchor>
   );
 });
+CalendarTriggerButton.displayName = "CalendarTriggerButton";
 
 const texts = createTexts({
   openCalendar: {

package/src/datepicker/DateField.tsx

@@ -14,10 +14,12 @@ import { useCurrentLocale } from "./utils";
 
 function createCalendar(identifier: string) {
   switch (identifier) {
-    case "gregory":
+    case "gregory": {
       return new GregorianCalendar();
-    default:
+    }
+    default: {
       throw new Error(`Unsupported calendar ${identifier}`);
+    }
   }
 }
 
@@ -85,6 +87,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
     );
   },
 );
+DateField.displayName = "DateField";
 
 const texts = createTexts({
   day: {
@@ -109,13 +112,17 @@ const texts = createTexts({
 
 const getAriaLabel = (segmentType: DateSegment["type"]) => {
   switch (segmentType) {
-    case "day":
+    case "day": {
       return texts.day;
-    case "month":
+    }
+    case "month": {
       return texts.month;
-    case "year":
+    }
+    case "year": {
       return texts.year;
-    default:
+    }
+    default: {
       return texts.day;
+    }
   }
 };

package/src/datepicker/DatePicker.tsx

@@ -52,7 +52,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
 /**
  * A date picker component.
  *
- * There are three different variants – `core`, `floating` and `ghost`.
+ * There are three different variants –`core`, `floating` and `ghost`.
  *
  * ```tsx
  * <DatePicker label="Dato" variant="core" />
@@ -171,3 +171,4 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
   },
 );
+DatePicker.displayName = "DatePicker";

package/src/datepicker/DateRangePicker.tsx

@@ -9,7 +9,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import React, { PropsWithChildren, useRef } from "react";
+import { PropsWithChildren, useRef } from "react";
 import {
   AriaDateRangePickerProps,
   I18nProvider,

package/src/datepicker/DateTimeSegment.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
+import { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
 
@@ -63,6 +63,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
     );
   },
 );
+DateTimeSegment.displayName = "DateTimeSegment";
 
 const isPaddable = (segmentType: DateSegment["type"]) =>
   segmentType === "month" ||

package/src/datepicker/RangeCalendar.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { createCalendar, DateValue } from "@internationalized/date";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import {
   RangeCalendarProps as ReactAriaRangeCalendarProps,
   useRangeCalendar,

package/src/datepicker/StyledField.tsx

@@ -5,7 +5,7 @@ import {
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { DatePickerVariantProps } from "./DatePicker";

package/src/datepicker/TimeField.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { Box, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
-import { TimeFieldState } from "@react-stately/datepicker";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
+import { DateSegment, TimeFieldState } from "react-stately";
 
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
@@ -38,7 +38,7 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         {props.label}
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
-        {state.segments.map((segment) => (
+        {state.segments.map((segment: DateSegment) => (
           <DateTimeSegment key={segment.type} segment={segment} state={state} />
         ))}
       </Flex>

package/src/datepicker/TimePicker.tsx

@@ -1,12 +1,11 @@
 "use client";
-import { BoxProps, useFieldContext } from "@chakra-ui/react";
+import { BoxProps } from "@chakra-ui/react";
 import { CalendarDateTime } from "@internationalized/date";
 import { TimeValue } from "@react-types/datepicker";
 import {
   DropdownLeftFill18Icon,
   DropdownRightFill18Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
 import { useTimeFieldState } from "react-stately";
 
 import { Field } from "@/input/Field";
@@ -202,3 +201,6 @@ const texts = createTexts({
     sv: "minuter",
   },
 });
+function useFieldContext(): { disabled: unknown; invalid: unknown } {
+  throw new Error("Function not implemented.");
+}

package/src/datepicker/utils.ts

@@ -9,16 +9,21 @@ import { useTranslation } from "..";
 export const useCurrentLocale = () => {
   const { language } = useTranslation();
   switch (language) {
-    case "nb":
+    case "nb": {
       return "nb-NO";
-    case "nn":
+    }
+    case "nn": {
       return "nb-NO";
-    case "sv":
+    }
+    case "sv": {
       return "sv-SE";
-    case "en":
+    }
+    case "en": {
       return "en-GB";
-    default:
+    }
+    default: {
       return "nb-NO";
+    }
   }
 };