@navikt/ds-react 8.7.0 → 8.8.0

package/src/data/table/th/useTableColumnResize.ts

@@ -0,0 +1,276 @@
+import { type DOMAttributes, useCallback, useState } from "react";
+import { useControllableState } from "../../../utils/hooks";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+type ColumnWidth = number | string;
+
+type ResizeProps = {
+  ref: HTMLTableCellElement | null;
+  /**
+   * Controlled width of the column.
+   *
+   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   */
+  width?: ColumnWidth;
+  /**
+   * Initial width of the column. Only used when `width` is not set.
+   */
+  defaultWidth?: ColumnWidth;
+  /**
+   * Minimum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  minWidth?: ColumnWidth;
+  /**
+   * Maximum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  maxWidth?: ColumnWidth;
+  /**
+   * Called when the column width changes.
+   */
+  onWidthChange?: (width: ColumnWidth) => void;
+  /**
+   * Forwarded styles
+   */
+  style?: React.CSSProperties;
+  /**
+   * Forwarded colSpan
+   */
+  colSpan?: number;
+};
+
+type TableColumnResizeArgs = ResizeProps & {};
+
+type TableColumnResizeResult =
+  | {
+      style?: React.CSSProperties;
+      resizeHandlerProps: {
+        onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
+        onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
+        onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
+        onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
+        onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
+      };
+      isResizingWithKeyboard: boolean;
+      enabled: true;
+    }
+  | {
+      style?: React.CSSProperties;
+      enabled: false;
+    };
+
+/**
+ * TODO:
+ * - Do we allow % widths?
+ * - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
+ * be able to set "1fr" or similar and have it fill remaining space.
+ */
+function useTableColumnResize(
+  args: TableColumnResizeArgs,
+): TableColumnResizeResult {
+  const {
+    ref,
+    width: userWidth,
+    defaultWidth,
+    onWidthChange,
+    maxWidth = Infinity,
+    minWidth = 40,
+    style,
+    colSpan,
+  } = args;
+
+  const tableContext = useDataTableContext();
+
+  const [width, _setWidth] = useControllableState({
+    value: userWidth,
+    defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
+    /**
+     * TODO:
+     * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
+     * Otherwise, this could cause excessive calls when resizing quickly.
+     */
+    onChange: onWidthChange,
+  });
+
+  const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
+  const [, setIsResizingWithMouse] = useState(false);
+
+  const setWidth = useCallback(
+    (newWidth: number) => {
+      const currentWidth = ref?.offsetWidth;
+      if (!currentWidth) {
+        return;
+      }
+
+      const min = parseWidth(minWidth) ?? 0;
+      const max = parseWidth(maxWidth) ?? Infinity;
+      const clamped = Math.min(Math.max(newWidth, min), max);
+
+      if (newWidth <= currentWidth && newWidth > max) {
+        _setWidth(newWidth);
+        return;
+      }
+
+      if (newWidth >= currentWidth && newWidth > max) {
+        _setWidth(currentWidth);
+        return;
+      }
+
+      _setWidth(clamped);
+    },
+    [minWidth, maxWidth, _setWidth, ref],
+  );
+
+  const handleKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"] =
+    useCallback(
+      (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          setIsResizingWithKeyboard((prev) => !prev);
+          return;
+        }
+
+        if (!isResizingWithKeyboard) {
+          return;
+        }
+
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+          event.preventDefault();
+
+          const th = (event.target as HTMLElement).closest(
+            "th",
+          ) as HTMLTableCellElement;
+          const startWidth = th.offsetWidth;
+
+          const delta = event.key === "ArrowRight" ? 20 : -20;
+          setWidth(startWidth + delta);
+        }
+      },
+      [isResizingWithKeyboard, setWidth],
+    );
+
+  const startResize = useCallback(
+    (th: HTMLTableCellElement, startX: number) => {
+      setIsResizingWithMouse(true);
+      const startWidth = th.offsetWidth;
+
+      function onPointerMove(clientX: number) {
+        setWidth(startWidth + (clientX - startX));
+      }
+
+      function onMouseMove(e: MouseEvent) {
+        onPointerMove(e.clientX);
+      }
+
+      function onTouchMove(e: TouchEvent) {
+        e.preventDefault();
+        onPointerMove(e.touches[0].clientX);
+      }
+
+      function cleanup() {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("mouseup", cleanup);
+        document.removeEventListener("touchend", cleanup);
+        document.removeEventListener("touchcancel", cleanup);
+        setIsResizingWithMouse(false);
+      }
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("mouseup", cleanup);
+      document.addEventListener("touchend", cleanup);
+      document.addEventListener("touchcancel", cleanup);
+    },
+    [setWidth],
+  );
+
+  const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.clientX);
+      },
+      [startResize],
+    );
+
+  const handleTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.touches[0].clientX);
+      },
+      [startResize],
+    );
+
+  /**
+   * TODO: Do we even want this?
+   * - + 32px padding is hardcoded now, fix this
+   * - Need to find widest element in column, not the header itself.
+   * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
+   */
+  const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+
+        const contentEl = th.getElementsByClassName(
+          "aksel-data-table__th-content",
+        )[0];
+        const range = document.createRange();
+        range.selectNodeContents(contentEl);
+        const contentWidth = range.getBoundingClientRect().width;
+
+        setWidth(contentWidth + 32);
+      },
+      [setWidth],
+    );
+
+  if (tableContext.layout !== "fixed") {
+    return {
+      style,
+      enabled: false,
+    };
+  }
+
+  return {
+    style: {
+      ...style,
+      width,
+    },
+    resizeHandlerProps: {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onKeyDown: handleKeyDown,
+      onBlur: () => setIsResizingWithKeyboard(false),
+      onDoubleClick: handleDoubleClick,
+    },
+    isResizingWithKeyboard,
+    enabled: true,
+  };
+}
+
+function parseWidth(width: ColumnWidth | undefined): number | undefined {
+  if (width == null) {
+    return undefined;
+  }
+  if (typeof width === "number") {
+    return width;
+  }
+  if (typeof width === "string") {
+    const parsed = parseInt(width, 10);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  return undefined;
+}
+
+export { useTableColumnResize };
+export type { ResizeProps };

package/src/data/table/thead/DataTableThead.context.ts

@@ -0,0 +1,10 @@
+import React, { createContext } from "react";
+
+const DataTableTheadContext = createContext<boolean>(false);
+
+function useDataTableThead(): boolean {
+  const context = React.useContext(DataTableTheadContext);
+  return context;
+}
+
+export { DataTableTheadContext, useDataTableThead };

package/src/data/table/thead/DataTableThead.tsx

@@ -1,16 +1,19 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { DataTableTheadContext } from "./DataTableThead.context";
 
 type DataTableTheadProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const DataTableThead = forwardRef<HTMLTableSectionElement, DataTableTheadProps>(
   ({ className, ...rest }, forwardedRef) => {
     return (
-      <thead
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__thead", className)}
-      />
+      <DataTableTheadContext.Provider value={true}>
+        <thead
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__thead", className)}
+        />
+      </DataTableTheadContext.Provider>
     );
   },
 );

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

@@ -8,9 +8,9 @@ type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
   ({ className, children, selected = false, ...rest }, forwardedRef) => {
-    const rootContext = useDataTableContext();
+    const { layout } = useDataTableContext();
 
-    const renderFillerCell = rootContext.layout === "fixed" && children;
+    const renderFillerCell = layout === "fixed" && children;
 
     return (
       <tr
@@ -23,7 +23,12 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         {children}
         {renderFillerCell && (
           /* TODO: Consider chaning between th and td based on context */
-          <div className="aksel-data-table__th aksel-data-table__filler-cell" />
+          /* using div causes illegal dom structure */
+          <td
+            aria-hidden
+            className="aksel-data-table__th aksel-data-table__filler-cell"
+            data-block-keyboard-nav
+          />
         )}
       </tr>
     );

package/src/data/token-filter/AutoSuggest.tsx

@@ -2,8 +2,6 @@ import React, { forwardRef, useState } from "react";
 import { Search } from "../../form/search";
 import { VStack } from "../../primitives/stack";
 import { Detail, Label } from "../../typography";
-import { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup";
-import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem";
 import Listbox from "../../utils/components/Listbox/root/ListboxRoot";
 import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
 import { Floating } from "../../utils/components/floating/Floating";
@@ -22,7 +20,8 @@ interface AutoSuggestProps {
 
 const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
   ({ options, onSelect, value, onChange, open, setOpen }, ref) => {
-    const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
+    const [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] =
+      useState("");
 
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
@@ -49,7 +48,7 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
 
     return (
       <Floating>
-        <Listbox setVirtuallyFocusedItemId={setVirtuallyFocusedItemId}>
+        <Listbox setVirtuallyFocusedOptionId={setVirtuallyFocusedOptionId}>
           <Floating.Anchor>
             <Listbox.InputSlot>
               <Search
@@ -76,8 +75,8 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
             <AutoSuggestPopup
               options={options}
               onSelect={handleSelectOption}
-              focusedValue={virtuallyFocusedItemId}
-              setFocusedValue={setVirtuallyFocusedItemId}
+              focusedValue={virtuallyFocusedOptionId}
+              setFocusedValue={setVirtuallyFocusedOptionId}
               onClose={handleClose}
               safeZoneAnchor={inputRef}
             />
@@ -124,11 +123,11 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
           className="aksel-property-filter__popup"
         >
           <div className="aksel-property-filter__popup-inner">
-            <Listbox.List setVirtuallyFocusedItemId={setFocusedValue}>
+            <Listbox.Options setVirtuallyFocusedOptionId={setFocusedValue}>
               {options.map((group) => (
-                <ListboxGroup key={group.label} label={group.label}>
+                <Listbox.Group key={group.label} label={group.label}>
                   {group.options.map((item) => (
-                    <ListboxItem
+                    <Listbox.Option
                       key={item.value}
                       id={item.value}
                       onClick={() => onSelect(item)}
@@ -147,11 +146,11 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
                           ))}
                         </div>
                       )} */}
-                    </ListboxItem>
+                    </Listbox.Option>
                   ))}
-                </ListboxGroup>
+                </Listbox.Group>
               ))}
-            </Listbox.List>
+            </Listbox.Options>
           </div>
         </Floating.Content>
       </DismissableLayer>

package/src/date/Date.Input.tsx

@@ -154,7 +154,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         />
         <button
           disabled={inputProps.disabled || readOnly}
-          tabIndex={readOnly ? -1 : context?.open ? -1 : 0}
+          tabIndex={readOnly ? -1 : undefined}
           onClick={() => {
             context?.onOpen();
             setAnchorRef?.(buttonRef.current);

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

@@ -90,12 +90,23 @@ interface UseDatepickerValue {
 }
 
 export type DateValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidDate: boolean;
+  /** Whether the date is a disabled date */
   isDisabled: boolean;
+  /** Whether the date falls on a weekend and `disableWeekends` is true */
   isWeekend: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a date (i.e. wrong format or non-existing date) */
   isInvalid: boolean;
-  isValidDate: boolean;
+  /** Whether the date is before `fromDate` */
   isBefore: boolean;
+  /** Whether the date is after `toDate` */
   isAfter: boolean;
 };
 

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

@@ -74,11 +74,21 @@ interface UseMonthPickerValue {
 }
 
 export type MonthValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidMonth: boolean;
+  /** Whether the month is a disabled month */
   isDisabled: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a month (i.e. wrong format) */
   isInvalid: boolean;
-  isValidMonth: boolean;
+  /** Whether the month is before `fromDate` */
   isBefore: boolean;
+  /** Whether the month is after `toDate` */
   isAfter: boolean;
 };
 

package/src/form/checkbox/CheckboxGroup.tsx

@@ -81,7 +81,7 @@ export const CheckboxGroup = forwardRef<
           "aksel-checkbox-group",
           `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{

package/src/form/fieldset/Fieldset.tsx

@@ -10,25 +10,45 @@ import { useFieldset } from "./useFieldset";
 export interface FieldsetProps
   extends FormFieldProps, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /**
-   * FormFields in Fieldset
+   * Form fields in Fieldset.
    */
   children: React.ReactNode;
   /**
-   * Fieldset legend
+   * Fieldset legend.
    */
   legend: React.ReactNode;
   /**
-   * If enabled shows the legend and description for screenreaders only
+   * If enabled, shows the legend and description for screen readers only.
    */
   hideLegend?: boolean;
   /**
-   * Toggles error propagation to child-elements
+   * Toggles error propagation to child-elements.
    * @default true
    */
   errorPropagation?: boolean;
-  nativeReadOnly?: boolean;
+  /**
+   * @private
+   */
+  _fieldsSupportNativeReadOnly?: boolean;
 }
 
+/**
+ * Component for grouping form fields.
+ *
+ * **NB: Only for special use cases.** Form fields should not be grouped by default,
+ * except for checkboxes and radio buttons, for which CheckboxGroup/RadioGroup should be used instead.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/fieldset)
+ * @see 🏷️ {@link FieldsetProps}
+ *
+ * @example
+ * ```jsx
+ * <Fieldset legend="Telefonnummer">
+ *   <TextField label="Landkode" />
+ *   <TextField label="Nummer" />
+ * </Fieldset>
+ * ```
+ */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
     const legendId = useId();
@@ -51,7 +71,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
-      nativeReadOnly = true,
+      _fieldsSupportNativeReadOnly = true,
       ...rest
     } = props;
 
@@ -93,7 +113,11 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             })}
           >
             {readOnly &&
-              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
+              (_fieldsSupportNativeReadOnly ? (
+                <ReadOnlyIcon />
+              ) : (
+                <ReadOnlyIconWithTitle />
+              ))}
             {legend}
           </Label>
           {!!description && (

package/src/form/radio/RadioGroup.tsx

@@ -84,7 +84,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
           "aksel-radio-group",
           `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{

package/src/index.ts

@@ -178,6 +178,7 @@ export {
   type InfoCardHeaderProps,
   type InfoCardTitleProps,
   type InfoCardContentProps,
+  type InfoCardMessageProps,
 } from "./alert/info-card";
 export {
   LocalAlert,

package/src/read-more/ReadMore.tsx

@@ -43,6 +43,16 @@ export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElem
    * @private
    */
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
+  /**
+   * Changes variant of ReadMore.
+   *
+   * `moderate` is a more visually prominent variant.
+   *
+   *
+   * `ghost` is more subtle, mainly for use in forms.
+   * @default "ghost"
+   */
+  variant?: "moderate" | "ghost";
 }
 
 /**
@@ -66,6 +76,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onClick,
       size = "medium",
       onOpenChange,
+      variant = "ghost",
       ...rest
     }: ReadMoreProps,
     ref,
@@ -80,13 +91,9 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cl(
-          "aksel-read-more",
-          `aksel-read-more--${size}`,
-          className,
-          { "aksel-read-more--open": _open },
-        )}
-        data-volume="low"
+        className={cl("aksel-read-more", `aksel-read-more--${size}`, className)}
+        data-variant={variant}
+        data-state={_open ? "open" : "closed"}
       >
         <button
           {...rest}
@@ -97,7 +104,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
-          data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
             className="aksel-read-more__expand-icon"
@@ -106,14 +112,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           <span>{header}</span>
         </button>
 
-        <BodyLong
-          as="div"
-          className={cl("aksel-read-more__content", {
-            "aksel-read-more__content--closed": !_open,
-          })}
-          size={typoSize}
-          data-state={_open ? "open" : "closed"}
-        >
+        <BodyLong as="div" className="aksel-read-more__content" size={typoSize}>
           {children}
         </BodyLong>
       </div>

package/src/types/index.ts

@@ -1 +1 @@
-export * from "./theme";
+export { AkselColor, CustomAkselColor } from "./theme";

package/src/utils/components/Listbox/input-slot/ListboxInputSlot.tsx

@@ -8,7 +8,7 @@ interface ListboxInputSlotProps {
 const ListboxInputSlot = ({ children }: ListboxInputSlotProps) => {
   return (
     <Slot
-      aria-activedescendant="aksel-listbox__item-active"
+      aria-activedescendant="aksel-listbox__option-active"
       // @ts-expect-error - You are meant to use an <input>, but Slot doesn't know that.
       autoComplete="off"
       role="combobox"