@navikt/ds-react 7.8.1 → 7.9.0

package/src/theme/Theme.tsx

@@ -0,0 +1,60 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { Slot } from "../slot/Slot";
+import { createContext } from "../util/create-context";
+import { AsChildProps } from "../util/types";
+
+type ThemeContext = {
+  /**
+   * Color theme
+   * @default "light"
+   */
+  theme: "light" | "dark";
+};
+
+const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
+  hookName: "useTheme",
+  name: "ThemeProvider",
+  providerName: "ThemeProvider",
+});
+
+type ThemeProps = {
+  className?: string;
+  hasBackground?: boolean;
+} & ThemeContext &
+  AsChildProps;
+
+const Theme = forwardRef<HTMLDivElement, ThemeProps>(
+  (props: ThemeProps, ref) => {
+    const context = useThemeInternal(false);
+
+    const {
+      children,
+      className,
+      asChild = false,
+      theme = context?.theme ?? "light",
+      hasBackground: hasBackgroundProp = true,
+    } = props;
+
+    const isRoot = context === undefined;
+
+    const hasBackground =
+      hasBackgroundProp ?? (isRoot && props.theme !== undefined);
+
+    const SlotElement = asChild ? Slot : "div";
+
+    return (
+      <ThemeProvider theme={theme}>
+        <SlotElement
+          ref={ref}
+          className={cl("navds-theme", className, theme)}
+          data-background={hasBackground}
+        >
+          {children}
+        </SlotElement>
+      </ThemeProvider>
+    );
+  },
+);
+
+export { Theme, useThemeInternal };

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { Theme } from "./Theme";

package/src/timeline/Pin.tsx

@@ -15,7 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -48,7 +48,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
     const showArrow = !themeContext;
 
     const {

package/src/timeline/period/ClickablePeriod.tsx

@@ -15,7 +15,7 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useRef, useState } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -56,7 +56,7 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
     const showArrow = !themeContext;
 
     const {

package/src/toggle-group/parts/ToggleItem.tsx

@@ -76,6 +76,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
+        data-selected={itemCtx.isSelected}
         tabIndex={itemCtx.isFocused ? 0 : -1}
         onClick={itemCtx.onClick}
         onFocus={itemCtx.onFocus}

package/src/tooltip/Tooltip.tsx

@@ -15,8 +15,8 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
-import { UNSAFE_useAkselTheme } from "../provider";
 import { Slot } from "../slot/Slot";
+import { useThemeInternal } from "../theme/Theme";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -124,7 +124,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
     const showArrow = _arrow && !themeContext;
 
     const [_open, _setOpen] = useControllableState({

package/src/typography/ErrorMessage.tsx

@@ -16,6 +16,10 @@ export interface ErrorMessageProps
    * Error text.
    */
   children: React.ReactNode;
+  /**
+   * Render a triangular warning icon.
+   */
+  showIcon?: boolean;
 }
 
 /**
@@ -36,7 +40,18 @@ export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement
 > = forwardRef(
-  ({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
+  (
+    {
+      children,
+      className,
+      size,
+      spacing,
+      as: Component = "p",
+      showIcon = false,
+      ...rest
+    },
+    ref,
+  ) => (
     <Component
       {...rest}
       ref={ref}
@@ -49,9 +64,28 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
+          "navds-error-message--show-icon": showIcon,
         },
       )}
-    />
+    >
+      {showIcon && (
+        <svg
+          viewBox="0 0 17 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+      {children}
+    </Component>
   ),
 );
 

package/src/util/TextareaAutoSize.tsx

@@ -167,19 +167,23 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         });
       };
 
-      const handleResize = debounce(() => {
-        renders.current = 0;
-
-        if (inputRef.current?.style.height || inputRef.current?.style.width) {
-          // User has resized manually
-          if (inputRef.current?.style.overflow === "hidden") {
-            setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+      const handleResize = debounce(
+        () => {
+          renders.current = 0;
+
+          if (inputRef.current?.style.height || inputRef.current?.style.width) {
+            // User has resized manually
+            if (inputRef.current?.style.overflow === "hidden") {
+              setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+            }
+            return;
           }
-          return;
-        }
 
-        syncHeightWithFlushSync();
-      });
+          syncHeightWithFlushSync();
+        },
+        166,
+        true,
+      );
 
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);

package/src/util/debounce.ts

@@ -1,11 +1,19 @@
 "use client";
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
-export default function debounce(func, wait = 166) {
-  let timeout: ReturnType<typeof setTimeout>;
-  function debounced(this: any, ...args) {
+export default function debounce<T extends unknown[]>(
+  func: (...args: T) => void,
+  wait = 166,
+  leading = false,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  function debounced(this: any, ...args: T) {
     const later = () => {
+      timeout = undefined;
       func.apply(this, args);
     };
+    if (!timeout && leading) {
+      later();
+    }
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
   }

package/cjs/provider/theme/AkselTheme.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-type AkselThemeContext = {
-    /**
-     * Color theme
-     * @default "light"
-     */
-    theme?: "light" | "dark";
-    /**
-     * Brand volume
-     * @default "low"
-     * This is experimental and subject to changes
-     */
-    volume?: "high" | "low";
-};
-declare const useAkselTheme: <S extends boolean = true>(strict?: S) => S extends true ? AkselThemeContext : AkselThemeContext | undefined;
-declare const AkselTheme: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    className?: string;
-    hasBackground?: boolean;
-    asChild?: boolean;
-} & AkselThemeContext & React.RefAttributes<HTMLDivElement>>;
-export { AkselTheme, useAkselTheme };

package/cjs/provider/theme/AkselTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AkselTheme.js","sourceRoot":"","sources":["../../../src/provider/theme/AkselTheme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,8DAA0D;AAgB1D,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,IAAA,8BAAa,EAAoB;IACtE,YAAY,EAAE,sDAAsD;IACpE,QAAQ,EAAE,eAAe;IACzB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC;AA6CkB,sCAAa;AAnClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAC3B,CAAC,KAAsB,EAAE,GAAG,EAAE,EAAE;;IAC9B,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,MAAM,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,KAAK,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,8BAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM;QACzC,8BAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,iBACjB,MAAM,IAElB,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,gCAAU"}

package/esm/provider/theme/AkselTheme.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-type AkselThemeContext = {
-    /**
-     * Color theme
-     * @default "light"
-     */
-    theme?: "light" | "dark";
-    /**
-     * Brand volume
-     * @default "low"
-     * This is experimental and subject to changes
-     */
-    volume?: "high" | "low";
-};
-declare const useAkselTheme: <S extends boolean = true>(strict?: S) => S extends true ? AkselThemeContext : AkselThemeContext | undefined;
-declare const AkselTheme: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    className?: string;
-    hasBackground?: boolean;
-    asChild?: boolean;
-} & AkselThemeContext & React.RefAttributes<HTMLDivElement>>;
-export { AkselTheme, useAkselTheme };

package/esm/provider/theme/AkselTheme.js

@@ -1,22 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot.js";
-import { createContext } from "../../util/create-context.js";
-const [ThemeProvider, useAkselTheme] = createContext({
-    errorMessage: "useAkselTheme must be used within AkselThemeProvider",
-    hookName: "useAkselTheme",
-    name: "AkselThemeProvider",
-    providerName: "AkselThemeProvider",
-});
-const AkselTheme = forwardRef((props, ref) => {
-    var _a, _b;
-    const context = useAkselTheme(false);
-    const { children, className, asChild = false, theme = (_a = context === null || context === void 0 ? void 0 : context.theme) !== null && _a !== void 0 ? _a : "light", volume = (_b = context === null || context === void 0 ? void 0 : context.volume) !== null && _b !== void 0 ? _b : "low", hasBackground: hasBackgroundProp = true, } = props;
-    const isRoot = context === undefined;
-    const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot || props.theme !== undefined);
-    const SlotElement = asChild ? Slot : "div";
-    return (React.createElement(ThemeProvider, { theme: theme, volume: volume },
-        React.createElement(SlotElement, { ref: ref, className: cl("navds-theme", className, theme), "data-background": hasBackground, "data-volume": volume }, children)));
-});
-export { AkselTheme, useAkselTheme };
-//# sourceMappingURL=AkselTheme.js.map

package/esm/provider/theme/AkselTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AkselTheme.js","sourceRoot":"","sources":["../../../src/provider/theme/AkselTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAgB1D,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,aAAa,CAAoB;IACtE,YAAY,EAAE,sDAAsD;IACpE,QAAQ,EAAE,eAAe;IACzB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC;AAUH,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,KAAsB,EAAE,GAAG,EAAE,EAAE;;IAC9B,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,MAAM,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,KAAK,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM;QACzC,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,iBACjB,MAAM,IAElB,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/src/provider/theme/AkselTheme.tsx

@@ -1,70 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { createContext } from "../../util/create-context";
-
-type AkselThemeContext = {
-  /**
-   * Color theme
-   * @default "light"
-   */
-  theme?: "light" | "dark";
-  /**
-   * Brand volume
-   * @default "low"
-   * This is experimental and subject to changes
-   */
-  volume?: "high" | "low";
-};
-
-const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
-  errorMessage: "useAkselTheme must be used within AkselThemeProvider",
-  hookName: "useAkselTheme",
-  name: "AkselThemeProvider",
-  providerName: "AkselThemeProvider",
-});
-
-type AkselThemeProps = {
-  children: React.ReactNode;
-  className?: string;
-  hasBackground?: boolean;
-  /* TODO: Handle this correctly with types */
-  asChild?: boolean;
-} & AkselThemeContext;
-
-const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
-  (props: AkselThemeProps, ref) => {
-    const context = useAkselTheme(false);
-
-    const {
-      children,
-      className,
-      asChild = false,
-      theme = context?.theme ?? "light",
-      volume = context?.volume ?? "low",
-      hasBackground: hasBackgroundProp = true,
-    } = props;
-
-    const isRoot = context === undefined;
-
-    const hasBackground =
-      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
-
-    const SlotElement = asChild ? Slot : "div";
-
-    return (
-      <ThemeProvider theme={theme} volume={volume}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-          data-volume={volume}
-        >
-          {children}
-        </SlotElement>
-      </ThemeProvider>
-    );
-  },
-);
-
-export { AkselTheme, useAkselTheme };