@navikt/ds-react 0.17.27 → 0.18.2

package/src/form/error-summary/ErrorSummary.tsx

@@ -31,7 +31,7 @@ interface ErrorSummaryComponent
   Item: ErrorSummaryItemType;
 }
 
-const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
       children,

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -15,7 +15,7 @@ export type ErrorSummaryItemType = OverridableComponent<
   HTMLAnchorElement
 >;
 
-const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
+export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

package/src/form/error-summary/index.ts

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

package/src/form/index.ts

@@ -1,22 +1,18 @@
 export {
   Checkbox,
-  CheckboxProps,
   CheckboxGroup,
   CheckboxGroupProps,
+  CheckboxProps,
 } from "./checkbox";
 export {
-  default as Fieldset,
-  FieldsetContext,
-  FieldsetProps,
-} from "./Fieldset";
+  ConfirmationPanelProps,
+  default as ConfirmationPanel,
+} from "./ConfirmationPanel";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
+export { Fieldset, FieldsetContext, FieldsetProps } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { Search, SearchProps, SearchClearEvent } from "./search";
+export { Search, SearchClearEvent, SearchProps } from "./search";
 export { default as Select, SelectProps } from "./Select";
 export { default as Switch, SwitchProps } from "./Switch";
-export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
-export {
-  default as ConfirmationPanel,
-  ConfirmationPanelProps,
-} from "./ConfirmationPanel";

package/src/form/radio/Radio.tsx

@@ -17,7 +17,7 @@ export interface RadioProps
   value: any;
 }
 
-const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError } = useRadio(props);
 
   const Description = size === "medium" ? BodyShort : Detail;

package/src/form/radio/RadioGroup.tsx

@@ -46,7 +46,7 @@ export interface RadioGroupProps
   required?: boolean;
 }
 
-const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
   (
     {
       children,

package/src/form/search/Search.tsx

@@ -38,10 +38,6 @@ export interface SearchProps
    * Callback for value-change in input
    */
   onChange?: (value: string) => void;
-  /**
-   * Callback for <Search.Button/> click or onSubmit in form
-   */
-  onSearch?: (value: string | number | readonly string[]) => void;
   /**
    * Callback for click on clear-button or Escape keydown
    */
@@ -74,157 +70,156 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant: "primary" | "secondary" | "simple";
-  onSearch: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
   null
 );
 
-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,
-    onSearch,
-    variant = "primary",
-    defaultValue,
-    onChange,
-    ...rest
-  } = props;
+export const Search = forwardRef<HTMLInputElement, SearchProps>(
+  (props, ref) => {
+    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
+      props,
+      "searchfield"
+    );
 
-  const searchRef = useRef<HTMLInputElement | null>(null);
-  const mergedRef = mergeRefs([searchRef, ref]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const {
+      className,
+      hideLabel = true,
+      label,
+      description,
+      value,
+      clearButtonLabel,
+      onClear,
+      clearButton = true,
+      children,
+      variant = "primary",
+      defaultValue,
+      onChange,
+      ...rest
+    } = props;
 
-  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const searchRef = useRef<HTMLInputElement | null>(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const handleChange = useCallback(
-    (v: string) => {
-      value === undefined && setInternalValue(v);
-      onChange?.(v);
-    },
-    [onChange, value]
-  );
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
-  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]
+    );
+
+    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
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    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" />
             )}
-          />
-          {(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>
-          )}
+            <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>
+            )}
+          </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,
-            onSearch: () => onSearch?.(value ?? internalValue),
-          }}
-        >
-          {children ? children : variant !== "simple" && <SearchButton />}
-        </SearchContext.Provider>
       </div>
-    </div>
-  );
-}) as SearchComponent;
+    );
+  }
+) as SearchComponent;
 
 Search.Button = SearchButton;
 

package/src/form/search/SearchButton.tsx

@@ -17,7 +17,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 >;
 
 const SearchButton: SearchButtonType = forwardRef(
-  ({ className, children, disabled, onClick, ...rest }, ref) => {
+  ({ className, children, disabled, ...rest }, ref) => {
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant, onSearch } = context;
+    const { size, variant } = context;
 
     return (
       <Button
@@ -36,10 +36,6 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
-        onClick={(e) => {
-          onSearch?.();
-          onClick?.(e);
-        }}
       >
         <Search aria-hidden />
         {children ? children : <span className="navds-sr-only">Søk</span>}

package/src/form/search/search.stories.tsx

@@ -33,7 +33,6 @@ export const Default = (props) => {
       <Search
         value={props.controlled ? state : undefined}
         onChange={props.controlled ? setState : null}
-        onSearch={(v) => console.log({ onSearch: v })}
         label="Søk"
         size={props.size}
         clearButton={props.clearButton}

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,