@navikt/ds-react 0.18.1 → 0.18.3

package/src/form/search/Search.tsx

@@ -76,148 +76,150 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
   null
 );
 
-const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
-  const { inputProps, size = "medium", inputDescriptionId } = useSearch(
-    props,
-    "searchfield"
-  );
+export const Search = forwardRef<HTMLInputElement, SearchProps>(
+  (props, ref) => {
+    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
+      props,
+      "searchfield"
+    );
 
-  const {
-    className,
-    hideLabel = true,
-    label,
-    description,
-    value,
-    clearButtonLabel,
-    onClear,
-    clearButton = true,
-    children,
-    variant = "primary",
-    defaultValue,
-    onChange,
-    ...rest
-  } = props;
+    const {
+      className,
+      hideLabel = true,
+      label,
+      description,
+      value,
+      clearButtonLabel,
+      onClear,
+      clearButton = true,
+      children,
+      variant = "primary",
+      defaultValue,
+      onChange,
+      ...rest
+    } = props;
 
-  const searchRef = useRef<HTMLInputElement | null>(null);
-  const mergedRef = mergeRefs([searchRef, ref]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const searchRef = useRef<HTMLInputElement | null>(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
-  const handleChange = useCallback(
-    (v: string) => {
-      value === undefined && setInternalValue(v);
-      onChange?.(v);
-    },
-    [onChange, value]
-  );
-
-  const handleClear = useCallback(
-    (event: SearchClearEvent) => {
-      onClear?.(event);
-      handleChange("");
-      searchRef.current && searchRef.current?.focus?.();
-    },
-    [handleChange, onClear]
-  );
+    const handleChange = useCallback(
+      (v: string) => {
+        value === undefined && setInternalValue(v);
+        onChange?.(v);
+      },
+      [onChange, value]
+    );
 
-  useEventListener(
-    "keydown",
-    useCallback(
-      (e) => {
-        if (e.key === "Escape") {
-          e.preventDefault();
-          handleClear({ trigger: "Escape", event: e });
-        }
+    const handleClear = useCallback(
+      (event: SearchClearEvent) => {
+        onClear?.(event);
+        handleChange("");
+        searchRef.current && searchRef.current?.focus?.();
       },
-      [handleClear]
-    ),
-    wrapperRef
-  );
+      [handleChange, onClear]
+    );
 
-  return (
-    <div
-      ref={setWrapperRef}
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        "navds-search",
-        {
-          "navds-search--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    useEventListener(
+      "keydown",
+      useCallback(
+        (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear({ trigger: "Escape", event: e });
+          }
+        },
+        [handleClear]
+      ),
+      wrapperRef
+    );
+
+    return (
+      <div
+        ref={setWrapperRef}
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          "navds-search",
+          {
+            "navds-search--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-text-field__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-text-field__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-search__wrapper">
-        <div className="navds-search__wrapper-inner">
-          {variant === "simple" && (
-            <SearchIcon aria-hidden className="navds-search__search-icon" />
-          )}
-          <input
-            ref={mergedRef}
-            {...omit(rest, ["size"])}
-            {...inputProps}
-            value={value ?? internalValue}
-            onChange={(e) => handleChange(e.target.value)}
-            type="search"
-            role="searchbox"
-            className={cl(
-              className,
-              "navds-search__input",
-              `navds-search__input--${variant}`,
-              "navds-text-field__input",
-              "navds-body-short",
-              `navds-body-${size}`
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-text-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-search__wrapper">
+          <div className="navds-search__wrapper-inner">
+            {variant === "simple" && (
+              <SearchIcon aria-hidden className="navds-search__search-icon" />
+            )}
+            <input
+              ref={mergedRef}
+              {...omit(rest, ["size"])}
+              {...inputProps}
+              value={value ?? internalValue}
+              onChange={(e) => handleChange(e.target.value)}
+              type="search"
+              role="searchbox"
+              className={cl(
+                className,
+                "navds-search__input",
+                `navds-search__input--${variant}`,
+                "navds-text-field__input",
+                "navds-body-short",
+                `navds-body-${size}`
+              )}
+            />
+            {(value ?? internalValue) && clearButton && (
+              <button
+                type="button"
+                onClick={(e) => handleClear({ trigger: "Click", event: e })}
+                className="navds-search__button-clear"
+              >
+                <span className="navds-sr-only">
+                  {clearButtonLabel ? clearButtonLabel : "Tøm"}
+                </span>
+                <Close aria-hidden />
+              </button>
             )}
-          />
-          {(value ?? internalValue) && clearButton && (
-            <button
-              type="button"
-              onClick={(e) => handleClear({ trigger: "Click", event: e })}
-              className="navds-search__button-clear"
-            >
-              <span className="navds-sr-only">
-                {clearButtonLabel ? clearButtonLabel : "Tøm"}
-              </span>
-              <Close aria-hidden />
-            </button>
-          )}
+          </div>
+          <SearchContext.Provider
+            value={{
+              size,
+              disabled: inputProps.disabled,
+              variant,
+            }}
+          >
+            {children ? children : variant !== "simple" && <SearchButton />}
+          </SearchContext.Provider>
         </div>
-        <SearchContext.Provider
-          value={{
-            size,
-            disabled: inputProps.disabled,
-            variant,
-          }}
-        >
-          {children ? children : variant !== "simple" && <SearchButton />}
-        </SearchContext.Provider>
       </div>
-    </div>
-  );
-}) as SearchComponent;
+    );
+  }
+) as SearchComponent;
 
 Search.Button = SearchButton;
 

package/src/grid/Cell.tsx

@@ -25,7 +25,7 @@ export interface CellProps extends HTMLAttributes<HTMLDivElement> {
   lg?: Column;
 }
 
-const Cell = forwardRef<HTMLDivElement, CellProps>(
+export const Cell = forwardRef<HTMLDivElement, CellProps>(
   ({ children, xs, sm, md, lg, className, ...rest }, ref) => {
     return (
       <div

package/src/grid/ContentContainer.tsx

@@ -8,14 +8,15 @@ export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(
-  ({ className, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={cl("navds-content-container", className)}
-      {...rest}
-    />
-  )
-);
+export const ContentContainer = forwardRef<
+  HTMLDivElement,
+  ContentContainerProps
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cl("navds-content-container", className)}
+    {...rest}
+  />
+));
 
 export default ContentContainer;

package/src/grid/Grid.tsx

@@ -7,7 +7,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
 }
-const Grid = forwardRef<HTMLDivElement, GridProps>(
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
   ({ children, className, ...rest }, ref) => (
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>
       {children}

package/src/grid/index.ts

@@ -1,6 +1,6 @@
-export { default as Cell } from "./Cell";
-export * from "./Cell";
-export { default as Grid } from "./Grid";
-export * from "./Grid";
-export { default as ContentContainer } from "./ContentContainer";
-export * from "./ContentContainer";
+export { default as Cell, CellProps } from "./Cell";
+export { default as Grid, GridProps } from "./Grid";
+export {
+  default as ContentContainer,
+  ContentContainerProps,
+} from "./ContentContainer";

package/src/guide-panel/GuidePanel.tsx

@@ -18,7 +18,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   poster?: boolean;
 }
 
-const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
+export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   (
     { children, className, illustration, poster = false, color, ...rest },
     ref

package/src/guide-panel/index.ts

@@ -1,3 +1,2 @@
-export { default as GuidePanel } from "./GuidePanel";
-export * from "./GuidePanel";
+export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
 export { GuideProps } from "./Guide";

package/src/help-text/HelpText.tsx

@@ -13,7 +13,7 @@ export interface HelpTextProps
   children: React.ReactNode;
 }
 
-const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
+export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   (
     {
       className,

package/src/help-text/index.ts

@@ -1,2 +1,2 @@
 export { default as HelpText } from "./HelpText";
-export * from "./HelpText";
+export { HelpTextProps } from "./HelpText";

package/src/link/Link.tsx

@@ -10,7 +10,7 @@ export interface LinkProps
   children: React.ReactNode;
 }
 
-const Link: OverridableComponent<
+export const Link: OverridableComponent<
   LinkProps,
   HTMLAnchorElement
 > = forwardRef(({ as: Component = "a", className, ...rest }, ref) => (

package/src/link/index.ts

@@ -1,2 +1,2 @@
 export { default as Link } from "./Link";
-export * from "./Link";
+export { LinkProps } from "./Link";

package/src/link-panel/LinkPanel.tsx

@@ -26,7 +26,7 @@ interface LinkPanelComponentType
   Description: LinkPanelDescriptionType;
 }
 
-const LinkPanelComponent: OverridableComponent<
+export const LinkPanelComponent: OverridableComponent<
   LinkPanelProps,
   HTMLAnchorElement
 > = forwardRef(

package/src/link-panel/index.ts

@@ -1,2 +1,2 @@
 export { default as LinkPanel } from "./LinkPanel";
-export * from "./LinkPanel";
+export { LinkPanelProps } from "./LinkPanel";

package/src/loader/Loader.tsx

@@ -25,7 +25,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   variant?: "neutral" | "interaction" | "inverted";
 }
 
-const Loader = forwardRef<SVGSVGElement, LoaderProps>(
+export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
   (
     {
       children,

package/src/loader/index.ts

@@ -1,2 +1,2 @@
 export { default as Loader } from "./Loader";
-export * from "./Loader";
+export { LoaderProps } from "./Loader";

package/src/menu/Menu.tsx

@@ -17,7 +17,7 @@ interface MenuComponent
   Item: MenuItemType;
 }
 
-const Menu = forwardRef<HTMLElement, MenuProps>(
+export const Menu = forwardRef<HTMLElement, MenuProps>(
   ({ children, className, ...rest }, ref) => (
     <nav
       {...rest}

package/src/menu/MenuCollapse.tsx

@@ -35,7 +35,7 @@ export type MenuCollapseType = React.ForwardRefExoticComponent<
   MenuCollapseProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const Collapse: MenuCollapseType = forwardRef(
+export const Collapse: MenuCollapseType = forwardRef(
   ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
     const context = useContext(NestingContext);

package/src/menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export type MenuItemType = OverridableComponent<
   HTMLAnchorElement
 >;
 
-const Item: MenuItemType = forwardRef(
+export const Item: MenuItemType = forwardRef(
   (
     { children, as: Component = "a", active = false, className, ...rest },
     ref

package/src/modal/Modal.tsx

@@ -59,7 +59,7 @@ type ModalLifecycle = {
   setAppElement?: (element: any) => void;
 };
 
-const Modal = forwardRef<ReactModal, ModalProps>(
+export const Modal = forwardRef<ReactModal, ModalProps>(
   (
     {
       children,

package/src/modal/index.ts

@@ -1,3 +1,2 @@
-export { default as Modal } from "./Modal";
+export { default as Modal, ModalProps } from "./Modal";
 export { ModalContentProps } from "./ModalContent";
-export * from "./Modal";

package/src/page-header/index.ts

@@ -1,2 +1,2 @@
 export { default as PageHeader } from "./PageHeader";
-export * from "./PageHeader";
+export { PageHeaderProps } from "./PageHeader";

package/src/pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import cl from "classnames";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
 
-interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page
    */
@@ -71,7 +71,7 @@ export const getSteps = ({
   ];
 };
 
-const Pagination = forwardRef<HTMLElement, PaginationProps>(
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
   (
     {
       page,

package/src/pagination/index.ts

@@ -1,2 +1,2 @@
 export { default as Pagination } from "./Pagination";
-export * from "./Pagination";
+export { PaginationProps } from "./Pagination";

package/src/panel/Panel.tsx

@@ -16,7 +16,7 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
-const Panel: PanelType = forwardRef(
+export const Panel: PanelType = forwardRef(
   (
     { children, className, border = false, as: Component = "div", ...rest },
     ref

package/src/panel/index.ts

@@ -1,2 +1,2 @@
 export { default as Panel } from "./Panel";
-export * from "./Panel";
+export { PanelProps } from "./Panel";

package/src/popover/Popover.tsx

@@ -67,7 +67,7 @@ interface PopoverComponent
   Content: PopoverContentType;
 }
 
-const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
       className,

package/src/popover/index.ts

@@ -1,3 +1,2 @@
-export { default as Popover } from "./Popover";
-export * from "./Popover";
+export { default as Popover, PopoverProps } from "./Popover";
 export { PopoverContentProps } from "./PopoverContent";

package/src/read-more/ReadMore.tsx

@@ -31,7 +31,7 @@ export interface ReadMoreProps
   renderContentWhenClosed?: boolean;
 }
 
-const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
+export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
   (
     {
       className,

package/src/read-more/index.ts

@@ -1,2 +1 @@
-export { default as ReadMore } from "./ReadMore";
-export * from "./ReadMore";
+export { default as ReadMore, ReadMoreProps } from "./ReadMore";

package/src/speech-bubble/SpeechBubble.tsx

@@ -37,7 +37,7 @@ interface SpeechBubbleComponent
   Bubble: BubbleType;
 }
 
-const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
+export const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
   (
     {
       children,

package/src/speech-bubble/index.ts

@@ -1,2 +1 @@
-export { default as SpeechBubble } from "./SpeechBubble";
-export * from "./SpeechBubble";
+export { default as SpeechBubble, SpeechBubbleProps } from "./SpeechBubble";

package/src/step-indicator/Step.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
-import { StepContext } from ".";
+import { StepContext } from "./StepIndicator";
 import { BodyShort, Label, OverridableComponent } from "..";
 
 export interface StepIndicatorStepProps
@@ -22,7 +22,7 @@ export interface StepIndicatorStepProps
 export interface StepIndicatorStepType
   extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {}
 
-const StepComponent: OverridableComponent<
+export const StepIndicatorStepComponent: OverridableComponent<
   StepIndicatorStepProps,
   HTMLButtonElement
 > = forwardRef(
@@ -74,6 +74,6 @@ const StepComponent: OverridableComponent<
   }
 );
 
-const Step = StepComponent as StepIndicatorStepType;
+const Step = StepIndicatorStepComponent as StepIndicatorStepType;
 
 export default Step;

package/src/step-indicator/StepIndicator.tsx

@@ -8,7 +8,10 @@ import React, {
   useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import Step, { StepIndicatorStepProps, StepIndicatorStepType } from "./Step";
+import StepIndicatorStep, {
+  StepIndicatorStepProps,
+  StepIndicatorStepType,
+} from "./Step";
 
 export interface StepIndicatorProps
   extends React.HTMLAttributes<HTMLOListElement> {
@@ -55,7 +58,7 @@ interface StepContextProps {
 
 export const StepContext = createContext<StepContextProps | null>(null);
 
-const StepIndicator: StepIndicatorComponent = forwardRef<
+export const StepIndicator: StepIndicatorComponent = forwardRef<
   HTMLOListElement,
   StepIndicatorProps
 >(
@@ -140,6 +143,6 @@ const StepIndicator: StepIndicatorComponent = forwardRef<
   }
 ) as StepIndicatorComponent;
 
-StepIndicator.Step = Step;
+StepIndicator.Step = StepIndicatorStep;
 
 export default StepIndicator;

package/src/step-indicator/index.ts

@@ -1,2 +1 @@
-export { default as StepIndicator } from "./StepIndicator";
-export * from "./StepIndicator";
+export { default as StepIndicator, StepIndicatorProps } from "./StepIndicator";

package/src/stepper/Step.tsx

@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
-import { StepperContext } from ".";
+import { StepperContext } from "./Stepper";
 import { Label, OverridableComponent } from "..";
 
 export interface StepperStepProps
@@ -18,7 +18,7 @@ export interface StepperStepProps
 export interface StepperStepType
   extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
 
-const StepComponent: OverridableComponent<
+export const StepComponent: OverridableComponent<
   StepperStepProps,
   HTMLAnchorElement
 > = forwardRef(

package/src/stepper/Stepper.tsx

@@ -36,7 +36,10 @@ interface StepperContextProps {
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
 
-const Stepper: StepperComponent = forwardRef<HTMLOListElement, StepperProps>(
+export const Stepper: StepperComponent = forwardRef<
+  HTMLOListElement,
+  StepperProps
+>(
   (
     { children, className, activeStep, onStepChange = () => {}, ...rest },
     ref