@navikt/ds-react 6.5.0 → 6.6.1

package/src/collapsible/parts/Collapsible.Content.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleContentProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "hidden" | "aria-controls" | "id"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  CollapsibleContentProps
+>(({ children, asChild, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      {...rest}
+      data-state={ctx.state}
+      hidden={!ctx.open}
+      aria-controls={ctx.open ? ctx.triggerId : undefined}
+      id={ctx.contentId}
+    >
+      {ctx.lazy || ctx.open ? children : null}
+    </Comp>
+  );
+});
+
+export default CollapsibleContent;

package/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleTriggerProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "id" | "aria-controls" | "aria-expanded"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleTrigger = forwardRef<
+  HTMLButtonElement,
+  CollapsibleTriggerProps
+>(({ children, asChild, onClick, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type="button"
+      data-state={ctx.state}
+      onClick={composeEventHandlers(onClick, ctx.onOpenToggle)}
+      {...rest}
+      id={ctx.triggerId}
+      aria-controls={ctx.open ? ctx.contentId : undefined}
+      aria-expanded={ctx.open}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+export default CollapsibleTrigger;

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -97,9 +97,17 @@ export const FilteredOptionsProvider = ({
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
             ? toComboboxOption(value)
             : undefined,
+          ...customOptions.reduce(
+            (acc, customOption) => ({
+              ...acc,
+              [filteredOptionsUtils.getOptionId(id, customOption.label)]:
+                customOption,
+            }),
+            {},
+          ),
         },
       ),
-    [allowNewValues, id, options, value],
+    [allowNewValues, customOptions, id, options, value],
   );
 
   useClientLayoutEffect(() => {

package/src/form/combobox/Input/Input.tsx

@@ -128,6 +128,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               removeSelectedOption(lastSelectedOption);
             }
           }
+        } else if (e.key === "Enter" || e.key === "Accept") {
+          if (activeDecendantId || value) {
+            e.preventDefault();
+          }
         } else if (e.key === "ArrowDown") {
           // Check that cursor position is at the end of the input field,
           // so we don't interfere with text editing
@@ -182,6 +186,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         {...omit(inputProps, ["aria-invalid"])}
         ref={ref}
         value={value}
+        onBlur={() => virtualFocus.moveFocusToTop()}
         onChange={onChangeHandler}
         type="text"
         role="combobox"

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

@@ -0,0 +1,106 @@
+import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
+import FormSummaryAnswer from "./FormSummaryAnswer";
+import FormSummaryAnswers from "./FormSummaryAnswers";
+import FormSummaryEditLink from "./FormSummaryEditLink";
+import FormSummaryHeader from "./FormSummaryHeader";
+import FormSummaryHeading from "./FormSummaryHeading";
+import FormSummaryLabel from "./FormSummaryLabel";
+import FormSummaryValue from "./FormSummaryValue";
+
+interface FormSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    FormSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   */
+  Header: typeof FormSummaryHeader;
+  /**
+   * Typographic Heading to use in the `FormSummary.Header` component.
+   */
+  Heading: typeof FormSummaryHeading;
+  /**
+   * Link to edit the answers to use in the `FormSummary.Header` component. Should link to the relevant part of the form.
+   */
+  EditLink: typeof FormSummaryEditLink;
+  /**
+   * Wrapper component for the answers.
+   */
+  Answers: typeof FormSummaryAnswers;
+  /**
+   * Wrapper component for each answer. To be used in the `FormSummary.Answers` component.
+   */
+  Answer: typeof FormSummaryAnswer;
+  /**
+   * Corresponds to the question in the form. To be used in the `FormSummary.Answer` component.
+   */
+  Label: typeof FormSummaryLabel;
+  /**
+   * Corresponds to the answer in the form. To be used in the `FormSummary.Answer` component.
+   */
+  Value: typeof FormSummaryValue;
+}
+
+export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Must include:
+   *
+   *  - `<FormSummary.Header>`
+   *  - `<FormSummary.Answers>`
+   *
+   * @example
+   * <FormSummary>
+   *   <FormSummary.Header>
+   *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
+   *     <FormSummary.EditLink href="#" />
+   *   </FormSummary.Header>
+   *   <FormSummary.Answers>
+   *     <FormSummary.Answer>
+   *       <FormSummary.Label>Navn</FormSummary.Label>
+   *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
+   *     </FormSummary.Answer>
+   *   </FormSummary.Answers>
+   * </FormSummary>
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * A summary of a previously answered form.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formsummary)
+ *
+ * @example
+ * <FormSummary>
+ *   <FormSummary.Header>
+ *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
+ *     <FormSummary.EditLink href="#" />
+ *   </FormSummary.Header>
+ *   <FormSummary.Answers>
+ *     <FormSummary.Answer>
+ *       <FormSummary.Label>Navn</FormSummary.Label>
+ *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
+ *     </FormSummary.Answer>
+ *   </FormSummary.Answers>
+ * </FormSummary>
+ */
+export const FormSummary = forwardRef<HTMLDivElement, FormSummaryProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div ref={ref} {...rest} className={cl("navds-form-summary", className)}>
+        {children}
+      </div>
+    );
+  },
+) as FormSummaryComponent;
+
+FormSummary.Header = FormSummaryHeader;
+FormSummary.Heading = FormSummaryHeading;
+FormSummary.EditLink = FormSummaryEditLink;
+FormSummary.Answers = FormSummaryAnswers;
+FormSummary.Answer = FormSummaryAnswer;
+FormSummary.Label = FormSummaryLabel;
+FormSummary.Value = FormSummaryValue;
+
+export default FormSummary;

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

@@ -0,0 +1,27 @@
+import cl from "clsx";
+import React from "react";
+
+export interface FormSummaryAnswerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Must include:
+   * - `<FormSummary.Label>`
+   * - `<FormSummary.Value>`
+   */
+  children: React.ReactNode;
+}
+
+export const FormSummaryAnswer = React.forwardRef<
+  HTMLDivElement,
+  FormSummaryAnswerProps
+>(({ children, className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    {...rest}
+    className={cl("navds-form-summary__answer", className)}
+  >
+    {children}
+  </div>
+));
+
+export default FormSummaryAnswer;

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

@@ -0,0 +1,25 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+
+export interface FormSummaryAnswersProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  /**
+   * Must include one or more of `<FormSummary.Answer>`.
+   */
+  children: React.ReactNode;
+}
+
+export const FormSummaryAnswers = forwardRef<
+  HTMLDListElement,
+  FormSummaryAnswersProps
+>(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => (
+  <dl
+    ref={ref}
+    {...rest}
+    className={cl("navds-form-summary__answers", className)}
+  >
+    {children}
+  </dl>
+));
+
+export default FormSummaryAnswers;

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

@@ -0,0 +1,35 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { Link } from "../../link";
+import { OverridableComponent } from "../../util/types";
+
+// export type FormSummaryEditProps = Partial<LinkProps>;
+export interface FormSummaryEditProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * URL to the relevant part of the form, where the answers can be edited.
+   */
+  href?: string;
+  /**
+   * Link text.
+   *
+   * [How to write good links](https://aksel.nav.no/god-praksis/artikler/lenker).
+   * @default "Endre svar"
+   */
+  children?: React.ReactNode;
+}
+
+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>
+));
+
+export default FormSummaryEditLink;

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

@@ -0,0 +1,25 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+
+export interface FormSummaryHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   */
+  children: React.ReactNode;
+}
+
+export const FormSummaryHeader = forwardRef<
+  HTMLDivElement,
+  FormSummaryHeaderProps
+>(({ children, className, ...rest }, ref) => (
+  <header
+    ref={ref}
+    {...rest}
+    className={cl("navds-form-summary__header", className)}
+  >
+    {children}
+  </header>
+));
+
+export default FormSummaryHeader;

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

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import { Heading, HeadingProps } from "../../typography";
+
+export interface FormSummaryHeadingProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Heading text.
+   */
+  children: React.ReactNode;
+  /**
+   * The heading level.
+   */
+  level: Exclude<HeadingProps["level"], "1">;
+}
+
+export const FormSummaryHeading = forwardRef<
+  HTMLHeadingElement,
+  FormSummaryHeadingProps
+>((props: FormSummaryHeadingProps, ref) => (
+  <Heading ref={ref} {...props} size="medium" />
+));
+
+export default FormSummaryHeading;

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

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import { Label } from "../../typography";
+
+export interface FormSummaryLabelProps
+  extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+export const FormSummaryLabel = forwardRef<HTMLElement, FormSummaryLabelProps>(
+  ({ children, ...rest }, ref) => (
+    <Label ref={ref} {...rest} as="dt">
+      {children}
+    </Label>
+  ),
+);
+
+export default FormSummaryLabel;

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

@@ -0,0 +1,24 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyLong } from "../../typography";
+
+export interface FormSummaryValueProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const FormSummaryValue = forwardRef<
+  HTMLDivElement,
+  FormSummaryValueProps
+>(({ children, className, ...rest }, ref) => (
+  <BodyLong
+    ref={ref}
+    {...rest}
+    as="dd"
+    className={cl("navds-form-summary__value", className)}
+  >
+    {children}
+  </BodyLong>
+));
+
+export default FormSummaryValue;

package/src/form/form-summary/index.ts

@@ -0,0 +1,30 @@
+"use client";
+export { default as FormSummary, type FormSummaryProps } from "./FormSummary";
+export {
+  default as FormSummaryAnswer,
+  type FormSummaryAnswerProps,
+} from "./FormSummaryAnswer";
+export {
+  default as FormSummaryAnswers,
+  type FormSummaryAnswersProps,
+} from "./FormSummaryAnswers";
+export {
+  default as FormSummaryEditLink,
+  type FormSummaryEditProps,
+} from "./FormSummaryEditLink";
+export {
+  default as FormSummaryHeader,
+  type FormSummaryHeaderProps,
+} from "./FormSummaryHeader";
+export {
+  default as FormSummaryHeading,
+  type FormSummaryHeadingProps,
+} from "./FormSummaryHeading";
+export {
+  default as FormSummaryLabel,
+  type FormSummaryLabelProps,
+} from "./FormSummaryLabel";
+export {
+  default as FormSummaryValue,
+  type FormSummaryValueProps,
+} from "./FormSummaryValue";

package/src/index.ts

@@ -26,8 +26,8 @@ export { Dropdown, type DropdownProps } from "./dropdown";
 export { ExpansionCard, type ExpansionCardProps } from "./expansion-card";
 export {
   GuidePanel,
-  type GuidePanelProps,
   GuidePanelDefaultIllustration,
+  type GuidePanelProps,
 } from "./guide-panel";
 export { HelpText, type HelpTextProps } from "./help-text";
 export {
@@ -125,6 +125,21 @@ export {
 } from "./form/confirmation-panel";
 export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
 export { Fieldset, type FieldsetProps } from "./form/fieldset";
+export {
+  UNSAFE_FileUpload,
+  type FileAccepted,
+  type FileItem,
+  type FileMetadata,
+  type FileObject,
+  type FileRejected,
+  type FileRejectedPartitioned,
+  type FileRejectionReason,
+  type FileUploadDropzoneProps,
+  type FileUploadItemProps,
+  type FileUploadTriggerProps,
+  type FilesPartitioned,
+} from "./form/file-upload";
+export { FormSummary, type FormSummaryProps } from "./form/form-summary";
 export {
   Radio,
   RadioGroup,
@@ -136,20 +151,6 @@ export { Select, type SelectProps } from "./form/select";
 export { Switch, type SwitchProps } from "./form/switch";
 export { Textarea, type TextareaProps } from "./form/textarea";
 export { TextField, type TextFieldProps } from "./form/textfield";
-export {
-  UNSAFE_FileUpload,
-  type FileUploadDropzoneProps,
-  type FileUploadTriggerProps,
-  type FileObject,
-  type FileRejected,
-  type FileAccepted,
-  type FileRejectedPartitioned,
-  type FilesPartitioned,
-  type FileRejectionReason,
-  type FileUploadItemProps,
-  type FileItem,
-  type FileMetadata,
-} from "./form/file-upload";
 
 /**
  * @deprecated

package/src/layout/stack/Spacer.tsx

@@ -12,6 +12,6 @@ import React from "react";
  *  <MyComponent />
  * </HStack>
  */
-export const Spacer = () => <div className="navds-stack__spacer" />;
+export const Spacer = () => <span className="navds-stack__spacer" />;
 
 export default Spacer;

package/src/util/hooks/descendants/descendant.ts

@@ -143,7 +143,21 @@ export class DescendantsManager<
   };
 
   private registerNode = (node: T | null, options?: DescendantOptions<K>) => {
-    if (!node || this.descendants.has(node)) return;
+    if (!node) return;
+
+    /**
+     * While the node is registered, we have to make sure to sync options
+     * This is useful when ex. a node is disabled after it has been registered
+     */
+    const mapNode = this.descendants.get(node);
+    if (mapNode) {
+      this.descendants.set(node, {
+        index: mapNode.index,
+        node,
+        ...options,
+      } as Descendant<T, K>);
+      return;
+    }
 
     const keys = Array.from(this.descendants.keys()).concat(node);
     const sorted = sortNodes(keys);

package/src/util/hooks/descendants/useDescendant.tsx

@@ -17,11 +17,6 @@ function useDescendants<
   K extends Record<string, any> = object,
 >() {
   const descendants = useRef(new DescendantsManager<T, K>()).current;
-  useClientLayoutEffect(() => {
-    return () => {
-      descendants.destroy();
-    };
-  });
 
   return descendants;
 }