@navikt/ds-react 5.7.2 → 5.7.4

package/src/form/combobox/Input/inputContext.tsx

@@ -8,8 +8,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useFormField, FormFieldType } from "../../useFormField";
 import { useClientLayoutEffect } from "../../../util";
+import { FormFieldType, useFormField } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {
   clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => {
 
   const onChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value;
-      externalValue ?? setInternalValue(value);
+      const newValue = event.currentTarget.value;
+      externalValue ?? setInternalValue(newValue);
       externalOnChange?.(event);
-      setSearchTerm(value);
+      setSearchTerm(newValue);
     },
     [externalValue, externalOnChange]
   );

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import usePrevious from "../../../util/usePrevious";
 import { useInputContext } from "../Input/inputContext";
-import { ComboboxProps } from "../types";
 import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";
 
 type SelectedOptionsContextType = {
   addSelectedOption: (option: string) => void;
@@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({
         allowNewValues && addCustomOption(option);
         !isMultiSelect && setSelectedOptions([]);
       } else if (isMultiSelect) {
-        setSelectedOptions((prevSelectedOptions) => [
-          ...prevSelectedOptions,
+        setSelectedOptions((oldSelectedOptions) => [
+          ...oldSelectedOptions,
           option,
         ]);
       } else {
@@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({
       if (isCustomOption) {
         removeCustomOption(option);
       } else {
-        setSelectedOptions((prevSelectedOptions) =>
-          prevSelectedOptions.filter(
+        setSelectedOptions((oldSelectedOptions) =>
+          oldSelectedOptions.filter(
             (selectedOption) => selectedOption !== option
           )
         );

package/src/form/search/Search.tsx

@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 `navds-search__input--${variant}`,
                 "navds-text-field__input",
                 "navds-body-short",
-                `navds-body-${size}`
+                `navds-body-short--${size}`
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />

package/src/form/stories/textarea.stories.tsx

@@ -1,52 +1,36 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
-export default {
+
+const meta: Meta<typeof Textarea> = {
   title: "ds-react/Textarea",
   component: Textarea,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    maxRows: {
-      type: "number",
-    },
-    minRows: {
-      type: "number",
-    },
-  },
-} as Meta;
+};
+export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Textarea> = {
   render: (props) => {
-    return (
-      <Textarea
-        {...props}
-        maxLength={props?.maxLength ?? 100}
-        label="Ipsum enim quis culpa"
-      />
-    );
+    return <Textarea {...props} />;
   },
 
   args: {
     maxLength: 100,
+    label: "Ipsum enim quis culpa",
     resize: false,
   },
+
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    description: { type: "string" },
+    error: { type: "string" },
+    hideLabel: { type: "boolean" },
+    disabled: { type: "boolean" },
+    maxRows: { type: "number" },
+    minRows: { type: "number" },
+  },
 };
 
 export const Small = () => {

package/src/help-text/HelpText.tsx

@@ -90,6 +90,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
+          offset={12}
         >
           <Popover.Content className="navds-body-short">
             {children}

package/src/help-text/HelpTextIcon.tsx

@@ -30,7 +30,7 @@ export const HelpTextIcon = ({
         cx="12"
         cy="12"
         r="11"
-        strokeWidth="2"
+        strokeWidth="1.5"
         stroke="currentColor"
         fill={filled ? "currentColor" : "transparent"}
       />

package/src/layout/utilities/css.ts

@@ -4,6 +4,7 @@ export type SpacingScale =
   | "0"
   | "05"
   | "1"
+  | "1-alt"
   | "2"
   | "3"
   | "4"

package/src/popover/Popover.tsx

@@ -133,6 +133,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
+    const chosenFlip = isInModal ? true : _flip;
 
     const {
       x,
@@ -150,7 +151,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
-        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        chosenFlip &&
+          flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],

package/src/table/ExpandableRow.tsx

@@ -1,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   /**
@@ -76,7 +76,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const expansionHandler = (e) => {
       onOpenChange?.(!isOpen);
       if (open === undefined) {
-        setInternalOpen((open) => !open);
+        setInternalOpen((oldOpen) => !oldOpen);
       }
       e.stopPropagation();
     };

package/src/table/stories/table-async.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import people from "./people.json";
-import { Table } from "../index";
 import { Loader, Pagination, SortState } from "../..";
+import { Table } from "../index";
+import peopleJson from "./people.json";
 
 export default {
   title: "ds-react/Table",
@@ -44,8 +44,8 @@ const updateData = async (url: string) => {
   );
 
   return {
-    count: people.length,
-    results: people
+    count: peopleJson.length,
+    results: peopleJson
       .slice()
       .sort((a, b) => {
         if (sort) {

package/src/table/stories/table-expandable.stories.tsx

@@ -19,15 +19,15 @@ export const Expandable = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
           <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
             togglePlacement="right"
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -49,22 +49,22 @@ export const ExpandableLarge = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
           <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
             open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -86,22 +86,22 @@ export const ExpandableSmall = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
           <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
             open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}
@@ -247,16 +247,16 @@ export const ExpandableOpen = () => {
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
           <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
             togglePlacement="right"
             defaultOpen
           >
             {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
           </Table.ExpandableRow>
         ))}

package/src/table/stories/table.stories.tsx

@@ -161,10 +161,10 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
     return [
       list,
       (value) =>
-        setList((list) =>
-          list.includes(value)
-            ? list.filter((id) => id !== value)
-            : [...list, value]
+        setList((oldList) =>
+          oldList.includes(value)
+            ? oldList.filter((id) => id !== value)
+            : [...oldList, value]
         ),
     ];
   };

package/src/tabs/TabList.tsx

@@ -39,10 +39,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
           const showStartScroll = scrollLeft > 1;
           const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
 
-          setDisplayScroll((displayScroll) =>
-            showStartScroll === displayScroll.start &&
-            showEndScroll === displayScroll.end
-              ? displayScroll
+          setDisplayScroll((oldDisplayScroll) =>
+            showStartScroll === oldDisplayScroll.start &&
+            showEndScroll === oldDisplayScroll.end
+              ? oldDisplayScroll
               : { start: showStartScroll, end: showEndScroll }
           );
         }),

package/src/timeline/Timeline.tsx

@@ -1,6 +1,8 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { AxisLabels } from "./AxisLabels";
+import Pin, { PinType } from "./Pin";
+import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
 import {
@@ -9,11 +11,9 @@ import {
   useTimelineRows,
 } from "./hooks/useTimelineRows";
 import Period, { PeriodType } from "./period";
-import Pin, { PinType } from "./Pin";
-import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
-import Zoom, { ZoomType } from "./zoom";
 import { AxisLabelTemplates } from "./utils/types.external";
+import Zoom, { ZoomType } from "./zoom";
 
 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -187,10 +187,10 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       }
     };
 
-    const addFocusable = (ref: HTMLButtonElement | null, id: number) => {
+    const addFocusable = (btnRef: HTMLButtonElement | null, id: number) => {
       let items = firstFocusabled.current;
       items = items.filter((x) => x.id !== id);
-      items.push({ ref, id });
+      items.push({ ref: btnRef, id });
       firstFocusabled.current = items;
     };
 
@@ -212,8 +212,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
           <div className="navds-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
-            {pins.map((Pin, i) => (
-              <Pin key={`pin-${i}`} />
+            {pins.map((PinChild, i) => (
+              <PinChild key={`pin-${i}`} />
             ))}
 
             {processedRows.map((row, i) => {
@@ -238,7 +238,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
               );
             })}
           </div>
-          {zoomComponent && zoomComponent}
+          {zoomComponent}
         </div>
       </TimelineContext.Provider>
     );

package/src/timeline/hooks/useTimelineRows.ts

@@ -101,8 +101,7 @@ export const useTimelineRows = (
 ): InternalSimpleTimeline[] =>
   useMemo(
     () =>
-      rows.map((periods: InternalSimpleTimeline, i: number) => {
-        const rowIndex = i;
+      rows.map((periods: InternalSimpleTimeline, rowIndex: number) => {
         const timelinePeriods = periods.periods
           .sort((a: Period, b: Period) => a.start.valueOf() - b.start.valueOf())
           .map((period: Period & { restProps?: any; ref?: any }, i) => ({

package/src/util/omit.ts

@@ -2,8 +2,8 @@ export const omit = (obj: object, props: string[]) =>
   Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce(
-      (obj, [key, value]) => ({
-        ...obj,
+      (prevObj, [key, value]) => ({
+        ...prevObj,
         [key]: value,
       }),
       {}