Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.4
 - @navikt/ds-react-internal@0.6.4

.storybook/stories/migration.stories.mdx

@@ -2,7 +2,33 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Migration" />
 
-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
 
 Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
 For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.

@navikt/core/css/index.css

@@ -7,7 +7,6 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.10.7",
+  "version": "0.11.4",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -38,7 +38,6 @@
     "@navikt/ds-icons": "^0.5.6",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.14.3",

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,7 +1,6 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
 import { Collapse, UnmountClosed } from "react-collapse";
-import { useClientLayoutEffect, useId } from "../util";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -20,13 +19,6 @@ const AccordionContent: AccordionContentType = forwardRef(
   ({ children, className, id, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
-    const newId = useId(id);
-    const setContentId = context && context.setContentId;
-
-    useClientLayoutEffect(() => {
-      setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
-    }, [setContentId, newId]);
-
     if (context === null) {
       console.error(
         "<Accordion.Content> has to be used within an <Accordion.Item>"
@@ -39,13 +31,7 @@ const AccordionContent: AccordionContentType = forwardRef(
       : UnmountClosed;
 
     return (
-      <div
-        ref={ref}
-        id={context.contentId}
-        role="region"
-        aria-labelledby={context.buttonId}
-        {...rest}
-      >
+      <div ref={ref} role="region" aria-labelledby={context.buttonId} {...rest}>
         <CollapseComponent isOpened={context.open}>
           <div className={cl("navds-accordion__content", className)}>
             {children}

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -52,7 +52,6 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
           "navds-heading--small"
         )}
         onClick={handleClick}
-        aria-controls={context.contentId}
         {...rest}
       >
         {children}

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -32,9 +32,7 @@ export interface AccordionItemContextProps {
   open: boolean;
   toggleOpen: () => void;
   setButtonId: (id: string) => void;
-  setContentId: (id: string) => void;
   buttonId: string;
-  contentId: string;
   renderContentWhenClosed: boolean;
 }
 
@@ -58,7 +56,6 @@ const AccordionItem: AccordionItemType = forwardRef(
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const [buttonId, setButtonId] = useState("");
-    const [contentId, setContentId] = useState("");
 
     return (
       <div
@@ -79,8 +76,6 @@ const AccordionItem: AccordionItemType = forwardRef(
             renderContentWhenClosed,
             setButtonId,
             buttonId,
-            setContentId,
-            contentId,
           }}
         >
           {children}

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -4,6 +4,8 @@ import userEvent from "@testing-library/user-event";
 import faker from "faker";
 import { Checkbox, CheckboxGroup } from ".";
 
+const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
+
 test("checkbox group chains onChange calls", () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();
@@ -26,4 +28,61 @@ test("checkbox group chains onChange calls", () => {
   expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true);
 });
 
-const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
+describe("Checkbox handles controlled-state correctly", () => {
+  const CheckboxComponent = ({
+    onChange = () => null,
+    value,
+  }) => (
+    <CheckboxGroup legend="legend" onChange={onChange} value={value}>
+      <Checkbox value={"value1"}>label1</Checkbox>
+      <Checkbox value={"value2"}>label2</Checkbox>
+    </CheckboxGroup>
+  );
+
+  test("Checkbox is still checked after click when controlled", () => {
+    render(<CheckboxComponent value={["value1", "value2"]} />);
+    userEvent.click(screen.getByLabelText("label1"));
+    userEvent.click(screen.getByLabelText("label2"));
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      true
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      true
+    );
+  });
+
+  test("onChange called with expected values", () => {
+    const onGroupChange = jest.fn();
+
+    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+
+    userEvent.click(screen.getByLabelText("label1"));
+
+    expect(onGroupChange).lastCalledWith(["value2"]);
+
+    userEvent.click(screen.getByLabelText("label2"));
+
+    expect(onGroupChange).lastCalledWith(["value1"]);
+  });
+
+  test("Checkboxes updates after value-prop change", () => {
+    const { rerender } = render(<CheckboxComponent value={[]} />);
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      false
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      false
+    );
+
+    rerender(<CheckboxComponent value={["value1", "value2"]} />);
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      true
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      true
+    );
+  });
+});

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext, useState } from "react";
 import cl from "classnames";
 import { Fieldset, FieldsetProps, FieldsetContext } from "..";
 
 export interface CheckboxGroupState {
-  readonly defaultValue: readonly string[];
+  readonly defaultValue?: readonly string[];
   readonly value?: readonly string[];
   toggleValue(value: string): void;
 }
@@ -33,20 +33,23 @@ export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
 
 const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
   (
-    {
-      value,
-      defaultValue = [],
-      onChange = () => {},
-      children,
-      className,
-      ...rest
-    },
+    { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref
   ) => {
-    const state = value ?? [];
-
     const fieldset = useContext(FieldsetContext);
 
+    const [state, setState] = useState<string[]>([]);
+
+    const handleChange = (v: string) => {
+      const newValue = value ? value : state;
+      const newState = newValue.includes(v)
+        ? newValue.filter((x) => x !== v)
+        : [...newValue, v];
+
+      value === undefined && setState(newState);
+      onChange(newState);
+    };
+
     return (
       <Fieldset
         {...rest}
@@ -61,12 +64,7 @@ const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
           value={{
             value,
             defaultValue,
-            toggleValue: (value: string) =>
-              onChange(
-                state.includes(value)
-                  ? state.filter((v) => v !== value)
-                  : [...state, value]
-              ),
+            toggleValue: (value: string) => handleChange(value),
           }}
         >
           <div className="navds-checkboxes">{children}</div>

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -32,7 +32,7 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
       checked: checkboxGroup?.value
         ? checkboxGroup.value.includes(props.value as string)
         : props.checked,
-      defaultChecked: checkboxGroup
+      defaultChecked: checkboxGroup?.defaultValue
         ? checkboxGroup.defaultValue.includes(props.value as string)
         : props.defaultChecked,
       onChange: (e) => {

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 import { Heading, BodyShort } from "../..";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -23,6 +24,13 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
 }
 
+interface ErrorSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: ErrorSummaryItemType;
+}
+
 const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
@@ -62,6 +70,8 @@ const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       </div>
     );
   }
-);
+) as ErrorSummaryComponent;
+
+ErrorSummary.Item = ErrorSummaryItem;
 
 export default ErrorSummary;

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -10,11 +10,12 @@ export interface ErrorSummaryItemProps
   children: React.ReactNode;
 }
 
-export type ErrorType = OverridableComponent<
+export type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
-const ErrorSummaryItem: ErrorType = forwardRef(
+
+const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

@navikt/core/react/src/form/error-summary/index.ts

@@ -1,5 +1,2 @@
-export { default as ErrorSummary, ErrorSummaryProps } from "./ErrorSummary";
-export {
-  default as ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./ErrorSummaryItem";
+export { default as ErrorSummary } from "./ErrorSummary";
+export * from "./ErrorSummary";

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.mdx

@@ -1,27 +1,27 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { ErrorSummary, ErrorSummaryItem } from "../index";
+import { ErrorSummary } from "../index";
 
 <Meta title="ds-react/form/errorsummary/intro" />
 
 # Hvordan ta i bruk ErrorSummary
 
-`href` på `ErrorSummaryItem` linker til id som er satt på skjema-elementer.
+`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.
 
 ```jsx
 <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
   <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>
 
@@ -34,11 +34,11 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
   heading="Eiusmod est cillum mollit pariatur deserunt"
   headingTag="h3"
 >
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
@@ -46,9 +46,9 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
     heading="Eiusmod est cillum mollit pariatur deserunt"
     headingTag="h3"
   >
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react/types-6-0";
-import { ErrorSummary, ErrorSummaryItem } from "..";
+import { ErrorSummary } from "..";
 export default {
   title: "ds-react/form/errorsummary",
   component: ErrorSummary,
@@ -11,17 +11,17 @@ export const All = () => {
     <>
       <h1>Error summary</h1>
       <ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
       <h2>size small</h2>
       <ErrorSummary size="small" heading="Feiloppsummering komponent">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
     </>
   );

@navikt/core/react/src/form/index.ts

@@ -10,21 +10,9 @@ export {
   FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export {
-  SearchField,
-  SearchFieldProps,
-  SearchFieldInput,
-  SearchFieldInputProps,
-  SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./search-field";
+export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
-export {
-  ErrorSummary,
-  ErrorSummaryProps,
-  ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./error-summary";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
 export {

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -3,6 +3,11 @@ import React, { forwardRef } from "react";
 import { BodyShort, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps, useFormField } from "../useFormField";
+import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
+import SearchFieldClearButton, {
+  SearchFieldClearButtonType,
+} from "./SearchFieldClearButton";
+import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
 
 export interface SearchFieldContextProps {
   inputProps: {
@@ -35,6 +40,15 @@ export interface SearchFieldProps
   label: React.ReactNode;
 }
 
+interface SearchFieldComponent
+  extends React.ForwardRefExoticComponent<
+    SearchFieldProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchFieldButtonType;
+  Clear: SearchFieldClearButtonType;
+  Input: SearchFieldInputType;
+}
+
 const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
   (props, ref) => {
     const {
@@ -105,6 +119,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
       </div>
     );
   }
-);
+) as SearchFieldComponent;
+
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;
 
 export default SearchField;

@navikt/core/react/src/form/search-field/SearchFieldButton.tsx

@@ -16,7 +16,11 @@ export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
+export type SearchFieldButtonType = React.ForwardRefExoticComponent<
+  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldButton: SearchFieldButtonType = forwardRef(
   ({ className, variant = "primary", disabled, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/SearchFieldClearButton.tsx

@@ -16,29 +16,34 @@ export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldClearButton = forwardRef<
-  HTMLButtonElement,
-  SearchFieldClearButtonProps
->(({ className, variant = "secondary", disabled, ...rest }, ref) => {
-  const searchField = useContext(SearchFieldContext);
+export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
+  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
 
-  if (searchField === null) {
-    console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
-    return null;
+const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
+  ({ className, variant = "secondary", disabled, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn(
+        "SearchFieldClearButton has to be wrapped in <SearchField />"
+      );
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-search-field__clear-button")}
+        size={size}
+        variant={variant}
+        disabled={disabled ?? inputProps?.disabled}
+      />
+    );
   }
-
-  const { size, inputProps } = searchField;
-
-  return (
-    <Button
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-search-field__clear-button")}
-      size={size}
-      variant={variant}
-      disabled={disabled ?? inputProps?.disabled}
-    />
-  );
-});
+);
 
 export default SearchFieldClearButton;

@navikt/core/react/src/form/search-field/SearchFieldInput.tsx

@@ -5,7 +5,11 @@ import { SearchFieldContext } from "./SearchField";
 export interface SearchFieldInputProps
   extends InputHTMLAttributes<HTMLInputElement> {}
 
-const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
+export type SearchFieldInputType = React.ForwardRefExoticComponent<
+  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const SearchFieldInput: SearchFieldInputType = forwardRef(
   ({ className, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/index.ts

@@ -1,13 +1,2 @@
 export { default as SearchField, SearchFieldProps } from "./SearchField";
-export {
-  default as SearchFieldInput,
-  SearchFieldInputProps,
-} from "./SearchFieldInput";
-export {
-  default as SearchFieldButton,
-  SearchFieldButtonProps,
-} from "./SearchFieldButton";
-export {
-  default as SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./SearchFieldClearButton";
+export * from "./SearchField";

@navikt/core/react/src/form/search-field/stories/search-field-example.tsx

@@ -1,30 +1,25 @@
 import React, { useState } from "react";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
   const [value, setValue] = useState("");
 
   return (
     <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
-      <SearchFieldInput
+      <SearchField.Input
         value={value}
         onChange={(e) => setValue(e.target.value)}
       />
       {!!value && (
-        <SearchFieldClearButton onClick={() => setValue("")}>
+        <SearchField.Clear onClick={() => setValue("")}>
           <Close />
           Tøm
-        </SearchFieldClearButton>
+        </SearchField.Clear>
       )}
-      <SearchFieldButton>
+      <SearchField.Button>
         <Search /> Søk
-      </SearchFieldButton>
+      </SearchField.Button>
     </SearchField>
   );
 };

@navikt/core/react/src/form/search-field/stories/search-field.stories.mdx

@@ -1,10 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 import { Example } from "./search-field-example.tsx";
 
@@ -22,10 +17,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -34,10 +29,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -52,10 +47,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   description="Ea cupidatat eu sunt commodo"
   hideLabel
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -65,10 +60,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     description="Ea cupidatat eu sunt commodo"
     hideLabel
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -81,10 +76,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   size="small"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -95,10 +90,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     size="small"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -111,10 +106,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   error="Error message"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -125,31 +120,31 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     error="Error message"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
 ## ClearButton
 
-Man kan bruke `SearchFieldClearButton` for å håndtere clearing av value i `<input />`. For å bruke denne
-kreves det da at `SearchFieldInput` er controlled slik at man styrer state selv slik som eksemplet under.
+Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
+kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
 Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
 den når inputvalue ikke er empty.
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
+  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
   {!!value && (
-    <SearchFieldClearButton onClick={() => setValue("")}>
+    <SearchField.Clear onClick={() => setValue("")}>
       <Close /> Tøm
-    </SearchFieldClearButton>
+    </SearchField.Clear>
   )}
-  <SearchFieldButton>
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from "react";
 import { Meta } from "@storybook/react/types-6-0";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 import { Fieldset } from "../..";
 export default {
   title: "ds-react/form/search-field",
@@ -22,19 +17,19 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h1>SearchField w clearsearch</h1>
@@ -42,25 +37,25 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close />
-        </SearchFieldClearButton>
-        <SearchFieldButton onClick={() => setShow(!show)}>
+        </SearchField.Clear>
+        <SearchField.Button onClick={() => setShow(!show)}>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <h2>Hidelabel</h2>
@@ -69,10 +64,10 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         hideLabel
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField small</h2>
@@ -81,11 +76,11 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -93,25 +88,25 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -119,14 +114,14 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldButton>
+        </SearchField.Clear>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
 
       <h2>SearchField w error</h2>
@@ -135,20 +130,20 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField in Fieldset</h2>
@@ -159,20 +154,20 @@ export const All = () => {
           error="Errormsg"
           hideLabel
         >
-          <SearchFieldInput />
-          <SearchFieldButton>
+          <SearchField.Input />
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
+          </SearchField.Button>
         </SearchField>
         <SearchField
           label="Mollit eiusmod"
           description="Ea cupidatat eu sunt commodo"
           hideLabel
         >
-          <SearchFieldButton>
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
-          <SearchFieldInput />
+          </SearchField.Button>
+          <SearchField.Input />
         </SearchField>
       </Fieldset>
     </>

@navikt/core/react/src/help-text/HelpText.tsx

@@ -3,7 +3,7 @@ import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover, useId } from "..";
+import { Popover } from "..";
 
 export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -29,7 +29,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const wrapperRef = useRef<HTMLDivElement | null>(null);
 
     const [open, setOpen] = useState(false);
-    const popoverId = `popover-${useId()}`;
 
     useEffect(() => {
       open && popoverRef.current?.focus();
@@ -51,7 +50,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          aria-controls={popoverId}
           aria-haspopup="dialog"
           title={title}
         >
@@ -65,7 +63,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           open={open}
           role="tooltip"
           anchorEl={buttonRef.current}
-          id={popoverId}
           placement={placement}
         >
           <Popover.Content>{children}</Popover.Content>

@navikt/core/react/src/index.ts

@@ -2,7 +2,6 @@ export * from "./accordion";
 export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
-export * from "./copy-to-clipboard";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";

@navikt/core/react/src/loader/Loader.tsx

@@ -39,11 +39,11 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref
   ) => {
-    const internalId = useId(id);
+    const internalId = useId();
 
     return (
       <svg
-        aria-labelledby={internalId}
+        aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
         className={cl(
           "navds-loader",

@navikt/core/react/src/popover/Popover.tsx

@@ -150,7 +150,6 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         className={cl("navds-popover", className, {
           "navds-popover--hidden": !open || !anchorEl,
         })}
-        aria-live="polite"
         aria-hidden={!open || !anchorEl}
         tabIndex={-1}
         {...attributes.popper}

@navikt/internal/css/copy-to-clipboard.css

@@ -1,3 +1,3 @@
-.navds-copy-to-clipboard__popover {
+.navdsi-copy-to-clipboard__popover {
   padding: var(--navds-spacing-1);
 }

@navikt/internal/css/index.css

@@ -1,3 +1,4 @@
+@import "copy-to-clipboard.css";
 @import "divider.css";
 @import "dropdown.css";
 @import "header.css";

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.5.5",
+  "version": "0.6.4",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,8 +34,11 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.5.6",
-    "@navikt/ds-react": "^0.10.7",
-    "classnames": "^2.3.1"
+    "@navikt/ds-react": "^0.11.4",
+    "@popperjs/core": "^2.10.1",
+    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
+    "react-merge-refs": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "^3.0.2"

@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -1,10 +1,10 @@
 import { Copy } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import copy from "copy-to-clipboard";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Button, ButtonProps, Popover } from "..";
+import { BodyShort, Button, ButtonProps, Popover } from "@navikt/ds-react";
+import { Placement } from "@popperjs/core";
 
 export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   /**
@@ -66,7 +66,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           ref={mergedRef}
           variant="secondary"
           title={title}
-          className={cl("navds-copy-to-clipboard", className)}
+          className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
           {...rest}
@@ -76,7 +76,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
             role="img"
             aria-label="Fil ikon for kopiering"
           />
-          {children ? children : <span className="sr-only">{title}</span>}
+          {children ? children : <span className="navds-sr-only">{title}</span>}
         </Button>
         <Popover
           role="alert"
@@ -85,7 +85,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClose={() => setOpenPopover(false)}
           placement={popoverPlacement}
           arrow={false}
-          className="navds-copy-to-clipboard__popover"
+          className="navdsi-copy-to-clipboard__popover"
         >
           <BodyShort size={size} as="span">
             {popoverText}

@navikt/internal/react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { CopyToClipboard } from "../index";
 
 export default {
-  title: "@ds-react/copy-to-clipboard",
+  title: "ds-react-internal/copy-to-clipboard",
   component: CopyToClipboard,
 };
 

@navikt/internal/react/src/copy-to-clipboard/stories/copy.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { CopyToClipboard } from "../../index";
 import { Success } from "@navikt/ds-react";
 
-<Meta title="ds-react/copy-to-clipboard/intro" />
+<Meta title="ds-react-internal/copy-to-clipboard/intro" />
 
 # Hvordan ta i bruk CopyToClipboard
 

@navikt/internal/react/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./copy-to-clipboard";
 export * from "./divider";
 export * from "./dropdown";
 export * from "./header";