@navikt/ds-react 7.4.2 → 7.5.0

package/src/pagination/Pagination.tsx

@@ -9,6 +9,17 @@ import PaginationItem, {
   PaginationItemType,
 } from "./PaginationItem";
 
+interface RenderItemProps
+  extends Pick<
+    PaginationItemProps,
+    "className" | "disabled" | "selected" | "icon" | "iconPosition"
+  > {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  page: number;
+  size: Exclude<PaginationProps["size"], undefined>;
+}
+
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page.
@@ -46,9 +57,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   prevNextTexts?: boolean;
   /**
    * Override pagination item rendering.
-   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   * @default PaginationItem
    */
-  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
   /**
    * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
    */
@@ -111,7 +122,7 @@ export const getSteps = ({
  * ```jsx
  * <Pagination
  *   page={pageState}
- *   onPageChange={(x) => setPageState(x)}
+ *   onPageChange={setPageState}
  *   count={9}
  *   boundaryCount={1}
  *   siblingCount={1}
@@ -131,9 +142,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       prevNextTexts = false,
       srHeading,
       "aria-labelledby": ariaLabelledBy,
-      renderItem: Item = (item: PaginationItemProps) => (
-        <PaginationItem {...item} />
-      ),
+      renderItem: Item = PaginationItem,
       ...rest
     },
     ref,
@@ -218,6 +227,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               ) : (
                 <li key={step}>
                   <Item
+                    /* Remember to update RenderItemProps if you make changes to props sent into Item */
                     onClick={() => onPageChange?.(n)}
                     selected={page === n}
                     page={n}

package/src/provider/index.ts

@@ -1,2 +1,6 @@
 "use client";
 export { default as Provider, type ProviderProps } from "./Provider";
+export {
+  AkselTheme as UNSAFE_AkselTheme,
+  useAkselTheme as UNSAFE_useAkselTheme,
+} from "./theme/AkselTheme";

package/src/provider/theme/AkselTheme.tsx

@@ -0,0 +1,52 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { createContext } from "../../util/create-context";
+
+type AkselThemeContext = {
+  theme: "light" | "dark";
+};
+
+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;
+} & AkselThemeContext;
+
+const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
+  (props: AkselThemeProps, ref) => {
+    const context = useAkselTheme(false);
+
+    const {
+      children,
+      className,
+      theme = context?.theme ?? "light",
+      hasBackground: hasBackgroundProp = true,
+    } = props;
+
+    const isRoot = context === undefined;
+
+    const hasBackground =
+      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
+
+    return (
+      <ThemeProvider theme={theme}>
+        <div
+          ref={ref}
+          className={cl("navds-theme", className, theme)}
+          data-background={hasBackground}
+        >
+          {children}
+        </div>
+      </ThemeProvider>
+    );
+  },
+);
+
+export { AkselTheme, useAkselTheme };

package/src/util/i18n/locales/en.ts

@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Show more",
     showLess: "Show less",
+    readOnly: "Read-only",
   },
 
   FileUpload: {

package/src/util/i18n/locales/nb.ts

@@ -10,6 +10,7 @@ export default {
   global: {
     showMore: "Vis mer",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskyttet",
   },
 
   FileUpload: {

package/src/util/i18n/locales/nn.ts

@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Vis meir",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskytta",
   },
 
   FileUpload: {