@navikt/ds-react 0.17.27 → 0.18.2

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/read-more/read-more.stories.tsx

@@ -17,7 +17,7 @@ export const All = () => {
       <ReadMore
         open={open}
         onClick={() => setOpen(!open)}
-        header="ReadMore header text"
+        header="ReadMore header text ReadMore header text ReadMore header text ReadMore header text ReadMore header text"
       >
         Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
         officia laboris voluptate officia pariatur.Lorem est ex anim velit

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

package/src/stepper/index.ts

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

package/src/table/Body.tsx

@@ -1,14 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface BodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 export interface BodyType
   extends React.ForwardRefExoticComponent<
     BodyProps & React.RefAttributes<HTMLTableSectionElement>
   > {}
 
-const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
+export const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
   <tbody {...rest} ref={ref} className={cl("navds-table__body", className)} />
 ));
 

package/src/table/ColumnHeader.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useContext } from "react";
 import { Down, Up, UpDown } from "@navikt/ds-icons";
-import { TableContext } from "..";
+import { TableContext } from "./Table";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 
-interface ColumnHeaderProps extends HeaderCellProps {
+export interface ColumnHeaderProps extends HeaderCellProps {
   /**
    * Key to sort by
    */
@@ -20,7 +20,7 @@ export interface ColumnHeaderType
     ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const ColumnHeader: ColumnHeaderType = forwardRef(
+export const ColumnHeader: ColumnHeaderType = forwardRef(
   ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
     const context = useContext(TableContext);
 

package/src/table/DataCell.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { BodyShort } from "..";
-import { TableContext } from ".";
+import { TableContext } from "./Table";
 
-interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+export interface DataCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
    * Content alignment
    * @default "left"
@@ -16,7 +17,7 @@ export interface DataCellType
     DataCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const DataCell: DataCellType = forwardRef(
+export const DataCell: DataCellType = forwardRef(
   ({ className, children = "", align, ...rest }, ref) => {
     const context = useContext(TableContext);
 

package/src/table/ExpandableRow.tsx

@@ -6,7 +6,7 @@ import { UnmountClosed } from "react-collapse";
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { useId } from "..";
 
-interface ExpandableRowProps extends RowProps {
+export interface ExpandableRowProps extends RowProps {
   /**
    * Content of the expanded row
    */
@@ -30,6 +30,11 @@ interface ExpandableRowProps extends RowProps {
    * Change handler for open
    */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Disable expansion
+   * @default false
+   */
+  expansionDisabled?: boolean;
 }
 
 export interface ExpandableRowType
@@ -37,7 +42,7 @@ export interface ExpandableRowType
     ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const ExpandableRow: ExpandableRowType = forwardRef(
+export const ExpandableRow: ExpandableRowType = forwardRef(
   (
     {
       className,
@@ -47,6 +52,7 @@ const ExpandableRow: ExpandableRowType = forwardRef(
       defaultOpen = false,
       open,
       onOpenChange,
+      expansionDisabled = false,
       ...rest
     },
     ref
@@ -71,26 +77,28 @@ const ExpandableRow: ExpandableRowType = forwardRef(
               "navds-table__toggle-expand-cell--open": isOpen,
             })}
           >
-            <button
-              className="navds-table__toggle-expand-button"
-              aria-controls={id}
-              aria-expanded={isOpen}
-              onClick={() => {
-                onOpenChange?.(!isOpen);
-                if (open === undefined) {
-                  setInternalOpen((open) => !open);
-                }
-              }}
-            >
-              <Expand
-                className="navds-table__expandable-icon"
-                title={isOpen ? "Vis mindre" : "Vis mer"}
-              />
-              <ExpandFilled
-                className="navds-table__expandable-icon navds-table__expandable-icon--filled"
-                title={isOpen ? "Vis mindre" : "Vis mer"}
-              />
-            </button>
+            {!expansionDisabled && (
+              <button
+                className="navds-table__toggle-expand-button"
+                aria-controls={id}
+                aria-expanded={isOpen}
+                onClick={() => {
+                  onOpenChange?.(!isOpen);
+                  if (open === undefined) {
+                    setInternalOpen((open) => !open);
+                  }
+                }}
+              >
+                <Expand
+                  className="navds-table__expandable-icon"
+                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                />
+                <ExpandFilled
+                  className="navds-table__expandable-icon navds-table__expandable-icon--filled"
+                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                />
+              </button>
+            )}
           </DataCell>
           {togglePlacement === "left" && children}
         </Row>

package/src/table/Header.tsx

@@ -1,14 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface HeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 export interface HeaderType
   extends React.ForwardRefExoticComponent<
     HeaderProps & React.RefAttributes<HTMLTableSectionElement>
   > {}
 
-const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
+export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
   <thead {...rest} ref={ref} className={cl("navds-table__header", className)} />
 ));
 

package/src/table/HeaderCell.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
-import { Label, TableContext } from "..";
+import { Label } from "..";
+import { TableContext } from "./Table";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
@@ -17,7 +18,7 @@ export interface HeaderCellType
     HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const HeaderCell: HeaderCellType = forwardRef(
+export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, ...rest }, ref) => {
     const context = useContext(TableContext);
 

package/src/table/Row.tsx

@@ -14,7 +14,7 @@ export interface RowType
     RowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const Row: RowType = forwardRef(
+export const Row: RowType = forwardRef(
   ({ className, selected = false, ...rest }, ref) => (
     <tr
       {...rest}

package/src/table/Table.tsx

@@ -56,7 +56,7 @@ export interface TableContextProps {
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
-const Table = forwardRef(
+export const Table = forwardRef(
   (
     {
       className,

package/src/table/index.ts

@@ -1,2 +1,8 @@
-export { default as Table } from "./Table";
-export * from "./Table";
+export { BodyProps } from "./Body";
+export { ColumnHeaderProps } from "./ColumnHeader";
+export { DataCellProps } from "./DataCell";
+export { ExpandableRowProps } from "./ExpandableRow";
+export { HeaderProps } from "./Header";
+export { HeaderCellProps } from "./HeaderCell";
+export { RowProps } from "./Row";
+export { default as Table, TableProps } from "./Table";

package/src/table/stories/table-expandable.stories.tsx

@@ -12,7 +12,7 @@ export const Expandable = () => {
 
   return (
     <>
-      <Table>
+      <Table zebraStripes>
         <Table.Header>
           <Table.Row>
             {columns.map(({ key, name }) => (
@@ -24,6 +24,7 @@ export const Expandable = () => {
         <Table.Body>
           {data.map((data) => (
             <Table.ExpandableRow
+              expansionDisabled={data.animal === "Sel"}
               content={data.content}
               key={data.name}
               togglePlacement="right"

package/src/tabs/Tab.tsx

@@ -27,7 +27,7 @@ export interface TabProps
 
 export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
 
-const Tab: TabType = forwardRef(
+export const Tab: TabType = forwardRef(
   (
     {
       className,

package/src/tabs/TabList.tsx

@@ -5,7 +5,7 @@ import cl from "classnames";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Tab elements
    */
@@ -16,11 +16,11 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   loop?: boolean;
 }
 
-export type ListType = React.ForwardRefExoticComponent<
-  ListProps & React.RefAttributes<HTMLDivElement>
+export type TabListType = React.ForwardRefExoticComponent<
+  TabListProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const List = forwardRef<HTMLDivElement, ListProps>(
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const listRef = useRef<HTMLDivElement | null>(null);
     const mergedRef = mergeRefs([listRef, ref]);
@@ -122,6 +122,6 @@ const List = forwardRef<HTMLDivElement, ListProps>(
       </div>
     );
   }
-) as ListType;
+) as TabListType;
 
-export default List;
+export default TabList;

package/src/tabs/TabPanel.tsx

@@ -2,7 +2,7 @@ import { TabsContent } from "@radix-ui/react-tabs";
 import cl from "classnames";
 import React, { forwardRef } from "react";
 
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Tab panel
    */
@@ -13,11 +13,11 @@ export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
 }
 
-export type PanelType = React.ForwardRefExoticComponent<
-  PanelProps & React.RefAttributes<HTMLDivElement>
+export type TabPanelType = React.ForwardRefExoticComponent<
+  TabPanelProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const Panel = forwardRef<HTMLDivElement, PanelProps>(
+const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, ...rest }, ref) => (
     <TabsContent
       {...rest}
@@ -25,6 +25,6 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(
       className={cl("navds-tabs__tabpanel", className)}
     />
   )
-) as PanelType;
+) as TabPanelType;
 
-export default Panel;
+export default TabPanel;

package/src/tabs/Tabs.tsx

@@ -2,8 +2,8 @@ import cl from "classnames";
 import React, { createContext, forwardRef, HTMLAttributes } from "react";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import Tab, { TabType } from "./Tab";
-import List, { ListType } from "./TabList";
-import Panel, { PanelType } from "./TabPanel";
+import TabList, { TabListType } from "./TabList";
+import TabPanel, { TabPanelType } from "./TabPanel";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -40,8 +40,8 @@ interface TabsComponent
     TabsProps & React.RefAttributes<HTMLDivElement>
   > {
   Tab: TabType;
-  List: ListType;
-  Panel: PanelType;
+  List: TabListType;
+  Panel: TabPanelType;
 }
 
 interface TabsContextProps {
@@ -50,7 +50,7 @@ interface TabsContextProps {
 
 export const TabsContext = createContext<TabsContextProps | null>(null);
 
-const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   (
     {
       className,
@@ -83,7 +83,7 @@ const Tabs = forwardRef<HTMLDivElement, TabsProps>(
 ) as TabsComponent;
 
 Tabs.Tab = Tab;
-Tabs.List = List;
-Tabs.Panel = Panel;
+Tabs.List = TabList;
+Tabs.Panel = TabPanel;
 
 export default Tabs;

package/src/tabs/index.ts

@@ -1,2 +1,4 @@
-export { default as Tabs, TabsProps } from "./Tabs";
 export { TabProps } from "./Tab";
+export { TabListProps } from "./TabList";
+export { TabPanelProps } from "./TabPanel";
+export { default as Tabs, TabsProps } from "./Tabs";

package/src/tag/Tag.tsx

@@ -19,7 +19,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   size?: "medium" | "small";
 }
 
-const Tag = forwardRef<HTMLSpanElement, TagProps>(
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
   ({ className, variant, size = "medium", ...rest }, ref) => {
     const Component = size === "medium" ? BodyShort : Detail;
 

package/src/tag/index.ts

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

package/src/toggle-group/ToggleGroup.tsx

@@ -53,7 +53,7 @@ export const ToggleGroupContext = createContext<ToggleContextProps | null>(
   null
 );
 
-const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {
       className,

package/src/toggle-group/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from "./ToggleGroup";
-export { ToggleGroupProps } from "./ToggleGroup";
+export { default as ToggleGroup, ToggleGroupProps } from "./ToggleGroup";
+export { ToggleItemProps } from "./ToggleItem";

package/src/tooltip/Tooltip.tsx

@@ -71,7 +71,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   keys?: string[];
 }
 
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
       children,

package/src/tooltip/index.ts

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

package/src/typography/BodyLong.tsx

@@ -19,7 +19,7 @@ export interface BodyLongProps
   spacing?: boolean;
 }
 
-const BodyLong: OverridableComponent<
+export const BodyLong: OverridableComponent<
   BodyLongProps,
   HTMLParagraphElement
 > = forwardRef(

package/src/typography/BodyShort.tsx

@@ -19,7 +19,7 @@ export interface BodyShortProps
   spacing?: boolean;
 }
 
-const BodyShort: OverridableComponent<
+export const BodyShort: OverridableComponent<
   BodyShortProps,
   HTMLParagraphElement
 > = forwardRef(

package/src/typography/Detail.tsx

@@ -19,7 +19,7 @@ export interface DetailProps
   spacing?: boolean;
 }
 
-const Detail: OverridableComponent<
+export const Detail: OverridableComponent<
   DetailProps,
   HTMLParagraphElement
 > = forwardRef(

package/src/typography/Heading.tsx

@@ -23,7 +23,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   spacing?: boolean;
 }
 
-const Heading: OverridableComponent<
+export const Heading: OverridableComponent<
   HeadingProps,
   HTMLHeadingElement
 > = forwardRef(

package/src/typography/Ingress.tsx

@@ -14,7 +14,7 @@ export interface IngressProps
   spacing?: boolean;
 }
 
-const Ingress: OverridableComponent<
+export const Ingress: OverridableComponent<
   IngressProps,
   HTMLParagraphElement
 > = forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (

package/src/typography/Label.tsx

@@ -18,7 +18,7 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
   spacing?: boolean;
 }
 
-const Label: OverridableComponent<
+export const Label: OverridableComponent<
   LabelProps,
   HTMLParagraphElement
 > = forwardRef(

package/src/typography/index.ts

@@ -1,6 +1,6 @@
-export { default as Heading } from "./Heading";
-export { default as Ingress } from "./Ingress";
-export { default as BodyLong } from "./BodyLong";
-export { default as BodyShort } from "./BodyShort";
-export { default as Detail } from "./Detail";
-export { default as Label } from "./Label";
+export { BodyLongProps, default as BodyLong } from "./BodyLong";
+export { BodyShortProps, default as BodyShort } from "./BodyShort";
+export { default as Detail, DetailProps } from "./Detail";
+export { default as Heading, HeadingProps } from "./Heading";
+export { default as Ingress, IngressProps } from "./Ingress";
+export { default as Label, LabelProps } from "./Label";