@navikt/ds-react 3.4.2 → 4.1.0

package/src/date/DateInput.tsx

@@ -28,131 +28,121 @@ export interface DateInputProps
   variant?: "datepicker" | "monthpicker";
 }
 
-export type DateInputType = React.ForwardRefExoticComponent<
-  DateInputProps & React.RefAttributes<HTMLInputElement>
->;
+const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
+  const {
+    className,
+    hideLabel = false,
+    label,
+    description,
+    variant = "datepicker",
+    ...rest
+  } = props;
 
-const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
-  (props, ref) => {
-    const {
-      className,
-      hideLabel = false,
-      label,
-      description,
-      variant = "datepicker",
-      ...rest
-    } = props;
+  const isDatepickerVariant = variant === "datepicker";
 
-    const isDatepickerVariant = variant === "datepicker";
+  const conditionalVariables = {
+    prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+    iconTitle: {
+      open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+      close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+    },
+  };
 
-    const conditionalVariables = {
-      prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
-      iconTitle: {
-        open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
-        close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
-      },
-    };
+  const { onOpen, ariaId, open } = useDateInputContext();
 
-    const { onOpen, ariaId, open } = useDateInputContext();
+  const {
+    inputProps,
+    size = "medium",
+    inputDescriptionId,
+    errorId,
+    showErrorMsg,
+    hasError,
+  } = useFormField(props, conditionalVariables.prefix);
 
-    const {
-      inputProps,
-      size = "medium",
-      inputDescriptionId,
-      errorId,
-      showErrorMsg,
-      hasError,
-    } = useFormField(props, conditionalVariables.prefix);
-
-    return (
-      <div
-        className={cl(
-          className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
-          "navds-date__field",
-          {
-            "navds-text-field--error": hasError,
-            "navds-date__field--error": hasError,
-            "navds-form-field--disabled": !!inputProps.disabled,
-            "navds-text-field--disabled": !!inputProps.disabled,
-          }
-        )}
+  return (
+    <div
+      className={cl(
+        className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        "navds-date__field",
+        {
+          "navds-text-field--error": hasError,
+          "navds-date__field--error": hasError,
+          "navds-form-field--disabled": !!inputProps.disabled,
+          "navds-text-field--disabled": !!inputProps.disabled,
+        }
+      )}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        className={cl("navds-form-field__label", {
+          "navds-sr-only": hideLabel,
+        })}
       >
-        <Label
-          htmlFor={inputProps.id}
-          size={size}
-          className={cl("navds-form-field__label", {
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          as="div"
+          className={cl("navds-form-field__description", {
             "navds-sr-only": hideLabel,
           })}
+          id={inputDescriptionId}
+          size={size}
         >
-          {label}
-        </Label>
-        {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
-        )}
-        <div className="navds-date__field-wrapper">
-          <input
-            ref={ref}
-            {...omit(rest, ["error", "errorId", "size"])}
-            {...inputProps}
-            autoComplete="off"
-            aria-controls={ariaId}
-            className={cl(
-              "navds-date__field-input",
-              "navds-text-field__input",
-              "navds-body-short",
-              `navds-body-${size}`
-            )}
-            size={14}
-          />
-          <button
-            disabled={inputProps.disabled}
-            tabIndex={open ? -1 : 0}
-            onClick={() => onOpen()}
-            type="button"
-            className="navds-date__field-button"
-          >
-            <CalendarIcon
-              pointerEvents="none"
-              title={
-                open
-                  ? conditionalVariables.iconTitle.close
-                  : conditionalVariables.iconTitle.open
-              }
-            />
-          </button>
-        </div>
-        <div
-          className="navds-form-field__error"
-          id={errorId}
-          aria-relevant="additions removals"
-          aria-live="polite"
-        >
-          {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          {description}
+        </BodyShort>
+      )}
+      <div className="navds-date__field-wrapper">
+        <input
+          ref={ref}
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          autoComplete="off"
+          aria-controls={ariaId}
+          className={cl(
+            "navds-date__field-input",
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size}`
           )}
-        </div>
+          size={14}
+        />
+        <button
+          disabled={inputProps.disabled}
+          tabIndex={open ? -1 : 0}
+          onClick={() => onOpen()}
+          type="button"
+          className="navds-date__field-button"
+        >
+          <CalendarIcon
+            pointerEvents="none"
+            title={
+              open
+                ? conditionalVariables.iconTitle.close
+                : conditionalVariables.iconTitle.open
+            }
+          />
+        </button>
       </div>
-    );
-  }
-);
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
 
-export const DatePickerInput: DateInputType = forwardRef<
-  HTMLInputElement,
-  DateInputProps
->((props, ref) => <DateInput {...props} ref={ref} />);
+export const DatePickerInput = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => <DateInput {...props} ref={ref} />
+);
 
-export const MonthPickerInput: DateInputType = forwardRef<
-  HTMLInputElement,
-  DateInputProps
->((props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />);
+export const MonthPickerInput = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />
+);

package/src/date/datepicker/DatePicker.tsx

@@ -12,7 +12,7 @@ import {
   SelectSingleEventHandler,
 } from "react-day-picker";
 import { omit, Popover, useId } from "../..";
-import { DateInputType, DatePickerInput } from "../DateInput";
+import { DateInputProps, DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
@@ -120,10 +120,48 @@ export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
 
 interface DatePickerComponent
   extends React.ForwardRefExoticComponent<DatePickerProps> {
+  /**
+   * @example
+   * ```jsx
+   * <DatePicker.Standalone
+   *   dropdownCaption
+   *   fromDate={new Date("2020-10-01")}
+   *   toDate={new Date("2024-10-01")}
+   * />
+   * ```
+   */
   Standalone: DatePickerStandaloneType;
-  Input: DateInputType;
+  /**
+   * Custom TextField for DatePicker
+   * @see 🏷️ {@link DateInputProps}
+   */
+  Input: React.ForwardRefExoticComponent<
+    DateInputProps & React.RefAttributes<HTMLInputElement>
+  >;
 }
 
+/**
+ * A component that allows users to select a date from a calendar.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datepicker)
+ * @see 🏷️ {@link DatePickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, datepickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <DatePicker {...datepickerProps} dropdownCaption>
+ *       <DatePicker.Input
+ *         {...inputProps}
+ *         label="Velg dato"
+ *       />
+ *     </DatePicker>
+ *  );
+ * ```
+ */
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useId, useState } from "react";
-import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
+import { useDatepicker, useRangeDatepicker } from "..";
 import { Button } from "../..";
 import DatePicker from "./DatePicker";
 
@@ -18,12 +18,12 @@ export const Default = {
   render: (props) => {
     const [open, setOpen] = useState(false);
 
-    const rangeCtx = UNSAFE_useRangeDatepicker({
+    const rangeCtx = useRangeDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
     });
 
-    const singleCtx = UNSAFE_useDatepicker({
+    const singleCtx = useDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
     });
@@ -147,7 +147,7 @@ export const ShowWeekNumber = () => (
 );
 
 export const UseDatepicker = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
@@ -163,12 +163,11 @@ export const UseDatepicker = () => {
 };
 
 export const UseRangedDatepicker = () => {
-  const { datepickerProps, fromInputProps, toInputProps } =
-    UNSAFE_useRangeDatepicker({
-      fromDate: new Date("Aug 23 2019"),
-      onRangeChange: console.log,
-      onValidate: console.log,
-    });
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onRangeChange: console.log,
+    onValidate: console.log,
+  });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
@@ -183,7 +182,7 @@ export const UseRangedDatepicker = () => {
 };
 
 export const OpenOnFocus = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     onDateChange: console.log,
     openOnFocus: false,
   });
@@ -243,7 +242,7 @@ export const UserControlled = () => {
 
 export const Validering = () => {
   const [error, setError] = useState(false);
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 2 2019"),
     onValidate: (val) => setError(val.isWeekend),
     defaultSelected: new Date("Nov 26 2022"),
@@ -289,13 +288,12 @@ export const ErrorInput = () => {
 };
 
 export const UseRangedDatepickerValidation = () => {
-  const { datepickerProps, fromInputProps, toInputProps } =
-    UNSAFE_useRangeDatepicker({
-      fromDate: new Date("Aug 23 2019"),
-      disableWeekends: true,
-      disabled: [new Date("Oct 10 2022")],
-      onValidate: console.table,
-    });
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    disableWeekends: true,
+    disabled: [new Date("Oct 10 2022")],
+    onValidate: console.table,
+  });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
@@ -310,7 +308,7 @@ export const UseRangedDatepickerValidation = () => {
 };
 
 export const defaultShownMonth = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
     defaultMonth: new Date("Oct 23 2022"),
@@ -326,7 +324,7 @@ export const defaultShownMonth = () => {
 };
 
 export const Size = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,

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

@@ -2,18 +2,18 @@
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { UNSAFE_DatePicker, UNSAFE_useDatepicker } from "..";
+import { DatePicker, useDatepicker } from "..";
 
 const App = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
   });
 
   return (
-    <UNSAFE_DatePicker {...datepickerProps}>
-      <UNSAFE_DatePicker.Input {...inputProps} label="Velg dato" />
-    </UNSAFE_DatePicker>
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" />
+    </DatePicker>
   );
 };
 

package/src/date/hooks/index.ts

@@ -1,6 +1,6 @@
-export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export { useDatepicker } from "./useDatepicker";
 export type { DateValidationT } from "./useDatepicker";
-export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export { useRangeDatepicker } from "./useRangeDatepicker";
 export type { RangeValidationT } from "./useRangeDatepicker";
-export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
+export { useMonthpicker } from "./useMonthPicker";
 export type { MonthValidationT } from "./useMonthPicker";

package/src/date/hooks/useDatepicker.tsx

@@ -113,6 +113,19 @@ const getValidationMessage = (val = {}): DateValidationT => ({
   ...val,
 });
 
+/**
+ *
+ * @see 🏷️ {@link UseDatepickerOptions}
+ * @see 🏷️ {@link UseDatepickerValue}
+ * @see 🏷️ {@link DateValidationT}
+ * @example
+ * const { datepickerProps, inputProps } = useDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onDateChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useDatepicker = (
   opt: UseDatepickerOptions = {}
 ): UseDatepickerValue => {

package/src/date/hooks/useMonthPicker.tsx

@@ -110,6 +110,19 @@ const getIsAfter = (opt: { toDate?: Date; date?: Date }) =>
     (opt.toDate.getFullYear() === opt.date.getFullYear() &&
       opt.toDate.getMonth() < opt.date.getMonth()));
 
+/**
+ *
+ * @see 🏷️ {@link UseMonthPickerOptions}
+ * @see 🏷️ {@link UseMonthPickerValue}
+ * @see 🏷️ {@link MonthValidationT}
+ * @example
+ * const { monthpickerProps, inputProps } = useMonthpicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onMonthChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useMonthpicker = (
   opt: UseMonthPickerOptions = {}
 ): UseMonthPickerValue => {

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -2,20 +2,20 @@
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { UNSAFE_DatePicker, UNSAFE_useRangeDatepicker } from "..";
+import { DatePicker, useRangeDatepicker } from "..";
 
 const RangeDemo = () => {
   const { datepickerProps, fromInputProps, selectedRange, toInputProps } =
-    UNSAFE_useRangeDatepicker({
+    useRangeDatepicker({
       fromDate: new Date("Aug 23 2019"),
     });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
-      <UNSAFE_DatePicker {...datepickerProps}>
-        <UNSAFE_DatePicker.Input {...fromInputProps} label="Fra" />
-        <UNSAFE_DatePicker.Input {...toInputProps} label="Til" />
-      </UNSAFE_DatePicker>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...fromInputProps} label="Fra" />
+        <DatePicker.Input {...toInputProps} label="Til" />
+      </DatePicker>
       <div title="res">{JSON.stringify(selectedRange)}</div>
     </div>
   );

package/src/date/hooks/useRangeDatepicker.tsx

@@ -102,7 +102,7 @@ const RANGE = {
   TO: "TO",
 } as const;
 
-type RangeT = typeof RANGE[keyof typeof RANGE];
+type RangeT = (typeof RANGE)[keyof typeof RANGE];
 
 const fromValidation = (day: Date, opt?: UseRangeDatepickerOptions) => {
   const isBefore =
@@ -190,6 +190,18 @@ const initialValidation = (
   return getValidationMessage({ ...fromVal }, { ...toVal });
 };
 
+/**
+ *
+ * @see 🏷️ {@link UseRangeDatepickerOptions}
+ * @see 🏷️ {@link UseRangeDatepickerValue}
+ * @see 🏷️ {@link RangeValidationT}
+ * @example
+ * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   onRangeChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useRangeDatepicker = (
   opt: UseRangeDatepickerOptions = {}
 ): UseRangeDatepickerValue => {

package/src/date/index.ts

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

package/src/date/monthpicker/MonthPicker.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
 import { Popover, useId } from "../..";
-import { DateInputType, MonthPickerInput } from "../DateInput";
+import { DateInputProps, MonthPickerInput } from "../DateInput";
 import { DateContext, SharedMonthProvider } from "../context";
 import { getLocaleFromString, Matcher } from "../utils";
 import MonthCaption from "./MonthCaption";
@@ -91,15 +91,47 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
 interface MonthPickerComponent
   extends React.ForwardRefExoticComponent<MonthPickerProps> {
   /**
-   * Variant without popover
+   * @example
+   * ```jsx
+   * <MonthPicker.Standalone
+   *   dropdownCaption
+   *   fromDate={new Date("1 Oct 2020")}
+   *   toDate={new Date("1 Oct 2024")}
+   * />
+   * ```
    */
   Standalone: MonthPickerStandaloneType;
   /**
-   * Built-in Inputfield
+   * Custom TextField for MonthPicker
+   * @see 🏷️ {@link DateInputProps}
    */
-  Input: DateInputType;
+  Input: React.ForwardRefExoticComponent<
+    DateInputProps & React.RefAttributes<HTMLInputElement>
+  >;
 }
 
+/**
+ * A component that displays a month picker.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/monthpicker)
+ * @see 🏷️ {@link MonthPickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, monthpickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <MonthPicker {...monthpickerProps} dropdownCaption>
+ *       <MonthPicker.Input
+ *         {...inputProps}
+ *         label="Velg måned"
+ *       />
+ *     </MonthPicker>
+ *  );
+ * ```
+ */
 export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
   (
     {

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

@@ -1,6 +1,6 @@
 import React, { useId, useState } from "react";
 import { Button } from "../..";
-import { UNSAFE_useMonthpicker } from "../hooks";
+import { useMonthpicker } from "../hooks";
 import MonthPicker from "./MonthPicker";
 
 export default {
@@ -23,7 +23,7 @@ export default {
 };
 
 export const Default = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
   });
 
@@ -74,7 +74,7 @@ export const Standalone = () => {
 };
 
 export const UseMonthpicker = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
     onMonthChange: console.log,
     fromDate: new Date("Jan 1 2022"),
@@ -95,7 +95,7 @@ export const UseMonthpicker = () => {
 };
 
 export const UseMonthpickerFormat = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
     onMonthChange: console.log,
     inputFormat: "MM.yyyy",
@@ -115,7 +115,7 @@ export const UseMonthpickerFormat = () => {
 };
 
 export const Required = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     locale: "nb",
     defaultSelected: new Date(),
     disabled: [new Date("Apr 1 2022")],

package/src/date/utils/__tests__/get-dates.test.ts

@@ -73,7 +73,6 @@ describe("Extracts correct months", () => {
       current: new Date(2022, 9, 22),
       res: 9,
     };
-    console.log(getMonths(t.start, t.end, t.current));
     expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
   });
 });