@navikt/ds-react 7.0.0 → 7.1.0

package/src/form/error-summary/ErrorSummary.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useId, useMergeRefs } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps
@@ -33,13 +33,13 @@ interface ErrorSummaryComponent
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Link to error.
+   * Error message with link to field.
    *
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    *
    * @example
    * ```jsx
-   * <ErrorSummary.Item href="#1">
+   * <ErrorSummary.Item href="#id-til-alderfelt">
    *   Felt må fylles ut med alder
    * </ErrorSummary.Item>
    * ```
@@ -48,7 +48,7 @@ interface ErrorSummaryComponent
 }
 
 /**
- * A component that displays a summary of errors.
+ * Summary of errors in a form.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
  * @see 🏷️ {@link ErrorSummaryProps}
@@ -77,15 +77,13 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     },
     ref,
   ) => {
-    const headingId = useId();
-
-    const sectionRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
 
-    const mergedRef = useMergeRefs(ref, sectionRef);
+    const mergedRef = useMergeRefs(ref, wrapperRef);
 
     return (
-      <section
+      <div
         ref={mergedRef}
         {...rest}
         className={cl(
@@ -94,11 +92,8 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           `navds-error-summary--${size}`,
         )}
         tabIndex={-1}
-        aria-live="polite"
-        aria-relevant="all"
-        aria-labelledby={headingId}
         onFocus={composeEventHandlers(rest.onFocus, (event) => {
-          if (event.target === sectionRef.current) {
+          if (event.target === wrapperRef.current) {
             headingRef?.current?.focus();
           }
         })}
@@ -107,7 +102,6 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           className="navds-error-summary__heading"
           as={headingTag}
           size="small"
-          id={headingId}
           ref={headingRef}
           tabIndex={-1}
         >
@@ -116,7 +110,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {children}
         </BodyShort>
-      </section>
+      </div>
     );
   },
 ) as ErrorSummaryComponent;

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -22,14 +22,17 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
-> = forwardRef(({ children = "Endre svar", className, ...rest }, ref) => (
-  <Link
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__edit", className)}
-  >
-    {children}
-  </Link>
-));
+> = forwardRef(
+  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+    <Link
+      ref={ref}
+      as={as}
+      {...rest}
+      className={cl("navds-form-summary__edit", className)}
+    >
+      {children}
+    </Link>
+  ),
+);
 
 export default FormSummaryEditLink;

package/src/layout/page/parts/PageBlock.tsx

@@ -63,7 +63,7 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
           {...rest}
           className={cl(
             "navds-pageblock",
-            `navds-pageblock--${width}`,
+            width && `navds-pageblock--${width}`,
             className,
             { "navds-pageblock--gutters": gutters },
           )}

package/src/layout/stack/HStack.tsx

@@ -26,8 +26,8 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * </HStack>
  */
 export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="row" />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return <Stack as={as} {...rest} ref={ref} direction="row" />;
   });
 
 export default HStack;

package/src/layout/stack/VStack.tsx

@@ -27,8 +27,10 @@ export type VStackProps = PrimitiveAsChildProps &
  * </VStack>
  */
 export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="column" wrap={false} />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return (
+      <Stack as={as} {...rest} ref={ref} direction="column" wrap={false} />
+    );
   });
 
 export default VStack;

package/src/pagination/Pagination.tsx

@@ -189,21 +189,13 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               size={size}
               icon={
                 <ChevronLeftIcon
-                  className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
                     : { title: "Forrige" })}
                 />
               }
             >
-              {prevNextTexts && (
-                <BodyShort
-                  size={size === "xsmall" ? "small" : size}
-                  className="navds-pagination__prev-text"
-                >
-                  Forrige
-                </BodyShort>
-              )}
+              {prevNextTexts && `Forrige`}
             </Item>
           </li>
           {getSteps({ page, count, siblingCount, boundaryCount }).map(
@@ -211,7 +203,10 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               const n = Number(step);
               return Number.isNaN(n) ? (
                 <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
-                  <BodyShort size={size === "xsmall" ? "small" : size}>
+                  <BodyShort
+                    size={size === "xsmall" ? "small" : size}
+                    as="span"
+                  >
                     ...
                   </BodyShort>
                 </li>
@@ -223,9 +218,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                     page={n}
                     size={size}
                   >
-                    <BodyShort size={size === "xsmall" ? "small" : size}>
-                      {n}
-                    </BodyShort>
+                    {n}
                   </Item>
                 </li>
               );
@@ -243,7 +236,6 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               size={size}
               icon={
                 <ChevronRightIcon
-                  className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
                     : { title: "Neste" })}
@@ -251,14 +243,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               }
               iconPosition="right"
             >
-              {prevNextTexts && (
-                <BodyShort
-                  size={size === "xsmall" ? "small" : size}
-                  className="navds-pagination__next-text"
-                >
-                  Neste
-                </BodyShort>
-              )}
+              {prevNextTexts && `Neste`}
             </Item>
           </li>
         </ul>

package/src/pagination/PaginationItem.tsx

@@ -11,9 +11,10 @@ export interface PaginationItemProps extends ButtonProps {
    */
   selected?: boolean;
   /**
-   * The page the item represents
+   * Currently only sets `data-page` attribute.
+   * @deprecated Use `data-page` instead if you need to access the items page number in the future.
    */
-  page: number;
+  page?: number;
   /**
    * Changes padding, height and font-size
    * @default "medium"
@@ -48,7 +49,7 @@ export const Item: PaginationItemType = forwardRef(
           "navds-pagination__item--selected": selected,
         })}
         data-page={page}
-        /* TODO: Breaking change to remove. Add to future major version. */
+        /* TODO: Breaking change to remove since it's in use by some applications. Add to future major version. */
         page={page}
         {...(Component === "button" && { type: "button" })}
         {...rest}

package/src/provider/i18n/LanguageProvider.tsx

@@ -34,13 +34,11 @@ export const useProvider = () => useContext(LanguageProviderContext);
 export const UNSAFE_AkselLanguageProvider = ({
   children,
   translations,
-  ...rest
 }: LanguageProviderProps) => {
   return (
     <LanguageProviderContext.Provider
       value={{
         translations: translations ?? nb,
-        ...rest,
       }}
     >
       {children}

package/src/util/create-context.tsx

@@ -40,8 +40,8 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
    * We use forwardRef to allow `ref` to be used as a regular context value
    * @see https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
    */
-  const Provider = forwardRef(
-    ({ children, ...context }: ProviderProps<T>, ref) => {
+  const Provider = forwardRef<unknown, ProviderProps<T>>(
+    ({ children, ...context }, ref) => {
       // Only re-memoize when prop values change
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const value = React.useMemo(() => context, Object.values(context)) as T;