@navikt/ds-react 4.0.0 → 4.1.0

package/src/chips/chips.stories.tsx

@@ -66,25 +66,78 @@ export const Default = {
 };
 
 export const Toggle = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
-    <Chips>
-      {options.map((c, y) => (
-        <Chips.Toggle
-          selected={selected.includes(y)}
-          onClick={() =>
-            setSelected(
-              selected.includes(y)
-                ? selected.filter((x) => x !== y)
-                : [...selected, y]
-            )
-          }
-          key={y}
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const ToggleNoCheckmark = () => {
+  const [selected, setSelected] = useState<number>(2);
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
   );
 };
 
@@ -108,7 +161,7 @@ export const Removable = () => {
 };
 
 export const Regular = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2]);
   return (
     <div className="colgap">
       <Chips>
@@ -138,7 +191,7 @@ export const Regular = () => {
 };
 
 export const Small = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
     <div className="colgap">
       <Chips size="small">

package/src/copybutton/CopyButton.tsx

@@ -65,6 +65,17 @@ export interface CopyButtonProps
   activeTitle?: string;
 }
 
+/**
+ * A button component that copies text to the clipboard when clicked.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/copybutton)
+ * @see 🏷️ {@link CopyButtonProps}
+ *
+ * @example
+ * ```jsx
+      <CopyButton copyText="3.14" />
+ * ```
+ */
 export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
   (
     {

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/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.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/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/dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState } from "react";
-import Toggle, { ToggleType } from "./Toggle";
+import Toggle, { ToggleProps } from "./Toggle";
 import Menu, { MenuType } from "./Menu";
 
 export interface DropdownProps {
@@ -24,7 +24,15 @@ export interface DropdownProps {
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
-  Toggle: ToggleType;
+  /**
+   * @see 🏷️ {@link ToggleProps}
+   */
+  Toggle: React.ForwardRefExoticComponent<
+    ToggleProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link MenuType}
+   */
   Menu: MenuType;
 }
 
@@ -38,6 +46,37 @@ export interface DropdownContextType {
 
 export const DropdownContext = createContext<DropdownContextType | null>(null);
 
+/**
+ * A component that displays a dropdown menu when the user clicks on its toggle button.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dropdown)
+ * @see 🏷️ {@link DropdownProps}
+ *
+ * @example
+ * ```jsx
+ * <Dropdown>
+ *   <Button as={Dropdown.Toggle}>Toggle</Button>
+ *   <Dropdown.Menu>
+ *     <Dropdown.Menu.GroupedList>
+ *       <Dropdown.Menu.GroupedList.Heading>
+ *         Systemer og oppslagsverk
+ *       </Dropdown.Menu.GroupedList.Heading>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Gosys
+ *       </Dropdown.Menu.GroupedList.Item>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Infotrygd
+ *       </Dropdown.Menu.GroupedList.Item>
+ *     </Dropdown.Menu.GroupedList>
+ *     <Dropdown.Menu.Divider />
+ *     <Dropdown.Menu.List>
+ *       <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
+ *       <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item>
+ *     </Dropdown.Menu.List>
+ *   </Dropdown.Menu>
+ * </Dropdown>
+ * ```
+ */
 export const Dropdown = (({
   children,
   onSelect,

package/src/dropdown/Menu/Divider.tsx

@@ -1,18 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
 
-export type DividerType = React.ForwardRefExoticComponent<
-  React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
->;
-
-export const Divider: DividerType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <hr
-      {...rest}
-      ref={ref}
-      className={cl("navds-dropdown__divider", className)}
-    />
-  )
-);
+export const Divider = forwardRef<
+  HTMLHRElement,
+  React.HTMLAttributes<HTMLHRElement>
+>(({ className, ...rest }, ref) => (
+  <hr
+    {...rest}
+    ref={ref}
+    className={cl("navds-dropdown__divider", className)}
+  />
+));
 
 export default Divider;