@navikt/ds-react 6.8.0 → 6.10.0

package/src/list/List.tsx

@@ -10,12 +10,24 @@ export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
   > {
-  /**
-   * @see 🏷️ {@link ListItemProps}
-   */
   Item: typeof ListItem;
 }
 
+/**
+ * A list component
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/list)
+ * @see 🏷️ {@link ListProps | Props}
+ *
+ * @example
+ * ```jsx
+ * <List>
+ *   <List.Item>Coffee</List.Item>
+ *   <List.Item>Tea</List.Item>
+ *   <List.Item>Milk</List.Item>
+ * </List>
+ * ```
+ */
 export const List = forwardRef<HTMLDivElement, ListProps>(
   (
     {

package/src/list/ListItem.tsx

@@ -2,22 +2,11 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./context";
+import { ListItemProps } from "./types";
 
-export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-  /**
-   * Content for description of the list item
-   */
-  children: React.ReactNode;
-  /**
-   * Title for the list item
-   */
-  title?: string;
-  /*
-   * Icon to be used as list marker for unordered lists.
-   */
-  icon?: React.ReactNode;
-}
-
+/**
+ * @see 🏷️ {@link ListItemProps}
+ */
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);

package/src/list/index.ts

@@ -1,4 +1,4 @@
 "use client";
 export { default as List } from "./List";
-export type { ListProps } from "./types";
-export { default as ListItem, type ListItemProps } from "./ListItem";
+export type { ListProps, ListItemProps } from "./types";
+export { default as ListItem } from "./ListItem";

package/src/list/types.ts

@@ -1,26 +1,41 @@
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * HTML list element to render
+   * HTML list element to render.
    * @default "ul"
    */
   as?: "ul" | "ol";
   /**
-   * List heading title
+   * List heading title.
    */
   title?: string;
   /**
-   * List heading description
+   * List heading description.
    */
   description?: string;
   /**
-   * Allows setting a different HTML h-tag
+   * Allows setting a different HTML h-tag.
    * @default "h3"
    */
   headingTag?: React.ElementType<any>;
   /**
-   * Changes padding, height and font-size
+   * Changes padding, height and font-size.
    * @default "medium"
    */
   size?: "medium" | "small";
 }
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * List item content.
+   */
+  children: React.ReactNode;
+  /**
+   * List item title.
+   */
+  title?: string;
+  /**
+   * Icon to be used instead of bullet (unordered lists only).
+   */
+  icon?: React.ReactNode;
+}

package/src/modal/Modal.tsx

@@ -21,6 +21,8 @@ import {
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
+const polyfillClassName = "navds-modal--polyfilled";
+
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDialogElement>
@@ -115,6 +117,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       // We check both to avoid activating polyfill twice when not using portal.
       if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
+
+        // Force-add the "polyfilled" class in case of SSR (needPolyfill will always be false on the server)
+        modalRef.current.classList.add(polyfillClassName);
       }
       // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
       // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
@@ -142,7 +147,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       typeof width === "string" && ["small", "medium"].includes(width);
 
     const mergedClassName = cl("navds-modal", className, {
-      "navds-modal--polyfilled": needPolyfill,
+      polyfillClassName: needPolyfill,
       "navds-modal--autowidth": !width,
       [`navds-modal--${width}`]: isWidthPreset,
     });

package/src/modal/ModalBody.tsx

@@ -6,9 +6,11 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
-  ),
+  ({ className, ...rest }, ref) => {
+    return (
+      <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
+    );
+  },
 );
 
 export default ModalBody;

package/src/modal/ModalFooter.tsx

@@ -6,9 +6,15 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} ref={ref} className={cl("navds-modal__footer", className)} />
-  ),
+  ({ className, ...rest }, ref) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-modal__footer", className)}
+      />
+    );
+  },
 );
 
 export default ModalFooter;

package/src/modal/dialog-polyfill.ts

@@ -260,7 +260,7 @@ function dialogPolyfillInfo(dialog) {
       removed ? this.downgradeModal() : this.maybeHideModal();
       removed = false;
     }.bind(this);
-    var timeout;
+    var timeout: ReturnType<typeof setTimeout>;
     var delayModel = function (ev) {
       if (ev.target !== dialog) {
         return;
@@ -631,12 +631,16 @@ dialogPolyfill.DialogManager = function () {
     this.mo_ = new MutationObserver(function (records) {
       var removed = [];
       records.forEach(function (rec) {
+        // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type c in this scenario
         for (var i = 0, c; (c = rec.removedNodes[i]); ++i) {
           if (!(c instanceof Element)) {
             continue;
-          } else if (c.localName === "dialog") {
+          }
+
+          if (c.localName === "dialog") {
             removed.push(c);
           }
+
           removed = removed.concat(c.querySelectorAll("dialog"));
         }
       });
@@ -675,6 +679,7 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
 dialogPolyfill.DialogManager.prototype.updateStacking = function () {
   var zIndex = this.zIndexHigh_;
 
+  // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
   for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
     dpi.updateZIndex(--zIndex, --zIndex);
     if (i === 0) {
@@ -700,6 +705,7 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
   candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
+    // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
       if (dpi.dialog === candidate) {
         return i === 0; // only valid if top-most

package/src/modal/types.ts

@@ -1,4 +1,8 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
+  /**
+   * Affects internal padding
+   */
+  size?: "small" | "medium";
   /**
    * Content for the header. Alteratively you can use `<Modal.Header>` instead for more control, but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
    */
@@ -9,7 +13,7 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
     /**
      * Heading size.
      * @default "medium"
-     * */
+     */
     size?: "medium" | "small";
     /**
      * Removes close-button (X) when false.

package/src/{overlay/dismiss → overlays/dismissablelayer}/DismissableLayer.tsx

@@ -2,7 +2,6 @@ import React, {
   CSSProperties,
   forwardRef,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -77,9 +76,13 @@ export const [
   useDismissableDescendant,
 ] = createDescendantContext<
   HTMLDivElement,
-  { disableOutsidePointerEvents: boolean }
+  { disableOutsidePointerEvents: boolean; forceUpdate: () => void }
 >();
 
+/**
+ * Number of layers with `disableOutsidePointerEvents` set to `true` currently enabled.
+ */
+let bodyLockCount = 0;
 let originalBodyPointerEvents: string;
 
 const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
@@ -133,9 +136,11 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     }: DismissableLayerProps,
     ref,
   ) => {
+    const [, setForce] = useState({});
     const { register, index, descendants } = useDismissableDescendant({
       disableOutsidePointerEvents,
       disabled: !enabled,
+      forceUpdate: () => setForce({}),
     });
 
     /**
@@ -162,10 +167,11 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     const hasInteractedOutsideRef = useRef(false);
     const hasPointerDownOutsideRef = useRef(false);
 
-    const pointerEnabled = useMemo(() => {
+    const pointerState = (() => {
       let lastIndex = -1;
 
       const descendantNodes = descendants.enabledValues();
+
       descendantNodes.forEach((obj, _index) => {
         if (obj.disableOutsidePointerEvents) {
           lastIndex = _index;
@@ -181,9 +187,12 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
         /**
          * If we find a node with `disableOutsidePointerEvents` we want to disable pointer events on the body.
          */
-        isBodyPointerEventsDisabled: lastIndex > -1,
+        isBodyPointerEventsDisabled: bodyLockCount > 0,
+        pointerStyle: (index >= lastIndex && bodyLockCount > 0
+          ? "auto"
+          : undefined) as CSSProperties["pointerEvents"] | undefined,
       };
-    }, [descendants, index]);
+    })();
 
     /**
      * We want to prevent the Layer from closing when the trigger, anchor element, or its child elements are interacted with.
@@ -248,7 +257,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     }
 
     const pointerDownOutside = usePointerDownOutside((event) => {
-      if (!pointerEnabled.isPointerEventsEnabled || !enabled) {
+      if (!pointerState.isPointerEventsEnabled || !enabled) {
         return;
       }
 
@@ -329,17 +338,33 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
      * we want to disable pointer events on the body when the first layer is opened.
      */
     useEffect(() => {
-      if (!node || !disableOutsidePointerEvents || index !== 0 || !enabled) {
-        return;
-      }
-
-      originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-      ownerDocument.body.style.pointerEvents = "none";
+      if (!node || !enabled || !disableOutsidePointerEvents) return;
 
+      if (bodyLockCount === 0) {
+        originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+        ownerDocument.body.style.pointerEvents = "none";
+      }
+      bodyLockCount++;
       return () => {
-        ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        if (bodyLockCount === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+        bodyLockCount--;
       };
-    }, [node, ownerDocument, disableOutsidePointerEvents, index, enabled]);
+    }, [
+      node,
+      ownerDocument,
+      disableOutsidePointerEvents,
+      descendants,
+      enabled,
+    ]);
+
+    /**
+     * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM
+     */
+    useEffect(() => {
+      return () => descendants.values().forEach((x) => x.forceUpdate());
+    }, [descendants, node]);
 
     const Comp = asChild ? Slot : "div";
 
@@ -351,11 +376,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
         onBlurCapture={focusOutside.onBlurCapture}
         onPointerDownCapture={pointerDownOutside.onPointerDownCapture}
         style={{
-          pointerEvents: pointerEnabled.isBodyPointerEventsDisabled
-            ? pointerEnabled.isPointerEventsEnabled
-              ? "auto"
-              : "none"
-            : undefined,
+          pointerEvents: pointerState.pointerStyle,
           ...rest.style,
         }}
       >

package/src/{overlay/dismiss → overlays/dismissablelayer}/util/dispatchCustomEvent.ts

@@ -5,7 +5,7 @@ type CustomPointerDownEvent = CustomEvent<{
   originalEvent: PointerEvent;
 }>;
 
-export { CustomFocusEvent, CustomPointerDownEvent };
+export type { CustomFocusEvent, CustomPointerDownEvent };
 
 export const CUSTOM_EVENTS = {
   FOCUS_OUTSIDE: "AKSEL_FOCUS_OUTSIDE",

package/src/pagination/Pagination.tsx

@@ -184,7 +184,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           {getSteps({ page, count, siblingCount, boundaryCount }).map(
             (step, i) => {
               const n = Number(step);
-              return isNaN(n) ? (
+              return Number.isNaN(n) ? (
                 <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
                   <BodyShort size={size === "xsmall" ? "small" : size}>
                     ...

package/src/popover/Popover.tsx

@@ -10,7 +10,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
-import { DismissableLayer } from "../overlay/dismiss/DismissableLayer";
+import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";

package/src/stepper/Step.tsx

@@ -1,9 +1,9 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { forwardRef } from "react";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { OverridableComponent } from "../util/types";
-import { StepperContext } from "./context";
+import { useStepperContext } from "./context";
 
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -11,11 +11,6 @@ export interface StepperStepProps
    * Text content by indicator.
    */
   children: string;
-  /**
-   * Handled by Stepper, overwriting may break component logic.
-   * @private
-   */
-  unsafe_index?: number;
   /**
    * Makes step-indicator a checkmark.
    * @default false
@@ -28,25 +23,6 @@ export interface StepperStepProps
   interactive?: boolean;
 }
 
-const CompletedIcon = () => (
-  <svg
-    width="14"
-    height="10"
-    viewBox="0 0 14 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable={false}
-    role="img"
-    aria-hidden
-    aria-label="Fullført"
-  >
-    <path
-      d="M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
 export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
   forwardRef(
     (
@@ -54,7 +30,6 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         className,
         children,
         as: Component = "a",
-        unsafe_index = 0,
         completed = false,
         interactive,
         onClick,
@@ -62,11 +37,8 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const context = useContext(StepperContext);
-      if (context === null) {
-        console.error("<Stepper.Step> has to be used within <Stepper>");
-        return null;
-      }
+      const context = useStepperContext();
+
       const { activeStep } = context;
 
       const isInteractive = interactive ?? context?.interactive;
@@ -74,17 +46,17 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
       const Comp = isInteractive ? Component : "div";
 
       const handleStepClick = () => {
-        isInteractive && context.onStepChange(unsafe_index + 1);
+        isInteractive && context.onStepChange(context.index + 1);
       };
 
       return (
         <Comp
           {...rest}
-          aria-current={activeStep === unsafe_index ? "step" : undefined}
+          aria-current={activeStep === context.index ? "step" : undefined}
           ref={ref}
           className={cl("navds-stepper__step", className, {
-            "navds-stepper__step--active": activeStep === unsafe_index,
-            "navds-stepper__step--behind": activeStep > unsafe_index,
+            "navds-stepper__step--active": activeStep === context.index,
+            "navds-stepper__step--behind": activeStep > context.index,
             "navds-stepper__step--non-interactive": !isInteractive,
             "navds-stepper__step--completed": completed,
           })}
@@ -92,7 +64,21 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         >
           {completed ? (
             <span className="navds-stepper__circle navds-stepper__circle--success">
-              <CompletedIcon />
+              <svg
+                width="14"
+                height="10"
+                viewBox="0 0 14 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                focusable={false}
+                role="presentation"
+                aria-hidden
+              >
+                <path
+                  d="M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z"
+                  fill="currentColor"
+                />
+              </svg>
             </span>
           ) : (
             <Label
@@ -100,7 +86,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
               as="span"
               aria-hidden="true"
             >
-              {unsafe_index + 1}
+              {context.index + 1}
             </Label>
           )}
           <Label as="span" className="navds-stepper__content">

package/src/stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import Step, { StepperStepProps } from "./Step";
-import { StepperContext } from "./context";
+import { StepperContextProvider } from "./context";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
@@ -94,41 +94,35 @@ export const Stepper: StepperComponent = forwardRef<
           className,
         )}
       >
-        <StepperContext.Provider
-          value={{
-            activeStep,
-            onStepChange,
-            lastIndex: React.Children.count(children),
-            orientation,
-            interactive,
-          }}
-        >
-          {React.Children.map(children, (step, index) => {
-            return (
-              <li
-                className={cl("navds-stepper__item", {
-                  "navds-stepper__item--behind": activeStep > index,
-                  "navds-stepper__item--completed":
-                    React.isValidElement<StepperStepProps>(step) &&
-                    step?.props?.completed,
-                  "navds-stepper__item--non-interactive":
-                    React.isValidElement<StepperStepProps>(step) &&
-                    !(step?.props?.interactive ?? interactive),
-                })}
-                key={index + (children?.toString?.() ?? "")}
+        {React.Children.map(children, (step, index) => {
+          const stepProps: Partial<StepperStepProps> =
+            React.isValidElement<StepperStepProps>(step) ? step.props : {};
+
+          return (
+            <li
+              className={cl("navds-stepper__item", {
+                "navds-stepper__item--behind": activeStep > index,
+                "navds-stepper__item--completed": stepProps.completed,
+                "navds-stepper__item--non-interactive":
+                  stepProps.interactive ?? interactive,
+              })}
+              key={index + (children?.toString?.() ?? "")}
+            >
+              <span className="navds-stepper__line navds-stepper__line--1" />
+              <StepperContextProvider
+                interactive={interactive}
+                activeStep={activeStep}
+                lastIndex={React.Children.count(children)}
+                index={index}
+                onStepChange={onStepChange}
+                orientation={orientation}
               >
-                <span className="navds-stepper__line navds-stepper__line--1" />
-                {React.isValidElement<StepperStepProps>(step)
-                  ? React.cloneElement(step, {
-                      ...step.props,
-                      unsafe_index: index,
-                    })
-                  : step}
-                <span className="navds-stepper__line navds-stepper__line--2" />
-              </li>
-            );
-          })}
-        </StepperContext.Provider>
+                {step}
+              </StepperContextProvider>
+              <span className="navds-stepper__line navds-stepper__line--2" />
+            </li>
+          );
+        })}
       </ol>
     );
   },

package/src/stepper/context.ts

@@ -1,11 +1,18 @@
-import { createContext } from "react";
+import { createContext } from "../util/create-context";
 
-interface StepperContextProps {
-  activeStep: number;
+interface StepperContextValue {
   onStepChange: (step: number) => void;
   lastIndex: number;
   orientation: "horizontal" | "vertical";
   interactive: boolean;
+  activeStep: number;
+  index: number;
 }
 
-export const StepperContext = createContext<StepperContextProps | null>(null);
+export const [StepperContextProvider, useStepperContext] =
+  createContext<StepperContextValue>({
+    hookName: "useStepperContext",
+    providerName: "StepperContextProvider",
+    name: "StepperContext",
+    errorMessage: "<Stepper.Step> has to be used within <Stepper>",
+  });

package/src/table/AnimateHeight.tsx

@@ -15,7 +15,7 @@ const prefersReducedMotion = globalThis?.matchMedia
 
 function isNumber(n: string) {
   const number = parseFloat(n);
-  return !isNaN(number) && isFinite(number);
+  return !Number.isNaN(number) && Number.isFinite(number);
 }
 
 function isPercentage(height: Height) {

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -32,9 +32,9 @@ export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
     const win = listRef.current?.ownerDocument ?? document ?? window;
     win.addEventListener("resize", handleResize);
 
-    let resizeObserver;
+    let resizeObserver: ResizeObserver;
 
-    if (typeof ResizeObserver !== "undefined") {
+    if (typeof ResizeObserver !== "undefined" && listRef.current) {
       resizeObserver = new ResizeObserver(handleResize);
       resizeObserver.observe(listRef.current);
     }

package/src/timeline/AxisLabels.tsx

@@ -115,11 +115,13 @@ const axisLabels = (
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
     return dayLabels(start, end, totalDays, direction, templates?.day);
-  } else if (totalDays < 370) {
+  }
+
+  if (totalDays < 370) {
     return monthLabels(start, end, direction, templates?.month);
-  } else {
-    return yearLabels(start, end, direction, templates?.year);
   }
+
+  return yearLabels(start, end, direction, templates?.year);
 };
 
 export const AxisLabels = ({