@navikt/ds-react 2.1.6 → 2.1.7

package/src/chips/chips.stories.tsx

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

@@ -1 +1 @@
-export { default as Chips, ChipsProps } from "./Chips";
+export { default as Chips, type ChipsProps } from "./Chips";

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useId, useState } from "react";
 import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
 import { Button } from "../..";
@@ -34,93 +35,95 @@ export default {
   },
 };
 
-export const Default = (props) => {
-  const [open, setOpen] = useState(false);
+export const Default = {
+  render: (props) => {
+    const [open, setOpen] = useState(false);
 
-  const rangeCtx = UNSAFE_useRangeDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const rangeCtx = UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });
 
-  const singleCtx = UNSAFE_useDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const singleCtx = UNSAFE_useDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });
 
-  const newProps = {
-    ...(!props.inputfield || props.mode === "multiple"
-      ? {
-          open,
-          onClose: () => setOpen(false),
-          fromDate: new Date("Aug 23 2020"),
-          toDate: new Date("Aug 23 2023"),
-        }
-      : {}),
-  };
+    const newProps = {
+      ...(!props.inputfield || props.mode === "multiple"
+        ? {
+            open,
+            onClose: () => setOpen(false),
+            fromDate: new Date("Aug 23 2020"),
+            toDate: new Date("Aug 23 2023"),
+          }
+        : {}),
+    };
 
-  const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
+    const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
 
-  return (
-    <div>
-      <Comp
-        locale={props?.locale}
-        dropdownCaption={props?.dropdownCaption}
-        disableWeekends={props?.disableWeekends}
-        showWeekNumber={props.showWeekNumber}
-        mode={props.mode}
-        {...(props.mode === "single"
-          ? singleCtx.datepickerProps
-          : props.mode === "range"
-          ? rangeCtx.datepickerProps
-          : {})}
-        {...newProps}
-      >
-        {!props.standalone && (
-          <>
-            {props.inputfield && props.mode !== "multiple" ? (
-              <>
-                {props.mode === "range" ? (
-                  <div style={{ display: "flex", gap: "1rem" }}>
-                    <DatePicker.Input
-                      label="Fra"
-                      size={props?.size}
-                      {...rangeCtx.fromInputProps}
-                    />
-                    <DatePicker.Input
-                      label="Til"
-                      size={props?.size}
-                      {...rangeCtx.toInputProps}
-                    />
-                  </div>
-                ) : (
-                  <>
-                    <DatePicker.Input
-                      label="Velg dato"
-                      size={props?.size}
-                      {...singleCtx.inputProps}
-                    />
-                  </>
-                )}
-              </>
-            ) : (
-              <Button onClick={() => setOpen((x) => !x)}>
-                Åpne datovelger
-              </Button>
-            )}
-          </>
-        )}
-      </Comp>
-    </div>
-  );
-};
+    return (
+      <div>
+        <Comp
+          locale={props?.locale}
+          dropdownCaption={props?.dropdownCaption}
+          disableWeekends={props?.disableWeekends}
+          showWeekNumber={props.showWeekNumber}
+          mode={props.mode}
+          {...(props.mode === "single"
+            ? singleCtx.datepickerProps
+            : props.mode === "range"
+            ? rangeCtx.datepickerProps
+            : {})}
+          {...newProps}
+        >
+          {!props.standalone && (
+            <>
+              {props.inputfield && props.mode !== "multiple" ? (
+                <>
+                  {props.mode === "range" ? (
+                    <div style={{ display: "flex", gap: "1rem" }}>
+                      <DatePicker.Input
+                        label="Fra"
+                        size={props?.size}
+                        {...rangeCtx.fromInputProps}
+                      />
+                      <DatePicker.Input
+                        label="Til"
+                        size={props?.size}
+                        {...rangeCtx.toInputProps}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      <DatePicker.Input
+                        label="Velg dato"
+                        size={props?.size}
+                        {...singleCtx.inputProps}
+                      />
+                    </>
+                  )}
+                </>
+              ) : (
+                <Button onClick={() => setOpen((x) => !x)}>
+                  Åpne datovelger
+                </Button>
+              )}
+            </>
+          )}
+        </Comp>
+      </div>
+    );
+  },
 
-Default.args = {
-  dropdownCaption: false,
-  disableWeekends: false,
-  showWeekNumber: false,
-  inputfield: true,
-  standalone: false,
-  openOnFocus: true,
+  args: {
+    dropdownCaption: false,
+    disableWeekends: false,
+    showWeekNumber: false,
+    inputfield: true,
+    standalone: false,
+    openOnFocus: true,
+  },
 };
 
 export const DropdownCaption = () => (
@@ -198,9 +201,11 @@ export const OpenOnFocus = () => {
 export const NB = () => (
   <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
+
 export const NN = () => (
   <DatePicker.Standalone locale="nn" today={new Date("2006-07-01")} />
 );
+
 export const EN = () => (
   <DatePicker.Standalone locale="en" today={new Date("2006-07-01")} />
 );
@@ -212,6 +217,7 @@ export const Standalone = () => (
 export const StandaloneRange = () => (
   <DatePicker.Standalone mode="range" today={new Date("2006-07-01")} />
 );
+
 export const StandaloneMultiple = () => (
   <DatePicker.Standalone mode="multiple" today={new Date("2006-07-01")} />
 );

package/src/date/hooks/useRangeDatepicker.tsx

@@ -388,11 +388,11 @@ export const useRangeDatepicker = (
           formatDateForInput(prevToRange, locale, "date", inputFormat)
         )
       : setToInputValue("");
+    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
     updateValidation(
       { isValidDate: !!range?.from, isEmpty: !range?.from },
       { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
     );
-    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
   };
 
   const fromChange = (

package/src/date/index.ts

@@ -1,19 +1,19 @@
-export { DateInputProps } from "./DateInput";
+export { type DateInputProps } from "./DateInput";
 export {
-  DatePickerProps,
+  type DatePickerProps,
   default as UNSAFE_DatePicker,
 } from "./datepicker/DatePicker";
-export { DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
-export { MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
+export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
   UNSAFE_useDatepicker,
   UNSAFE_useMonthpicker,
   UNSAFE_useRangeDatepicker,
-  RangeValidationT,
-  DateValidationT,
-  MonthValidationT,
+  type RangeValidationT,
+  type DateValidationT,
+  type MonthValidationT,
 } from "./hooks";
 export {
   default as UNSAFE_MonthPicker,
-  MonthPickerProps,
+  type MonthPickerProps,
 } from "./monthpicker/MonthPicker";

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -54,17 +54,19 @@ export const NB = () => <MonthPicker.Standalone locale="nb" />;
 export const NN = () => <MonthPicker.Standalone locale="nn" />;
 export const EN = () => <MonthPicker.Standalone locale="en" />;
 
-export const DisabledMonths = (props) => {
-  return (
-    <MonthPicker.Standalone
-      disabled={[
-        { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
-        { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
-        new Date("Sep 5 2022"),
-        new Date("Jan 5 2023"),
-      ]}
-    />
-  );
+export const DisabledMonths = {
+  render: (props) => {
+    return (
+      <MonthPicker.Standalone
+        disabled={[
+          { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
+          { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
+          new Date("Sep 5 2022"),
+          new Date("Jan 5 2023"),
+        ]}
+      />
+    );
+  },
 };
 
 export const Standalone = () => {

package/src/date/utils/index.ts

@@ -17,5 +17,5 @@ export { disableDate } from "./dates-disabled";
 
 export { dateIsInCurrentMonth, isValidDate, hasNextYear } from "./check-dates";
 export { getInitialYear } from "./get-initial-year";
-export { isMatch, isDateInRange, Matcher } from "./is-match";
+export { isMatch, isDateInRange, type Matcher } from "./is-match";
 export { nextEnabled } from "./navigation";

package/src/form/Fieldset/index.ts

@@ -1,5 +1,5 @@
 export {
   default as Fieldset,
-  FieldsetProps,
+  type FieldsetProps,
   FieldsetContext,
 } from "./Fieldset";

package/src/form/checkbox/checkbox.stories.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 
 export default {
-  title: "ds-react/Form/Checkbox",
+  title: "ds-react/Checkbox",
   component: Checkbox,
   subcomponents: {
     CheckboxGroup,
@@ -13,69 +14,73 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState(["checkbox1"]);
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState(["checkbox1"]);
 
-  return (
-    <div>
-      <CheckboxGroup
-        legend={props.legend}
-        description={props.description}
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : undefined}
-        hideLegend={props.hideLegend}
-        error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
-        size={props?.size}
-      >
-        <Checkbox
-          value="checkbox1"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Apple"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox2"
-          error={props.errorSingle}
-          description={
-            props.checkboxDescription
-              ? "Quis laborum culpa enim amet cillum veniam."
-              : undefined
+    return (
+      <div>
+        <CheckboxGroup
+          legend={props.legend}
+          description={props.description}
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          hideLegend={props.hideLegend}
+          error={
+            props.errorGroup ? "Errormelding for checkboxgruppe" : undefined
           }
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Orange"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox3"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
+          size={props?.size}
         >
-          {props.children || "Banana"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox4"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Melon"}
-        </Checkbox>
-      </CheckboxGroup>
-    </div>
-  );
-};
+          <Checkbox
+            value="checkbox1"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Apple"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox2"
+            error={props.errorSingle}
+            description={
+              props.checkboxDescription
+                ? "Quis laborum culpa enim amet cillum veniam."
+                : undefined
+            }
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Orange"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox3"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Banana"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox4"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Melon"}
+          </Checkbox>
+        </CheckboxGroup>
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  legend: "Legend-tekst",
-  checkboxDescription: false,
-  hideLabel: false,
-  hideLegend: false,
-  errorSingle: false,
-  errorGroup: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    legend: "Legend-tekst",
+    checkboxDescription: false,
+    hideLabel: false,
+    hideLegend: false,
+    errorSingle: false,
+    errorGroup: false,
+    children: "",
+    description: "",
+  },
 };
 
 export const Group = () => (

package/src/form/checkbox/index.ts

@@ -1,2 +1,5 @@
-export { default as Checkbox, CheckboxProps } from "./Checkbox";
-export { default as CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
+export { default as Checkbox, type CheckboxProps } from "./Checkbox";
+export {
+  default as CheckboxGroup,
+  type CheckboxGroupProps,
+} from "./CheckboxGroup";

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { ErrorSummary } from "..";
 export default {
-  title: "ds-react/Form/Errorsummary",
+  title: "ds-react/Errorsummary",
   component: ErrorSummary,
   argTypes: {
     headingTag: {
@@ -19,18 +19,20 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => (
-  <ErrorSummary
-    heading="Feiloppsummering komponent"
-    headingTag={props.headingTag || "h2"}
-    size={props.size ?? undefined}
-  >
-    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-    <ErrorSummary.Item href="#2">
-      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummary.Item>
-  </ErrorSummary>
-);
+export const Default = {
+  render: (props) => (
+    <ErrorSummary
+      heading="Feiloppsummering komponent"
+      headingTag={props.headingTag || "h2"}
+      size={props.size ?? undefined}
+    >
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
+};
 
 export const Small = () => (
   <ErrorSummary heading="Feiloppsummering komponent" size="small">

package/src/form/error-summary/index.ts

@@ -1,2 +1,2 @@
 export { default as ErrorSummary } from "./ErrorSummary";
-export { ErrorSummaryProps } from "./ErrorSummary";
+export { type ErrorSummaryProps } from "./ErrorSummary";

package/src/form/index.ts

@@ -1,18 +1,23 @@
 export {
   Checkbox,
   CheckboxGroup,
-  CheckboxGroupProps,
-  CheckboxProps,
+  type CheckboxGroupProps,
+  type CheckboxProps,
 } from "./checkbox";
 export {
-  ConfirmationPanelProps,
+  type ConfirmationPanelProps,
   default as ConfirmationPanel,
 } from "./ConfirmationPanel";
-export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, FieldsetProps } from "./Fieldset";
-export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { Search, SearchClearEvent, SearchProps } from "./search";
-export { default as Select, SelectProps } from "./Select";
-export { default as Switch, SwitchProps } from "./Switch";
-export { Counter, default as Textarea, TextareaProps } from "./Textarea";
-export { default as TextField, TextFieldProps } from "./TextField";
+export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export {
+  Radio,
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./radio";
+export { Search, type SearchClearEvent, type SearchProps } from "./search";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
+export { default as TextField, type TextFieldProps } from "./TextField";

package/src/form/radio/index.ts

@@ -1,2 +1,2 @@
-export { default as Radio, RadioProps } from "./Radio";
-export { default as RadioGroup, RadioGroupProps } from "./RadioGroup";
+export { default as Radio, type RadioProps } from "./Radio";
+export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";