@navikt/ds-react 2.1.5 → 2.1.7

package/src/date/hooks/useMonthPicker.tsx

@@ -42,6 +42,11 @@ export interface UseMonthPickerOptions
    * In 2023 this equals to 1943 - 2042
    */
   allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }
 
 interface UseMonthPickerValue {
@@ -104,6 +109,7 @@ export const useMonthpicker = (
     onValidate,
     defaultYear,
     allowTwoDigitYear = true,
+    openOnFocus = true,
   } = opt;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -180,7 +186,7 @@ export const useMonthpicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
       today,

package/src/date/hooks/useRangeDatepicker.tsx

@@ -204,6 +204,7 @@ export const useRangeDatepicker = (
     onValidate,
     defaultMonth,
     allowTwoDigitYear = true,
+    openOnFocus = true,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -323,7 +324,7 @@ export const useRangeDatepicker = (
   };
 
   const handleFocus = (e, src: RangeT) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
       today,
@@ -387,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";

package/src/form/radio/radio.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";
 
 export default {
-  title: "ds-react/Form/Radio",
+  title: "ds-react/Radio",
   component: Radio,
   subcomponents: {
     RadioGroup,
@@ -13,41 +14,45 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("radio1");
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("radio1");
 
-  return (
-    <RadioGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.error ? "Errormelding" : undefined}
-      size={props?.size}
-    >
-      <Radio value="radio1">{props.children || "Apple"}</Radio>
-      <Radio
-        value="radio2"
-        description={props.radioDescription ? "Orange description" : undefined}
+    return (
+      <RadioGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.error ? "Errormelding" : undefined}
+        size={props?.size}
       >
-        {props.children || "Orange"}
-      </Radio>
-      <Radio value="radio3">{props.children || "Banana"}</Radio>
-      <Radio value="radio4">{props.children || "Melon"}</Radio>
-    </RadioGroup>
-  );
-};
+        <Radio value="radio1">{props.children || "Apple"}</Radio>
+        <Radio
+          value="radio2"
+          description={
+            props.radioDescription ? "Orange description" : undefined
+          }
+        >
+          {props.children || "Orange"}
+        </Radio>
+        <Radio value="radio3">{props.children || "Banana"}</Radio>
+        <Radio value="radio4">{props.children || "Melon"}</Radio>
+      </RadioGroup>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  error: false,
-  size: "medium",
-  legend: "Legend-tekst",
-  radioDescription: false,
-  hideLegend: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    error: false,
+    size: "medium",
+    legend: "Legend-tekst",
+    radioDescription: false,
+    hideLegend: false,
+    children: "",
+    description: "",
+  },
 };
 
 export const Group = () => (

package/src/form/search/index.ts

@@ -1 +1,5 @@
-export { default as Search, SearchProps, SearchClearEvent } from "./Search";
+export {
+  default as Search,
+  type SearchProps,
+  type SearchClearEvent,
+} from "./Search";

package/src/form/search/search.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 
 import { Search } from "../index";
 export default {
-  title: "ds-react/Form/Search",
+  title: "ds-react/Search",
   component: Search,
   argTypes: {
     clearButton: {
@@ -31,28 +32,30 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("");
-  return (
-    <div data-theme={props.darkmode ? "dark" : "light"}>
-      <Search
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : null}
-        label="Søk"
-        size={props.size}
-        clearButton={props.clearButton}
-        variant={props.variant}
-        hideLabel={props.hideLabel}
-        error={props.error}
-      />
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("");
+    return (
+      <div data-theme={props.darkmode ? "dark" : "light"}>
+        <Search
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          label="Søk"
+          size={props.size}
+          clearButton={props.clearButton}
+          variant={props.variant}
+          hideLabel={props.hideLabel}
+          error={props.error}
+        />
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  darkmode: false,
-  hideLabel: true,
+  args: {
+    controlled: false,
+    darkmode: false,
+    hideLabel: true,
+  },
 };
 
 export const Small = () => (

package/src/form/stories/confirmation-panel.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { ConfirmationPanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { Link } from "../..";
 export default {
-  title: "ds-react/form/ConfirmationPanel",
+  title: "ds-react/ConfirmationPanel",
   component: ConfirmationPanel,
   argTypes: {
     size: {
@@ -25,22 +25,24 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <ConfirmationPanel
-      error={props?.error}
-      size={props?.size}
-      checked={props?.checked ?? undefined}
-      label={props?.label ?? "Checkbox label text"}
-    >
-      {content}
-    </ConfirmationPanel>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <ConfirmationPanel
+        error={props?.error}
+        size={props?.size}
+        checked={props?.checked ?? undefined}
+        label={props?.label ?? "Checkbox label text"}
+      >
+        {content}
+      </ConfirmationPanel>
+    );
+  },
 
-Default.args = {
-  label: "Checkbox label text",
-  checked: false,
+  args: {
+    label: "Checkbox label text",
+    checked: false,
+  },
 };
 
 export const Small = () => {

package/src/form/stories/fieldset.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Fieldset } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { TextField } from "../../index";
 export default {
-  title: "ds-react/form/Fieldset",
+  title: "ds-react/Fieldset",
   component: Fieldset,
   argTypes: {
     size: {
@@ -34,16 +34,18 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <Fieldset legend="Mollit eiusmod" {...props}>
-      {content}
-    </Fieldset>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Fieldset legend="Mollit eiusmod" {...props}>
+        {content}
+      </Fieldset>
+    );
+  },
 
-Default.args = {
-  errorPropagation: true,
+  args: {
+    errorPropagation: true,
+  },
 };
 
 export const Small = () => (