@navikt/ds-react 8.3.0 → 8.4.1

package/src/data/table/root/useTableKeyboardNav.ts

@@ -0,0 +1,197 @@
+import { useEffect, useRef, useState } from "react";
+import { useEventCallback } from "../../../utils/hooks";
+import { getActiveCell, getFirstCell } from "../helpers/table-cell";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import {
+  type GridCache,
+  ensureTableGrid,
+  findNextCell,
+} from "../helpers/table-grid-nav";
+import {
+  getDeltaFromKey,
+  shouldBlockArrowKeyNavigation,
+} from "../helpers/table-keyboard";
+
+function useTableKeyboardNav(
+  tableRef: HTMLTableElement | null,
+  { enabled }: { enabled: boolean },
+) {
+  const [activeCell, setActiveCell] = useState<Element | null>(null);
+  const activeCellRef = useRef<Element | null>(null);
+  activeCellRef.current = activeCell;
+
+  const observerRef = useRef<MutationObserver | null>(null);
+
+  const gridCacheRef = useRef<GridCache>({
+    grid: null,
+    dirty: true,
+  });
+
+  /**
+   * TODO:
+   * - Save original tabIndex of cells and restore when navigating away?
+   */
+  const navigateByArrowKey = useEventCallback(
+    (delta: { x: number; y: number }) => {
+      const currentCell = getActiveCell(tableRef, activeCell);
+      if (!currentCell || !tableRef) {
+        return null;
+      }
+
+      const { grid, positions, maxCols } = ensureTableGrid(
+        tableRef,
+        gridCacheRef.current,
+      );
+      const currentPos = positions.get(currentCell);
+
+      if (!currentPos) {
+        return null;
+      }
+
+      const nextCell = findNextCell(
+        grid,
+        currentPos,
+        delta,
+        currentCell,
+        maxCols,
+      );
+      return nextCell
+        ? focusCellAndUpdateTabIndex(nextCell, currentCell)
+        : null;
+    },
+  );
+
+  /**
+   * Handles keyboard navigation with arrow keys.
+   * We check if the key is an arrow key, and if so, we calculate the next cell to focus based on the current active cell and the grid structure.
+   *
+   * TODO:
+   * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
+   * - Consider having acallback user can hook into to determine if navigation should be blocked
+   * - Consider adding Home, End, PageUp, PageDown navigation
+   *
+   */
+  const onKeyDown = useEventCallback((event: KeyboardEvent): void => {
+    /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
+    if (shouldBlockArrowKeyNavigation(event)) {
+      return;
+    }
+
+    let newCell: Element | null = null;
+
+    const delta = getDeltaFromKey(event.key);
+    if (delta) {
+      event.preventDefault();
+      newCell = navigateByArrowKey(delta);
+    }
+
+    newCell && setActiveCell(newCell);
+  });
+
+  /**
+   * When focus is moved to elements inside a cell like inputs, checkbox etc
+   * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
+   */
+  const onFocusIn = useEventCallback((event: FocusEvent): void => {
+    const target = event.target as Element | null;
+    const newCell = target?.closest("td, th") ?? null;
+    if (!newCell || newCell === activeCell) {
+      return;
+    }
+
+    const updatedCell = focusCellAndUpdateTabIndex(newCell, activeCell, {
+      shouldFocus: false,
+    });
+    if (updatedCell) {
+      setActiveCell(updatedCell);
+    }
+  });
+
+  /**
+   * Observes changes is table structure and updates the grid cache accordingly.
+   * - We want to check if elements are removed/added, like when filtering table, pagination etc
+   * - Changes in colspan/rowspan that can affect the grid structure
+   * - Hidden attribute or styles that can affect focusability of cells
+   *
+   * We also check if the active cell is removed from the DOM, and clear it if so.
+   */
+  useEffect(() => {
+    if (!tableRef || !enabled) {
+      return;
+    }
+
+    observerRef.current = new MutationObserver(() => {
+      gridCacheRef.current.dirty = true;
+      if (activeCellRef.current && !activeCellRef.current.isConnected) {
+        setActiveCell(null);
+      }
+    });
+
+    observerRef.current.observe(tableRef, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["colspan", "rowspan", "hidden", "style"],
+    });
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [tableRef, enabled]);
+
+  useEffect(() => {
+    if (!tableRef || !enabled) {
+      return;
+    }
+
+    tableRef.addEventListener("keydown", onKeyDown);
+    tableRef.addEventListener("focusin", onFocusIn);
+
+    return () => {
+      tableRef.removeEventListener("keydown", onKeyDown);
+      tableRef.removeEventListener("focusin", onFocusIn);
+    };
+  }, [tableRef, onKeyDown, onFocusIn, enabled]);
+
+  /*
+   * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
+   * since the table might have changed while it was disabled.
+   */
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    gridCacheRef.current.dirty = true;
+  }, [enabled]);
+
+  return {
+    /* Table should only have tabIndex until the focus is moved inside and is enabled */
+    tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    /*
+     * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
+     * We only want to do this if no cell is already focused.
+     */
+    onFocus: () => {
+      if (!tableRef) {
+        return;
+      }
+
+      const focusedElement = document.activeElement;
+      const cellInTable = focusedElement?.closest("td, th");
+
+      /* Assume onFocusIn handler has updates cell */
+      if (cellInTable && tableRef.contains(cellInTable)) {
+        return;
+      }
+
+      const firstCell = getFirstCell(tableRef);
+      return firstCell ? focusCell(firstCell) : null;
+    },
+  };
+}
+
+export { useTableKeyboardNav };

package/src/data/table/td/DataTableTd.tsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+}
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
   ({ className, children, ...rest }, forwardedRef) => {

package/src/data/table/th/DataTableTh.tsx

@@ -1,14 +1,18 @@
 import React, { forwardRef } from "react";
 import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
-import { HStack, Spacer } from "../../../layout/stack";
-import { ActionMenu } from "../../../overlays/action-menu";
+import { ActionMenu } from "../../../action-menu";
+import { HStack, Spacer } from "../../../primitives/stack";
 import { cl } from "../../../utils/helpers";
 import { DataTableThActions } from "./DataTableThActions";
 import { DataTableThSortHandle } from "./DataTableThSortHandle";
 
-type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
-  resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  size?: number;
+interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  resizeHandler?: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.TouchEvent<HTMLButtonElement>,
+  ) => void;
+  size?: number; // TODO: size should be required when resizeHandler is set
   sortDirection?: "asc" | "desc" | "none" | false;
   onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
   render?: {
@@ -17,7 +21,12 @@ type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
       content: React.ReactNode;
     };
   };
-};
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+}
 
 /**
  * TODO:
@@ -49,6 +58,7 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
       >
         <HStack align="center" gap="space-8" wrap={false}>
           <div className="aksel-data-table__th-content">{children}</div>
+          {/* TODO: If the column is too narrow, the sort button will move when hovering b.c. the actions menu button slides in */}
           <DataTableThSortHandle
             sortDirection={sortDirection}
             onSortChange={onSortChange}
@@ -92,10 +102,10 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
 
         {resizeHandler && (
           <button
+            // TODO: Should probably not be a button since it doesn't have onClick
             onMouseDown={resizeHandler}
-            onMouseUp={resizeHandler}
-            className={cl("aksel-data-table__th-resize-handle")}
-            data-color="neutral"
+            onTouchStart={resizeHandler}
+            className="aksel-data-table__th-resize-handle"
           />
         )}
       </th>

package/src/data/table/th/DataTableThActions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MenuElipsisVerticalIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../../action-menu";
 import { Button } from "../../../button";
-import { ActionMenu } from "../../../overlays/action-menu";
 
 function DataTableThActions({ children }: { children?: React.ReactNode }) {
   const [open, setOpen] = React.useState(false);

package/src/data/table/tr/DataTableTr.tsx

@@ -1,15 +1,19 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement>;
+type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
+  selected?: boolean;
+};
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  ({ className, selected = false, ...rest }, forwardedRef) => {
     return (
       <tr
         {...rest}
         ref={forwardedRef}
-        className={cl("aksel-data-table__tr", className)}
+        className={cl("aksel-data-table__tr", className, {
+          "aksel-data-table__tr--selected": selected,
+        })}
       />
     );
   },

package/src/date/Date.Input.tsx

@@ -35,8 +35,7 @@ export const {
 });
 
 export interface DateInputProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
    * Input label
    */

package/src/date/datepicker/DatePicker.types.ts

@@ -39,7 +39,8 @@ export type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
 // https://daypicker.dev/api/interfaces/PropsBase
 export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
     Pick<
       PropsBase,
       "month" | "onMonthChange" | "today" | "onDayClick" | "defaultMonth"

package/src/date/datepicker/hooks/useDatepicker.tsx

@@ -7,19 +7,18 @@ import { getLocaleFromString } from "../../Date.locale";
 import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
 import { DatePickerProps } from "../DatePicker";
 
-export interface UseDatepickerOptions
-  extends Pick<
-    DatePickerProps,
-    | "locale"
-    | "fromDate"
-    | "toDate"
-    | "today"
-    | "toDate"
-    | "fromDate"
-    | "toDate"
-    | "disabled"
-    | "disableWeekends"
-  > {
+export interface UseDatepickerOptions extends Pick<
+  DatePickerProps,
+  | "locale"
+  | "fromDate"
+  | "toDate"
+  | "today"
+  | "toDate"
+  | "fromDate"
+  | "toDate"
+  | "disabled"
+  | "disableWeekends"
+> {
   /**
    * The initially selected Date
    */

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

@@ -38,11 +38,10 @@ const getValidationMessage = (from = {}, to = {}): RangeValidationT => ({
   },
 });
 
-export interface UseRangeDatepickerOptions
-  extends Omit<
-    UseDatepickerOptions,
-    "defaultSelected" | "onDateChange" | "onValidate"
-  > {
+export interface UseRangeDatepickerOptions extends Omit<
+  UseDatepickerOptions,
+  "defaultSelected" | "onDateChange" | "onValidate"
+> {
   /**
    * The initially selected DateRange
    */

package/src/date/datepicker/parts/DatePicker.RDP.tsx

@@ -1,7 +1,7 @@
 import { isBefore, isSameDay, isWeekend } from "date-fns";
 import React, { useCallback } from "react";
 import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
-import { Show } from "../../../layout/responsive";
+import { Show } from "../../../primitives/responsive";
 import { omit } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
 import { useDateLocale } from "../../../utils/i18n/i18n.hooks";

package/src/date/datepicker/parts/DatePicker.Standalone.tsx

@@ -15,11 +15,10 @@ import {
 } from "../DatePicker.types";
 import { ReactDayPicker } from "./DatePicker.RDP";
 
-interface DatePickerStandaloneDefaultProps
-  extends Omit<
-    DatePickerDefaultProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
+interface DatePickerStandaloneDefaultProps extends Omit<
+  DatePickerDefaultProps,
+  "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
+> {
   /**
    * Datepicker classname
    */

package/src/date/datepicker/parts/DatePicker.WeekNumber.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { CalendarWeek, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
-import { Hide, Show } from "../../../layout/responsive";
+import { Hide, Show } from "../../../primitives/responsive";
 import { Detail } from "../../../typography";
 import { cl } from "../../../utils/helpers";
 import { useDateTranslationContext } from "../../Date.locale";

package/src/date/datepicker/parts/DatePicker.WeekRow.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { CalendarWeek } from "react-day-picker";
-import { Show } from "../../../layout/responsive";
+import { Show } from "../../../primitives/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../utils-external";
 import { useDateTranslationContext } from "../../Date.locale";

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -6,11 +6,10 @@ import { getLocaleFromString } from "../../Date.locale";
 import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
 import { MonthPickerProps } from "../MonthPicker.types";
 
-export interface UseMonthPickerOptions
-  extends Pick<
-    MonthPickerProps,
-    "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"
-  > {
+export interface UseMonthPickerOptions extends Pick<
+  MonthPickerProps,
+  "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"
+> {
   /**
    * Make Date-selection required
    */

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -11,11 +11,10 @@ import { MonthPickerProps } from "../MonthPicker.types";
 import { MonthPickerCaption } from "./MonthPicker.Caption";
 import { MonthPickerTable } from "./MonthPicker.Table";
 
-export interface MonthPickerStandaloneProps
-  extends Omit<
-    MonthPickerProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
+export interface MonthPickerStandaloneProps extends Omit<
+  MonthPickerProps,
+  "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
+> {
   /**
    * Monthpicker classname
    */

package/src/dialog/close-trigger/DialogCloseTrigger.tsx

@@ -3,8 +3,7 @@ import { Slot } from "../../utils/components/slot/Slot";
 import { composeEventHandlers } from "../../utils/helpers";
 import { useDialogContext } from "../root/DialogRoot.context";
 
-interface DialogCloseTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface DialogCloseTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactElement;
 }
 

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { BoxNew, type BoxNewProps } from "../../layout/box";
-import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer";
+import { BoxNew, type BoxNewProps } from "../../primitives/box";
+import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
 import { FocusBoundary } from "../../utils/components/focus-boundary/FocusBoundary";
 import { FocusGuards } from "../../utils/components/focus-guards/FocusGuards";
 import { cl } from "../../utils/helpers";
@@ -14,8 +14,7 @@ import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogPosition = "center" | "bottom" | "left" | "right" | "fullscreen";
 
-interface DialogPopupInternalProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DialogPopupInternalProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Determines if the dialog enters a modal state when open.
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-export interface GroupedHeadingProps
-  extends React.HTMLAttributes<HTMLDetailsElement> {
+export interface GroupedHeadingProps extends React.HTMLAttributes<HTMLDetailsElement> {
   /**
    * Heading
    */

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -3,8 +3,7 @@ import type { OverridableComponent } from "../../../utils-external";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DropdownContext } from "../../context";
 
-export interface GroupedItemProps
-  extends React.ButtonHTMLAttributes<HTMLElement> {
+export interface GroupedItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
   /**
    * Menu item content
    */

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -4,18 +4,16 @@ import { cl } from "../../../utils/helpers";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 
-export interface GroupedListProps
-  extends React.HTMLAttributes<HTMLDListElement> {
+export interface GroupedListProps extends React.HTMLAttributes<HTMLDListElement> {
   /**
    * Menu list content
    */
   children: React.ReactNode;
 }
 
-export interface GroupedListType
-  extends React.ForwardRefExoticComponent<
-    GroupedListProps & React.RefAttributes<HTMLDListElement>
-  > {
+export interface GroupedListType extends React.ForwardRefExoticComponent<
+  GroupedListProps & React.RefAttributes<HTMLDListElement>
+> {
   /**
    * @see 🏷️ {@link GroupedHeadingProps}
    */

package/src/dropdown/Menu/List/index.tsx

@@ -10,10 +10,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
 }
 
-export interface ListType
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLUListElement>
-  > {
+export interface ListType extends React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLUListElement>
+> {
   /**
    * @see 🏷️ {@link ListItemProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support

package/src/dropdown/Menu/index.tsx

@@ -39,10 +39,11 @@ interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     | "left-end";
 }
 
-export interface MenuType<Props = DropdownMenuProps>
-  extends React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<HTMLDivElement>
-  > {
+export interface MenuType<
+  Props = DropdownMenuProps,
+> extends React.ForwardRefExoticComponent<
+  Props & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ListType}
    */

package/src/dropdown/Toggle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef, useContext } from "react";
 import { cl, composeEventHandlers } from "../utils/helpers";
 import { DropdownContext } from "./context";
 
-export interface DropdownToggleProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DropdownToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Button content
    */

package/src/expansion-card/ExpansionCardContent.tsx

@@ -4,8 +4,7 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ExpansionCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -3,8 +3,7 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardDescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface ExpansionCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -4,8 +4,7 @@ import { cl } from "../utils/helpers";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ExpansionCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface ExpansionCardTitleProps
-  extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   /**
    * Changes text-sizing

package/src/form/checkbox/CheckboxGroup.tsx

@@ -13,11 +13,10 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
   null,
 );
 
-export interface CheckboxGroupProps
-  extends Omit<
-    FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
-  > {
+export interface CheckboxGroupProps extends Omit<
+  FieldsetProps,
+  "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
+> {
   /**
    * Collection of `<Checkbox/>`.
    */

package/src/form/checkbox/types.ts

@@ -2,7 +2,8 @@ import { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
 export interface CheckboxProps
-  extends FormFieldProps,
+  extends
+    FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Adds error indication on checkbox.