@navikt/ds-react 7.40.0 → 8.0.0

package/src/copybutton/CopyButton.tsx

@@ -1,8 +1,9 @@
 import React, { ButtonHTMLAttributes, forwardRef, useState } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { Label } from "../typography";
+import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types/theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
 import { useTimeout } from "../util/hooks/useTimeout";
@@ -12,9 +13,18 @@ export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">,
     Pick<ButtonProps, "iconPosition" | "size"> {
   /**
-   * @default "neutral"
+   * @deprecated Use `data-color` attribute instead.
    */
   variant?: "action" | "neutral";
+  /**
+   * Overrides color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @default "neutral"
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
   /**
    * Text to copy to clipboard.
    */
@@ -36,7 +46,7 @@ export interface CopyButtonProps
    */
   onActiveChange?: (state: boolean) => void;
   /**
-   *  Icon shown when button is not clicked.
+   * Icon shown when button is not clicked.
    * @default <FilesIcon />
    */
   icon?: React.ReactNode;
@@ -75,7 +85,8 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       copyText,
       text,
       activeText,
-      variant = "neutral",
+      variant,
+      "data-color": dataColor = "neutral",
       onActiveChange,
       icon,
       activeIcon,
@@ -94,8 +105,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
 
     const { cn } = useRenameCSS();
 
-    const themeContext = useThemeInternal();
-
     const handleClick = () => {
       copy(copyText);
       setActive(true);
@@ -109,98 +118,52 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
 
     const activeString = activeText || translate("activeText");
 
-    const copyIcon = (
-      <LegacyIconWrapper useLegacy={!themeContext?.isDarkside}>
-        {active
-          ? (activeIcon ?? (
-              <CheckmarkIcon
-                aria-hidden={!!text}
-                title={text ? undefined : activeString}
-                className={
-                  themeContext?.isDarkside
-                    ? cn("navds-copybutton__icon")
-                    : undefined
-                }
-              />
-            ))
-          : (icon ?? (
-              <FilesIcon
-                aria-hidden={!!text}
-                title={text ? undefined : title || translate("title")}
-                className={
-                  themeContext?.isDarkside
-                    ? cn("navds-copybutton__icon")
-                    : undefined
-                }
-              />
-            ))}
-      </LegacyIconWrapper>
-    );
-
-    if (themeContext?.isDarkside) {
-      return (
-        <Button
-          ref={ref}
-          type="button"
-          className={cn("navds-copybutton", className)}
-          {...rest}
-          variant={variant === "action" ? "tertiary" : "tertiary-neutral"}
-          onClick={composeEventHandlers(onClick, handleClick)}
-          iconPosition={iconPosition}
-          icon={copyIcon}
-          data-active={active}
-          size={size}
-        >
-          {text ? (active ? activeString : text) : null}
-        </Button>
-      );
-    }
-
     return (
-      <button
+      <Button
         ref={ref}
         type="button"
+        className={cn("navds-copybutton", className)}
         {...rest}
-        className={cn(
-          "navds-copybutton",
-          className,
-          `navds-copybutton--${size}`,
-          `navds-copybutton--${variant}`,
-          {
-            "navds-copybutton--icon-only": !text,
-            "navds-copybutton--icon-right": iconPosition === "right",
-            "navds-copybutton--active": active,
-          },
-        )}
+        variant="tertiary"
+        data-color={variantToDataColor(variant) ?? dataColor}
         onClick={composeEventHandlers(onClick, handleClick)}
+        iconPosition={iconPosition}
+        icon={
+          active
+            ? (activeIcon ?? (
+                <CheckmarkIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : activeString}
+                  className={cn("navds-copybutton__icon")}
+                />
+              ))
+            : (icon ?? (
+                <FilesIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : title || translate("title")}
+                  className={cn("navds-copybutton__icon")}
+                />
+              ))
+        }
+        data-active={active}
+        size={size}
       >
-        <span className={cn("navds-copybutton__content")}>
-          {iconPosition === "left" && copyIcon}
-          {text && (
-            <Label as="span" size={size === "medium" ? "medium" : "small"}>
-              {active ? activeString : text}
-            </Label>
-          )}
-          {iconPosition === "right" && copyIcon}
-        </span>
-      </button>
+        {text ? (active ? activeString : text) : null}
+      </Button>
     );
   },
 );
 
-function LegacyIconWrapper({
-  children,
-  useLegacy,
-}: {
-  children: React.ReactNode;
-  useLegacy: boolean;
-}) {
-  const { cn } = useRenameCSS();
-
-  if (!useLegacy) {
-    return children;
+function variantToDataColor(
+  variant: CopyButtonProps["variant"],
+): Exclude<AkselColor, AkselStatusColorRole> | undefined {
+  if (variant === "action") {
+    return "accent";
+  }
+  if (variant === "neutral") {
+    return "neutral";
   }
-  return <span className={cn("navds-copybutton__icon")}>{children}</span>;
+  return undefined;
 }
 
 export default CopyButton;

package/src/date/Date.Dialog.tsx

@@ -61,7 +61,6 @@ const DateDialog = ({
   if (hideModal) {
     return (
       <Popover
-        arrow={false}
         anchorEl={anchor}
         open={open}
         onClose={onClose}

package/src/dropdown/Menu/index.tsx

@@ -76,7 +76,6 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         {...rest}
         placement={placement}
         ref={ref}
-        arrow={false}
         className={cn("navds-dropdown__menu", className)}
         offset={-4}
         anchorEl={anchorEl}

package/src/expansion-card/ExpansionCard.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { useControllableState } from "../util/hooks";
 import { OverridableComponent } from "../util/types";
 import ExpansionCardContent, {
@@ -68,6 +69,12 @@ interface ExpansionCardCommonProps
    * @default "medium"
    */
   size?: "medium" | "small";
+  /**
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 type ExpansionCardConditionalProps =
@@ -146,7 +153,6 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             className,
             `navds-expansioncard--${size}`,
             {
-              "navds-expansioncard--open": open ?? _open,
               "navds-expansioncard--no-animation": !shouldFade.current,
             },
           )}

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -31,9 +31,7 @@ const ExpansionCardHeader = forwardRef<
       className={cn("navds-expansioncard__header", className)}
       data-open={panelContext.open}
     >
-      <div className={cn("navds-expansioncard__header-content")}>
-        {children}
-      </div>
+      <div>{children}</div>
 
       <button
         className={cn("navds-expansioncard__header-button")}

package/src/form/checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -12,95 +12,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
-    const themeContext = useThemeInternal();
-
-    if (themeContext?.isDarkside) {
-      return (
-        <div
-          className={cn(
-            props.className,
-            "navds-checkbox",
-            `navds-checkbox--${size}`,
-            {
-              "navds-checkbox--error": hasError,
-              "navds-checkbox--disabled": inputProps.disabled,
-              "navds-checkbox--readonly": readOnly,
-            },
-          )}
-          data-color={hasError ? "danger" : props["data-color"]}
-        >
-          <div className={cn("navds-checkbox__input-wrapper")}>
-            <input
-              {...omit(props, [
-                "children",
-                "size",
-                "error",
-                "description",
-                "hideLabel",
-                "indeterminate",
-                "errorId",
-                "readOnly",
-              ])}
-              {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-              aria-describedby={
-                cl(inputProps["aria-describedby"], {
-                  [descriptionId]: props.description,
-                }) || undefined
-              }
-              type="checkbox"
-              className={cn("navds-checkbox__input")}
-              ref={(el) => {
-                if (el) {
-                  el.indeterminate = props.indeterminate ?? false;
-                }
-
-                if (typeof ref === "function") {
-                  ref(el);
-                } else if (ref != null) {
-                  ref.current = el;
-                }
-              }}
-            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-              fill="none"
-              focusable={false}
-              role="img"
-              aria-hidden
-              className={cn("navds-checkbox__icon")}
-            >
-              <path
-                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-          <BodyShort
-            as="label"
-            htmlFor={inputProps.id}
-            size={size}
-            className={cn("navds-checkbox__label", {
-              "navds-sr-only": props.hideLabel,
-            })}
-          >
-            {!nested && readOnly && <ReadOnlyIconWithTitle />}
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <BodyShort
-              id={descriptionId}
-              size={size}
-              className={cn(
-                "navds-form-field__subdescription navds-checkbox__description",
-              )}
-            >
-              {props.description}
-            </BodyShort>
-          )}
-        </div>
-      );
-    }
 
     return (
       <div
@@ -116,75 +27,75 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         )}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <input
-          {...omit(props, [
-            "children",
-            "size",
-            "error",
-            "description",
-            "hideLabel",
-            "indeterminate",
-            "errorId",
-            "readOnly",
-          ])}
-          {...omit(inputProps, ["aria-invalid"])}
-          type="checkbox"
-          className={cn("navds-checkbox__input")}
-          ref={(el) => {
-            if (el) {
-              el.indeterminate = props.indeterminate ?? false;
+        <div className={cn("navds-checkbox__input-wrapper")}>
+          <input
+            {...omit(props, [
+              "children",
+              "size",
+              "error",
+              "description",
+              "hideLabel",
+              "indeterminate",
+              "errorId",
+              "readOnly",
+            ])}
+            {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+            aria-describedby={
+              cl(inputProps["aria-describedby"], {
+                [descriptionId]: props.description,
+              }) || undefined
             }
+            type="checkbox"
+            className={cn("navds-checkbox__input")}
+            ref={(el) => {
+              if (el) {
+                el.indeterminate = props.indeterminate ?? false;
+              }
 
-            if (typeof ref === "function") {
-              ref(el);
-            } else if (ref != null) {
-              ref.current = el;
-            }
-          }}
-        />
-        <label htmlFor={inputProps.id} className={cn("navds-checkbox__label")}>
-          <span className={cn("navds-checkbox__icon")}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-              fill="none"
-              focusable={false}
-              role="img"
-              aria-hidden
-            >
-              <path
-                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span className={cn("navds-checkbox__icon-indeterminate")} />
-          <span
-            className={cn("navds-checkbox__content", {
-              "navds-sr-only": props.hideLabel,
-            })}
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref != null) {
+                ref.current = el;
+              }
+            }}
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 13 10"
+            fill="none"
+            focusable={false}
+            role="img"
+            aria-hidden
+            className={cn("navds-checkbox__icon")}
           >
-            <BodyShort
-              as="span"
-              size={size}
-              className={cn("navds-checkbox__label-text")}
-            >
-              {!nested && readOnly && <ReadOnlyIconWithTitle />}
-              {props.children}
-            </BodyShort>
-            {props.description && (
-              <BodyShort
-                as="span"
-                size={size}
-                className={cn(
-                  "navds-form-field__subdescription navds-checkbox__description",
-                )}
-              >
-                {props.description}
-              </BodyShort>
+            <path
+              d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <BodyShort
+          as="label"
+          htmlFor={inputProps.id}
+          size={size}
+          className={cn("navds-checkbox__label", {
+            "navds-sr-only": props.hideLabel,
+          })}
+        >
+          {!nested && readOnly && <ReadOnlyIconWithTitle />}
+          {props.children}
+        </BodyShort>
+        {props.description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className={cn(
+              "navds-form-field__subdescription navds-checkbox__description",
             )}
-          </span>
-        </label>
+          >
+            {props.description}
+          </BodyShort>
+        )}
       </div>
     );
   },

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { DismissableLayer } from "../../../overlays/dismissablelayer/DismissableLayer";
 import { Floating } from "../../../overlays/floating/Floating";
-import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useClientLayoutEffect } from "../../../util";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -15,7 +15,6 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const { cn } = useRenameCSS();
-  const themeContext = useThemeInternal();
   const {
     inputProps: { id },
     anchorRef,
@@ -55,8 +54,6 @@ const FilteredOptions = () => {
     (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
-  const height = themeContext?.isDarkside ? "316px" : "290px";
-
   return (
     <DismissableLayer
       asChild
@@ -84,8 +81,8 @@ const FilteredOptions = () => {
         enabled={isListOpen}
         style={{
           maxHeight: localOpen
-            ? `min(${height}, var(--ac-floating-available-height))`
-            : `${height}`,
+            ? `min(316px, var(--__axc-floating-available-height))`
+            : `316px`,
         }}
         autoUpdateWhileMounted={false}
       >

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -27,12 +27,7 @@ const Option = ({ option }: { option: ComboboxOption }) => {
 
   if (readOnly || inputProps.disabled) {
     return (
-      <Chips.Toggle
-        data-color="neutral"
-        variant="neutral"
-        checkmark={false}
-        as="div"
-      >
+      <Chips.Toggle data-color="neutral" checkmark={false} as="div">
         {option.label}
       </Chips.Toggle>
     );

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -35,6 +35,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
       translations,
       onClick,
       id: buttonId,
+      "data-color": color,
       ...rest
     } = props;
 
@@ -112,6 +113,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
             inputRef.current?.click(),
           )}
           data-disabled={inputProps.disabled}
+          data-color={color}
         >
           {!inputProps.disabled && (
             <>

package/src/form/file-upload/parts/item/Item.tsx

@@ -1,15 +1,13 @@
 import React, { MouseEvent, forwardRef } from "react";
-import { Spacer } from "../../../../layout/stack";
 import { useRenameCSS } from "../../../../theme/Theme";
-import { BodyShort, ErrorMessage } from "../../../../typography";
+import { BodyLong, BodyShort, ErrorMessage } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
 import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";
-import ItemButton from "./ItemButton";
-import ItemIcon from "./ItemIcon";
-import ItemName from "./ItemName";
+import { ItemActionField } from "./ItemActionField";
+import { ItemHeader } from "./ItemHeader";
 import { formatFileSize } from "./utils/format-file-size";
 
 export interface FileUploadItemProps
@@ -103,9 +101,6 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         return description ?? formatFileSize(file);
       }
 
-      const renderButton = status === "idle" && button;
-      const renderCustomButton = isCustomButton(button);
-
       return (
         <Component
           ref={ref}
@@ -115,13 +110,8 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
           })}
         >
           <div className={cn("navds-file-item__inner")}>
-            <ItemIcon
-              isLoading={status !== "idle"}
-              file={file}
-              showError={showError}
-            />
-            <div className={cn("navds-file-item__file-info")}>
-              <ItemName file={file} href={href} onClick={onFileClick} />
+            <BodyLong as="div" className={cn("navds-file-item__file-info")}>
+              <ItemHeader file={file} href={href} onClick={onFileClick} />
               <BodyShort as="div" size="small">
                 {getStatusText()}
               </BodyShort>
@@ -136,30 +126,16 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
                   </ErrorMessage>
                 )}
               </div>
-            </div>
-            {renderButton && <Spacer />}
-
-            {renderButton && !renderCustomButton && (
-              <ItemButton
-                {...button}
-                title={translate(
-                  button.action === "retry"
-                    ? "item.retryButtonTitle"
-                    : "item.deleteButtonTitle",
-                )}
-              />
-            )}
-            {renderButton && renderCustomButton && button}
+            </BodyLong>
+            <ItemActionField
+              isLoading={status !== "idle"}
+              button={button}
+              translate={translate}
+            />
           </div>
         </Component>
       );
     },
   );
 
-function isCustomButton(
-  button: FileUploadItemProps["button"],
-): button is React.ReactNode {
-  return React.isValidElement(button);
-}
-
 export default Item;