@navikt/ds-react 8.2.0 → 8.2.1

package/src/accordion/Accordion.tsx

@@ -10,31 +10,24 @@ import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 
-interface AccordionComponent
-  extends React.ForwardRefExoticComponent<
-    AccordionProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface AccordionComponent extends React.ForwardRefExoticComponent<
+  AccordionProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link AccordionItemProps}
    */
-  Item: React.ForwardRefExoticComponent<
-    AccordionItemProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Item: typeof AccordionItem;
   /**
    * @see 🏷️ {@link AccordionHeaderProps}
    */
-  Header: React.ForwardRefExoticComponent<
-    AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
-  >;
+  Header: typeof AccordionHeader;
   /**
    * @see 🏷️ {@link AccordionContentProps}
    */
-  Content: React.ForwardRefExoticComponent<
-    AccordionContentProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Content: typeof AccordionContent;
 }
 
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * @deprecated Will be removed in a future major version. Use `data-color` instead.
    */
@@ -144,3 +137,10 @@ Accordion.Content = AccordionContent;
 Accordion.Item = AccordionItem;
 
 export default Accordion;
+export { AccordionItem, AccordionHeader, AccordionContent };
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionHeaderProps,
+  AccordionContentProps,
+};

package/src/accordion/index.ts

@@ -1,14 +1,13 @@
 "use client";
-export { type AccordionProps, default as Accordion } from "./Accordion";
 export {
-  default as AccordionHeader,
-  type AccordionHeaderProps,
-} from "./AccordionHeader";
-export {
-  default as AccordionContent,
-  type AccordionContentProps,
-} from "./AccordionContent";
-export {
-  default as AccordionItem,
-  type AccordionItemProps,
-} from "./AccordionItem";
+  default as Accordion,
+  AccordionHeader,
+  AccordionContent,
+  AccordionItem,
+} from "./Accordion";
+export type {
+  AccordionProps,
+  AccordionHeaderProps,
+  AccordionContentProps,
+  AccordionItemProps,
+} from "./Accordion";

package/src/chat/Chat.tsx

@@ -9,7 +9,7 @@ export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
 
-export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Children of type `<Chat.Bubble />`.
    */
@@ -62,10 +62,9 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface ChatComponent
-  extends React.ForwardRefExoticComponent<
-    ChatProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ChatComponent extends React.ForwardRefExoticComponent<
+  ChatProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ChatBubbleProps}
    */
@@ -162,3 +161,5 @@ function variantToColor(variant: ChatProps["variant"]): AkselColor {
 Chat.Bubble = Bubble;
 
 export default Chat;
+export { Bubble as ChatBubble };
+export type { ChatProps, ChatBubbleProps };

package/src/chat/index.ts

@@ -1,3 +1,3 @@
 "use client";
-export { default as Chat, type ChatProps } from "./Chat";
-export { default as ChatBubble, type ChatBubbleProps } from "./Bubble";
+export { default as Chat, ChatBubble } from "./Chat";
+export type { ChatProps, ChatBubbleProps } from "./Chat";

package/src/chips/Chips.tsx

@@ -1,10 +1,9 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import RemovableChips, { ChipsRemovableProps } from "./Removable";
 import ToggleChips, { ChipsToggleProps } from "./Toggle";
 
-export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
   /**
    * Changes padding and font-sizes.
@@ -13,22 +12,21 @@ export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   size?: "medium" | "small";
 }
 
-interface ChipsComponent
-  extends React.ForwardRefExoticComponent<
-    ChipsProps & React.RefAttributes<HTMLUListElement>
-  > {
+interface ChipsComponent extends React.ForwardRefExoticComponent<
+  ChipsProps & React.RefAttributes<HTMLUListElement>
+> {
   /**
    * Toggle between selected-states.
    * @see 🏷️ {@link ToggleChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Toggle: OverridableComponent<ChipsToggleProps, HTMLButtonElement>;
+  Toggle: typeof ToggleChips;
   /**
    * Remove filter or the likes on click.
    * @see 🏷️ {@link RemovableChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Removable: OverridableComponent<ChipsRemovableProps, HTMLButtonElement>;
+  Removable: typeof RemovableChips;
 }
 
 /**
@@ -81,3 +79,5 @@ Chips.Toggle = ToggleChips;
 Chips.Removable = RemovableChips;
 
 export default Chips;
+export { ToggleChips as ChipsToggle, RemovableChips as ChipsRemovable };
+export type { ChipsProps, ChipsToggleProps, ChipsRemovableProps };

package/src/chips/index.ts

@@ -1,7 +1,7 @@
 "use client";
-export { default as Chips, type ChipsProps } from "./Chips";
-export {
-  RemovableChips as ChipsRemovable,
-  type ChipsRemovableProps,
-} from "./Removable";
-export { ToggleChips as ChipsToggle, type ChipsToggleProps } from "./Toggle";
+export { default as Chips, ChipsRemovable, ChipsToggle } from "./Chips";
+export type {
+  ChipsProps,
+  ChipsRemovableProps,
+  ChipsToggleProps,
+} from "./Chips";

package/src/collapsible/Collapsible.tsx

@@ -3,17 +3,19 @@ import { useId } from "../utils-external";
 import { useControllableState } from "../utils/hooks";
 import { CollapsibleContextProvider } from "./Collapsible.context";
 import { CollapsibleBaseProps } from "./Collapsible.types";
-import CollapsibleContent from "./parts/Collapsible.Content";
-import CollapsibleTrigger from "./parts/Collapsible.Trigger";
+import CollapsibleContent, {
+  CollapsibleContentProps,
+} from "./parts/Collapsible.Content";
+import CollapsibleTrigger, {
+  CollapsibleTriggerProps,
+} from "./parts/Collapsible.Trigger";
 
-export interface CollapsibleProps
-  extends CollapsibleBaseProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+interface CollapsibleProps
+  extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {}
 
-interface CollapsibleComponent
-  extends React.ForwardRefExoticComponent<
-    CollapsibleProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<
+  CollapsibleProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link CollapsibleTriggerProps}
    */
@@ -47,7 +49,7 @@ interface CollapsibleComponent
  *     <Button>Button</Button>
  *   </Collapsible.Trigger>
  *   <Collapsible.Content asChild>
- *     <Box padding="4" background="info-soft">
+ *     <Box padding="space-16" background="info-soft">
  *       <div>lorem ipsum</div>
  *     </Box>
  *   </Collapsible.Content>
@@ -99,3 +101,9 @@ Collapsible.Trigger = CollapsibleTrigger;
 Collapsible.Content = CollapsibleContent;
 
 export default Collapsible;
+export { CollapsibleTrigger, CollapsibleContent };
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+};

package/src/collapsible/index.ts

@@ -1,10 +1,11 @@
 "use client";
-export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
 export {
-  default as CollapsibleTrigger,
-  type CollapsibleTriggerProps,
-} from "./parts/Collapsible.Trigger";
-export {
-  default as CollapsibleContent,
-  type CollapsibleContentProps,
-} from "./parts/Collapsible.Content";
+  default as Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./Collapsible";
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+} from "./Collapsible";

package/src/data/table/root/DataTableRoot.tsx

@@ -106,11 +106,13 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
 const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
   ({ className, ...rest }, forwardedRef) => {
     return (
-      <table
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table", className)}
-      />
+      <div className="aksel-data-table__wrapper">
+        <table
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table", className)}
+        />
+      </div>
     );
   },
 ) as DataTableRootComponent;

package/src/data/table/td/DataTableTd.tsx

@@ -4,13 +4,15 @@ import { cl } from "../../../utils/helpers";
 type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  ({ className, children, ...rest }, forwardedRef) => {
     return (
       <td
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__td", className)}
-      />
+      >
+        <div>{children}</div>
+      </td>
     );
   },
 );

package/src/data/table/th/DataTableTh.tsx

@@ -1,16 +1,67 @@
 import React, { forwardRef } from "react";
+import {
+  CaretLeftRightIcon,
+  PushPinFillIcon,
+  PushPinIcon,
+} from "@navikt/aksel-icons";
+import { Button } from "../../../button";
 import { cl } from "../../../utils/helpers";
 
-type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement>;
+type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
+  resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  isPinned?: boolean;
+  pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  size?: number;
+};
 
 const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  (
+    {
+      className,
+      children,
+      resizeHandler,
+      isPinned = false,
+      pinningHandler,
+      size,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
     return (
       <th
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__th", className)}
-      />
+        style={{ width: size }}
+      >
+        {children}
+        {pinningHandler && (
+          <Button
+            onClick={pinningHandler}
+            size="small"
+            variant="secondary"
+            icon={
+              isPinned ? (
+                <PushPinFillIcon aria-hidden title="Fest kolonne" />
+              ) : (
+                <PushPinIcon aria-hidden title="Løstne kolonne" />
+              )
+            }
+          />
+        )}
+        {resizeHandler && (
+          <Button
+            onMouseDown={resizeHandler}
+            onMouseUp={resizeHandler}
+            className={cl("aksel-data-table__th-resize-handle")}
+            size="small"
+            variant="secondary"
+            icon={
+              <CaretLeftRightIcon aria-hidden title="Endre kolonnestørrelse" />
+            }
+          />
+        )}
+      </th>
     );
   },
 );

package/src/data/toolbar/button/DataToolbarButton.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Button, ButtonProps } from "../../../button";
+import { Tooltip } from "../../../tooltip";
+
+type DataToolbarButtonProps = Omit<
+  ButtonProps,
+  "variant" | "size" | "data-color"
+> & {
+  /**
+   * Kort beskrivelse av knappens funksjon.
+   */
+  tooltip?: string; // TODO: Bør kanskje ikke være innebygget, men funker ikke å bruke Tooltip rundt Button rundt ActionMenu.Trigger i dag pga. props-forwarding i Tooltip
+};
+
+const DataToolbarButton = React.forwardRef<
+  HTMLButtonElement,
+  DataToolbarButtonProps
+>(({ tooltip, ...rest }, ref) => {
+  const button = (
+    <Button
+      ref={ref}
+      {...rest}
+      variant="secondary"
+      size="small"
+      data-color="neutral"
+      iconPosition="right"
+    />
+  );
+  return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button;
+});
+
+export { DataToolbarButton };
+export default DataToolbarButton;
+export type { DataToolbarButtonProps };

package/src/data/toolbar/root/DataToolbarRoot.tsx

@@ -1,5 +1,8 @@
 import React from "react";
 import { cl } from "../../../utils/helpers";
+import DataToolbarButton, {
+  DataToolbarButtonProps,
+} from "../button/DataToolbarButton";
 import {
   DataToolbarSearchField,
   type DataToolbarSearchFieldProps,
@@ -26,6 +29,17 @@ interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
    */
   SearchField: typeof DataToolbarSearchField;
 
+  /**
+   * @see 🏷️ {@link DataToolbarButtonProps}
+   * @example
+   * ```tsx
+   * <DataToolbar>
+   *   <DataToolbar.Button />
+   * </DataToolbar>
+   * ```
+   */
+  Button: typeof DataToolbarButton;
+
   /**
    * @see 🏷️ {@link DataToolbarToggleButtonProps}
    * @example
@@ -54,12 +68,19 @@ const DataToolbar = React.forwardRef<HTMLDivElement, DataToolbarProps>(
 ) as DataToolbarRootComponent;
 
 DataToolbar.SearchField = DataToolbarSearchField;
+DataToolbar.Button = DataToolbarButton;
 DataToolbar.ToggleButton = DataToolbarToggleButton;
 
-export { DataToolbar, DataToolbarSearchField, DataToolbarToggleButton };
+export {
+  DataToolbar,
+  DataToolbarSearchField,
+  DataToolbarButton,
+  DataToolbarToggleButton,
+};
 export default DataToolbar;
 export type {
   DataToolbarProps,
   DataToolbarSearchFieldProps,
+  DataToolbarButtonProps,
   DataToolbarToggleButtonProps,
 };

package/src/data/toolbar/search-field/DataToolbarSearchField.tsx

@@ -1,26 +1,27 @@
 import React from "react";
 import { Search, type SearchProps } from "../../../form/search";
+import type { SearchNativeProps } from "../../../form/search/Search";
 
-type DataToolbarSearchFieldProps = Omit<
-  React.HTMLAttributes<HTMLInputElement>,
-  "data-color" | "size" | "type"
-> &
-  Pick<SearchProps, "label" | "onChange">;
+type DataToolbarSearchFieldProps = Omit<SearchNativeProps, "data-color"> &
+  Pick<SearchProps, "label" | "onChange">; // TODO: Vurder om label skal hardkodes (bør jo samsvare med placeholder...)
 
 const DataToolbarSearchField = React.forwardRef<
   HTMLInputElement,
   DataToolbarSearchFieldProps
 >(({ className, ...props }, ref) => {
+  // We need the wrapper because Search has width:100%
   return (
-    <Search
-      className={className}
-      ref={ref}
-      {...props}
-      variant="simple"
-      size="small"
-      htmlSize="12"
-      placeholder="Quick filter"
-    />
+    <div>
+      <Search
+        className={className}
+        ref={ref}
+        {...props}
+        variant="simple"
+        size="small"
+        htmlSize="12"
+        placeholder="Hurtigfilter" // TODO: Oversett, og vurder om skal være overstyrbart
+      />
+    </div>
   );
 });
 

package/src/data/toolbar/toggle-button/DataToolbarToggleButton.tsx

@@ -1,21 +1,25 @@
 import React from "react";
+import { Button, ButtonProps } from "../../../button";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
 
-type DataToolbarToggleButtonProps =
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type DataToolbarToggleButtonProps = Omit<
+  ButtonProps,
+  "variant" | "size" | "data-color" | "children"
+> &
+  Required<Pick<ButtonProps, "icon">> & {
     /**
      * Indicates whether the toggle button is pressed or not.
      * @default false
      */
     isPressed?: boolean;
     /**
-     * Default uncontrolled pressed state
+     * Default uncontrolled pressed state.
      * @default false
      */
     defaultPressed?: boolean;
     /**
-     * Callback for new pressed state
+     * Callback for new pressed state.
      */
     onPressChange?: (isPressed: boolean) => void;
   };
@@ -42,10 +46,13 @@ const DataToolbarToggleButton = React.forwardRef<
     });
 
     return (
-      <button
+      <Button
         className={cl("aksel-data-toolbar__toggle-button", className)}
         ref={ref}
         {...props}
+        variant="secondary"
+        size="small"
+        data-color="neutral"
         aria-pressed={pressed}
         onClick={composeEventHandlers(onClick, () =>
           setPressed((oldState) => !oldState),

package/src/date/datepicker/DatePicker.tsx

@@ -6,7 +6,11 @@ import { cl } from "../../utils/helpers";
 import { useControllableState, useMergeRefs } from "../../utils/hooks";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { DateDialog } from "../Date.Dialog";
-import { DateInputContextProvider, DatePickerInput } from "../Date.Input";
+import {
+  DateInputContextProvider,
+  DateInputProps,
+  DatePickerInput,
+} from "../Date.Input";
 import {
   DateTranslationContextProvider,
   getTranslations,
@@ -17,13 +21,15 @@ import {
   DatePickerDefaultProps,
 } from "./DatePicker.types";
 import { ReactDayPicker } from "./parts/DatePicker.RDP";
-import DatePickerStandalone from "./parts/DatePicker.Standalone";
+import DatePickerStandalone, {
+  DatePickerStandaloneProps,
+} from "./parts/DatePicker.Standalone";
 
-export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
 
-interface DatePickerComponent
-  extends React.ForwardRefExoticComponent<DatePickerProps> {
+interface DatePickerComponent extends React.ForwardRefExoticComponent<DatePickerProps> {
   /**
+   * @see 🏷️ {@link DatePickerStandaloneProps}
    * @example
    * ```jsx
    * <DatePicker.Standalone
@@ -175,3 +181,5 @@ DatePicker.Standalone = DatePickerStandalone;
 DatePicker.Input = DatePickerInput;
 
 export default DatePicker;
+export { DatePickerStandalone, DatePickerInput };
+export type { DatePickerProps, DatePickerStandaloneProps, DateInputProps };

package/src/date/datepicker/index.ts

@@ -1,5 +1,14 @@
 "use client";
-export { default as DatePicker, type DatePickerProps } from "./DatePicker";
+export {
+  default as DatePicker,
+  DatePickerStandalone,
+  DatePickerInput,
+} from "./DatePicker";
+export type {
+  DatePickerProps,
+  DatePickerStandaloneProps,
+  DateInputProps,
+} from "./DatePicker";
 export {
   useDatepicker,
   type DateValidationT,
@@ -10,8 +19,3 @@ export {
   type RangeValidationT,
   type UseRangeDatepickerOptions,
 } from "./hooks/useRangeDatepicker";
-export {
-  DatePickerStandalone,
-  type DatePickerStandaloneProps,
-} from "./parts/DatePicker.Standalone";
-export { DatePickerInput, type DateInputProps } from "../Date.Input";

package/src/date/monthpicker/MonthPicker.tsx

@@ -4,7 +4,11 @@ import { cl } from "../../utils/helpers";
 import { useControllableState, useMergeRefs } from "../../utils/hooks";
 import { useDateLocale, useI18n } from "../../utils/i18n/i18n.hooks";
 import { DateDialog } from "../Date.Dialog";
-import { DateInputContextProvider, MonthPickerInput } from "../Date.Input";
+import {
+  DateInputContextProvider,
+  DateInputProps,
+  MonthPickerInput,
+} from "../Date.Input";
 import {
   DateTranslationContextProvider,
   getLocaleFromString,
@@ -13,12 +17,15 @@ import {
 import { MonthPickerProvider } from "./MonthPicker.context";
 import { MonthPickerProps } from "./MonthPicker.types";
 import { MonthPickerCaption } from "./parts/MonthPicker.Caption";
-import { MonthPickerStandalone } from "./parts/MonthPicker.Standalone";
+import {
+  MonthPickerStandalone,
+  MonthPickerStandaloneProps,
+} from "./parts/MonthPicker.Standalone";
 import { MonthPickerTable } from "./parts/MonthPicker.Table";
 
-interface MonthPickerComponent
-  extends React.ForwardRefExoticComponent<MonthPickerProps> {
+interface MonthPickerComponent extends React.ForwardRefExoticComponent<MonthPickerProps> {
   /**
+   * @see 🏷️ {@link MonthPickerStandaloneProps}
    * @example
    * ```jsx
    * <MonthPicker.Standalone
@@ -174,3 +181,5 @@ MonthPicker.Standalone = MonthPickerStandalone;
 MonthPicker.Input = MonthPickerInput;
 
 export default MonthPicker;
+export { MonthPickerStandalone, MonthPickerInput };
+export type { MonthPickerProps, MonthPickerStandaloneProps, DateInputProps };

package/src/date/monthpicker/index.ts

@@ -1,9 +1,11 @@
 "use client";
 export { useMonthpicker, type MonthValidationT } from "./hooks/useMonthPicker";
-export { default as MonthPicker } from "./MonthPicker";
-export type { MonthPickerProps } from "./MonthPicker.types";
 export {
+  default as MonthPicker,
   MonthPickerStandalone,
-  type MonthPickerStandaloneProps,
-} from "./parts/MonthPicker.Standalone";
-export { MonthPickerInput } from "../Date.Input";
+  MonthPickerInput,
+} from "./MonthPicker";
+export type {
+  MonthPickerProps,
+  MonthPickerStandaloneProps,
+} from "./MonthPicker";