@navikt/ds-react 5.5.0 → 5.6.0

package/src/accordion/AccordionItem.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from "react";
 import { AccordionContext } from "./AccordionContext";
+import { omit } from "../util";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -36,10 +37,7 @@ export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  (
-    { children, className, open, defaultOpen = false, onClick, id, ...rest },
-    ref
-  ) => {
+  ({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const context = useContext(AccordionContext);
 
@@ -56,6 +54,10 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
       shouldAnimate.current = true;
     };
 
+    if (!context?.mounted) {
+      console.error("<Accordion.Item> has to be used within an <Accordion>");
+    }
+
     return (
       <div
         className={cl("navds-accordion__item", className, {
@@ -64,7 +66,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
         ref={ref}
-        {...rest}
+        {...omit(rest, ["onClick"])}
       >
         <AccordionItemContext.Provider
           value={{

package/src/accordion/accordion.stories.tsx

@@ -274,39 +274,26 @@ const SingleHeaderAccordion = ({
   );
 };
 
-type sizesType = "large" | "medium" | "small";
-type headingSizesType = "large" | "medium" | "small" | "xsmall";
-const sizes: sizesType[] = ["large", "medium", "small"];
-const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
+const sizes: AccordionProps["size"][] = ["large", "medium", "small"];
+const headingSizes: AccordionProps["headingSize"][] = [
+  "large",
+  "medium",
+  "small",
+  "xsmall",
+];
 
-export const Size = {
-  render: ({ ...props }) => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        {sizes.map((element) => (
-          <SingleHeaderAccordion size={element} {...props} />
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    variant: "neutral",
-  },
-};
-
-export const HeadingSize = {
-  render: ({ ...props }) => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        {headingSizes.map((element) => (
-          <SingleHeaderAccordion headingSize={element} {...props} />
-        ))}
-      </div>
-    );
-  },
+export const Size = (props) => (
+  <div style={{ width: 500 }} className="colgap">
+    {sizes.map((size) => (
+      <SingleHeaderAccordion key={size} size={size} {...props} />
+    ))}
+  </div>
+);
 
-  args: {
-    variant: "neutral",
-  },
-};
+export const HeadingSize = (props) => (
+  <div style={{ width: 500 }} className="colgap">
+    {headingSizes.map((size) => (
+      <SingleHeaderAccordion key={size} headingSize={size} {...props} />
+    ))}
+  </div>
+);

package/src/alert/alert.stories.tsx

@@ -140,7 +140,7 @@ export const Heading = () => {
 export const Links = () => {
   return (
     <div className="colgap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Alert key={variant} variant={variant}>
           <Link href="#">Id elit esse enim reprehenderit</Link>
         </Alert>
@@ -156,7 +156,7 @@ const AlertWithCloseButton = ({
   size?: "medium" | "small";
   children?: React.ReactNode;
 }) => {
-  let [show, setShow] = React.useState(true);
+  const [show, setShow] = React.useState(true);
 
   return show ? (
     <Alert

package/src/chips/chips.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Chips } from ".";
 
@@ -23,46 +22,44 @@ export default {
 
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
-export const Default = {
-  render: (props) => {
-    const [selected, setSelected] = useState(["Dansk", "Svensk"]);
-    const [filter, setFilter] = useState(options);
-
-    if (props.type === "toggle") {
-      return (
-        <Chips size={props.size ?? "medium"}>
-          {options.map((c) => (
-            <Chips.Toggle
-              selected={selected.includes(c)}
-              key={c}
-              onClick={() =>
-                setSelected(
-                  selected.includes(c)
-                    ? selected.filter((x) => x !== c)
-                    : [...selected, c]
-                )
-              }
-            >
-              {c}
-            </Chips.Toggle>
-          ))}
-        </Chips>
-      );
-    }
+export const Default = (props) => {
+  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
+  const [filter, setFilter] = useState(options);
 
+  if (props.type === "toggle") {
     return (
       <Chips size={props.size ?? "medium"}>
-        {filter.map((c) => (
-          <Chips.Removable
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
             key={c}
-            onClick={() => setFilter((x) => x.filter((y) => y !== c))}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
           >
             {c}
-          </Chips.Removable>
+          </Chips.Toggle>
         ))}
       </Chips>
     );
-  },
+  }
+
+  return (
+    <Chips size={props.size ?? "medium"}>
+      {filter.map((c) => (
+        <Chips.Removable
+          key={c}
+          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
+        >
+          {c}
+        </Chips.Removable>
+      ))}
+    </Chips>
+  );
 };
 
 export const Toggle = () => {

package/src/date/datepicker/DatePicker.tsx

@@ -5,46 +5,56 @@ import {
   DateRange,
   DayPicker,
   DayPickerBase,
-  isMatch,
   Matcher,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
+  isMatch,
 } from "react-day-picker";
-import { omit, Popover, useId } from "../..";
+import { Popover, omit, useId } from "../..";
 import { DateInputProps, DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import { Caption, DropdownCaption } from "./caption";
 import DatePickerStandalone, {
   DatePickerStandaloneType,
 } from "./DatePickerStandalone";
-import { DayButton } from "./DayButton";
-import { TableHead } from "./TableHead";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 
-export type ConditionalModeProps =
-  | {
-      mode?: "single";
-      onSelect?: (val?: Date) => void;
-      selected?: Date;
-      defaultSelected?: Date;
-    }
-  | {
-      mode?: "multiple";
-      onSelect?: (val?: Date[]) => void;
-      selected?: Date[];
-      defaultSelected?: Date[];
-      min?: number;
-      max?: number;
-    }
-  | {
-      mode?: "range";
-      onSelect?: (val?: DateRange) => void;
-      selected?: DateRange;
-      defaultSelected?: DateRange;
-      min?: number;
-      max?: number;
-    };
+export type SingleMode = {
+  mode?: "single";
+  onSelect?: (val?: Date) => void;
+  selected?: Date;
+  defaultSelected?: Date;
+  onWeekNumberClick?: never;
+};
+
+export type MultipleMode = {
+  mode: "multiple";
+  onSelect?: (val?: Date[]) => void;
+  selected?: Date[];
+  defaultSelected?: Date[];
+  min?: number;
+  max?: number;
+  /**
+   * Allows selecting a week at a time. Only used with mode="multiple".
+   */
+  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+};
+
+export type RangeMode = {
+  mode: "range";
+  onSelect?: (val?: DateRange) => void;
+  selected?: DateRange;
+  defaultSelected?: DateRange;
+  min?: number;
+  max?: number;
+  onWeekNumberClick?: never;
+};
+
+type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
 //github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
 export interface DatePickerDefaultProps
@@ -186,6 +196,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onOpenToggle,
       strategy,
       bubbleEscape = false,
+      onWeekNumberClick,
       ...rest
     },
     ref
@@ -199,33 +210,20 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
 
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      selectedDay && (onClose?.() ?? setOpen(false));
-      rest?.onSelect && (rest?.onSelect as (val?: Date) => void)(selectedDay);
-    };
+    const mode = rest.mode ?? ("single" as any);
 
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: Date[]) => void)(selectedDays);
-    };
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+      setSelectedDates(selected);
 
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      selectedDays?.from && selectedDays?.to && (onClose?.() ?? setOpen(false));
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
-    };
-
-    const overrideProps = {
-      mode: rest.mode ?? ("single" as any),
-      onSelect:
-        rest?.mode === "single"
-          ? handleSingleSelect
-          : rest?.mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
+      if (rest.mode === "single") {
+        selected && (onClose?.() ?? setOpen(false));
+      } else if (rest.mode === "range") {
+        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+      }
+      rest?.onSelect?.(selected);
     };
 
     return (
@@ -262,12 +260,16 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}
-                {...overrideProps}
+                mode={mode}
+                onSelect={handleSelect}
                 selected={selected ?? selectedDates}
                 components={{
                   Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Day: DayButton,
                   Head: TableHead,
+                  HeadRow,
+                  WeekNumber,
+                  Row,
+                  Day: DayButton,
                 }}
                 className={cl("navds-date", className)}
                 classNames={{
@@ -289,6 +291,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   weekend: "rdp-day__weekend",
                 }}
                 showWeekNumber={showWeekNumber}
+                onWeekNumberClick={
+                  mode === "multiple" ? onWeekNumberClick : undefined
+                }
                 fixedWeeks
                 showOutsideDays
                 {...omit(rest, ["onSelect"])}

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -1,19 +1,22 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef } from "react";
-import {
-  DateRange,
-  DayPicker,
-  isMatch,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
+import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../..";
 import { getLocaleFromString, labels } from "../utils";
-import { Caption, DropdownCaption } from "./caption";
-import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
-import { TableHead } from "./TableHead";
+import {
+  DatePickerDefaultProps,
+  MultipleMode,
+  RangeMode,
+  SingleMode,
+} from "./DatePicker";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
+import Caption from "./parts/Caption";
+import DropdownCaption from "./parts/DropdownCaption";
+import Row from "./parts/Row";
+import { HeadRow } from "./parts/HeadRow";
+import DayButton from "./parts/DayButton";
 
 interface DatePickerStandaloneDefaultProps
   extends Omit<
@@ -31,8 +34,10 @@ interface DatePickerStandaloneDefaultProps
   fixedWeeks?: boolean;
 }
 
+type StandaloneConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+
 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
-  ConditionalModeProps;
+  StandaloneConditionalModeProps;
 
 export type DatePickerStandaloneType = React.ForwardRefExoticComponent<
   DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>
@@ -44,7 +49,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
 >(
   (
     {
-      children,
       className,
       locale = "nb",
       dropdownCaption,
@@ -52,10 +56,10 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       disableWeekends = false,
       showWeekNumber = false,
       selected,
-      id,
       defaultSelected,
       onSelect,
-      fixedWeeks = true,
+      fixedWeeks = false,
+      onWeekNumberClick,
       ...rest
     },
     ref
@@ -64,29 +68,14 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
 
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      onSelect && (onSelect as (val?: Date) => void)(selectedDay);
-    };
-
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      onSelect && (onSelect as (val?: Date[]) => void)(selectedDays);
-    };
-
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      onSelect && (onSelect as (val?: DateRange) => void)(selectedDays);
-    };
+    const mode = rest.mode ?? ("single" as any);
 
-    const overrideProps = {
-      mode: rest.mode ?? ("single" as any),
-      onSelect:
-        rest?.mode === "single"
-          ? handleSingleSelect
-          : rest?.mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+      setSelectedDates(selected);
+      onSelect?.(selected);
     };
 
     return (
@@ -96,11 +85,16 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       >
         <DayPicker
           locale={getLocaleFromString(locale)}
-          {...overrideProps}
+          mode={mode}
+          onSelect={handleSelect}
           selected={selected ?? selectedDates}
           components={{
             Caption: dropdownCaption ? DropdownCaption : Caption,
             Head: TableHead,
+            HeadRow,
+            WeekNumber,
+            Row,
+            Day: DayButton,
           }}
           className="navds-date"
           classNames={{ vhidden: "navds-sr-only" }}
@@ -119,9 +113,12 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             weekend: "rdp-day__weekend",
           }}
           showWeekNumber={showWeekNumber}
+          onWeekNumberClick={
+            mode === "multiple" ? onWeekNumberClick : undefined
+          }
           fixedWeeks={fixedWeeks}
           showOutsideDays
-          {...omit(rest, ["onSelect"])}
+          {...omit(rest, ["children", "id"])}
         />
       </div>
     );

package/src/date/datepicker/datepicker.stories.tsx

@@ -2,8 +2,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { Button } from "../..";
+import { Button, HGrid, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";
+import isSameDay from "date-fns/isSameDay";
 
 const disabledDays = [
   new Date("Oct 10 2022"),
@@ -311,7 +312,7 @@ export const UseRangedDatepickerValidation = () => {
   );
 };
 
-export const defaultShownMonth = () => {
+export const DefaultShownMonth = () => {
   const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
@@ -367,3 +368,67 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const StandaloneOptions = () => {
+  return (
+    <HGrid columns={{ xs: 1, md: 2 }} gap="8">
+      <DatePicker.Standalone today={new Date("Nov 23 2022")} />
+      <DatePicker.Standalone
+        dropdownCaption
+        fromDate={new Date("Aug 23 2019")}
+        toDate={new Date("Feb 23 2024")}
+        today={new Date("Nov 23 2022")}
+      />
+      <DatePicker.Standalone showWeekNumber today={new Date("Nov 23 2022")} />
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={console.log}
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+      <DatePicker.Standalone
+        mode="range"
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+    </HGrid>
+  );
+};
+
+export const WeekDayClick = () => {
+  const [days, setDays] = useState<Date[]>([]);
+
+  const handleWeekClick = (dates: Date[]) => {
+    const hasDayInWeek = !!days.find((x) => dates.find((y) => isSameDay(x, y)));
+
+    const cleanup = days.filter((y) => !dates.find((z) => isSameDay(y, z)));
+    if (hasDayInWeek) {
+      setDays(cleanup);
+    } else {
+      setDays([...dates, ...cleanup]);
+    }
+  };
+
+  return (
+    <VStack gap="8">
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={(_, dates) => handleWeekClick(dates)}
+        onSelect={(dates) => dates && setDays(dates)}
+        selected={days}
+        today={new Date("Nov 23 2022")}
+      />
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={(_, dates) => handleWeekClick(dates)}
+        onSelect={(dates) => dates && setDays(dates)}
+        selected={days}
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+    </VStack>
+  );
+};

package/src/date/datepicker/datepicker.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/jsx-pascal-case */
-import { act, render } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { DatePicker, useDatepicker } from "..";
@@ -18,11 +17,13 @@ const App = () => {
 };
 
 describe("Render datepicker", () => {
+  // eslint-disable-next-line jest/expect-expect
   it("Should not crash when e.target is window", async () => {
-    const utils = render(<App />);
+    render(<App />);
 
+    // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
     await act(async () => {
-      await userEvent.click(utils.getByText("Velg dato"));
+      await userEvent.click(screen.getByText("Velg dato"));
     });
   });
 });

package/src/date/datepicker/{caption → parts}/Caption.tsx

@@ -2,7 +2,11 @@ import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { Button, Label } from "../../..";
+import WeekRow from "./WeekRow";
 
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption
+ */
 export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
   const {
@@ -15,30 +19,27 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
   const nextLabel = labelNext(nextMonth, { locale });
 
   return (
-    <div className="navds-date__caption">
-      <Label
-        as="span"
-        aria-live="polite"
-        aria-atomic="true"
-        id={id}
-        className="navds-date__caption-label"
-      >
-        {formatCaption(displayMonth, { locale })}
-      </Label>
-
-      <div className="navds-date__caption__month-wrapper">
+    <>
+      <div className="navds-date__caption">
         <Button
-          aria-label={previousLabel}
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title="velg forrige måned" />}
+          icon={<ArrowLeftIcon title={previousLabel} />}
           className="navds-date__caption-button"
           type="button"
         />
+        <Label
+          as="span"
+          aria-live="polite"
+          aria-atomic="true"
+          id={id}
+          className="navds-date__caption-label"
+        >
+          {formatCaption(displayMonth, { locale })}
+        </Label>
         <Button
-          aria-label={nextLabel}
-          icon={<ArrowRightIcon title="velg neste måned" />}
+          icon={<ArrowRightIcon title={nextLabel} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"
@@ -46,7 +47,8 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           type="button"
         />
       </div>
-    </div>
+      <WeekRow displayMonth={displayMonth} />
+    </>
   );
 };