@navikt/ds-react 8.2.0 → 8.2.2

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";

package/src/dialog/index.ts

@@ -1,19 +1,23 @@
 "use client";
-export { default as Dialog } from "./root/DialogRoot";
-export type { DialogProps } from "./root/DialogRoot";
-export { DialogTrigger } from "./trigger/DialogTrigger";
-export type { DialogTriggerProps } from "./trigger/DialogTrigger";
-export { DialogPopup } from "./popup/DialogPopup";
-export type { DialogPopupProps } from "./popup/DialogPopup";
-export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger";
-export type { DialogCloseTriggerProps } from "./close-trigger/DialogCloseTrigger";
-export { DialogHeader } from "./header/DialogHeader";
-export type { DialogHeaderProps } from "./header/DialogHeader";
-export { DialogFooter } from "./footer/DialogFooter";
-export type { DialogFooterProps } from "./footer/DialogFooter";
-export { DialogTitle } from "./title/DialogTitle";
-export type { DialogTitleProps } from "./title/DialogTitle";
-export { DialogDescription } from "./description/DialogDescription";
-export type { DialogDescriptionProps } from "./description/DialogDescription";
-export { DialogBody } from "./body/DialogBody";
-export type { DialogBodyProps } from "./body/DialogBody";
+export {
+  default as Dialog,
+  DialogTrigger,
+  DialogPopup,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+} from "./root/DialogRoot";
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogPopupProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+} from "./root/DialogRoot";

package/src/dialog/root/DialogRoot.tsx

@@ -5,14 +5,20 @@ import {
   useEventCallback,
   useTransitionStatus,
 } from "../../utils/hooks";
-import { DialogBody } from "../body/DialogBody";
-import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
-import { DialogDescription } from "../description/DialogDescription";
-import { DialogFooter } from "../footer/DialogFooter";
-import { DialogHeader } from "../header/DialogHeader";
-import { DialogPopup } from "../popup/DialogPopup";
-import { DialogTitle } from "../title/DialogTitle";
-import { DialogTrigger } from "../trigger/DialogTrigger";
+import { DialogBody, DialogBodyProps } from "../body/DialogBody";
+import {
+  DialogCloseTrigger,
+  DialogCloseTriggerProps,
+} from "../close-trigger/DialogCloseTrigger";
+import {
+  DialogDescription,
+  DialogDescriptionProps,
+} from "../description/DialogDescription";
+import { DialogFooter, DialogFooterProps } from "../footer/DialogFooter";
+import { DialogHeader, DialogHeaderProps } from "../header/DialogHeader";
+import { DialogPopup, DialogPopupProps } from "../popup/DialogPopup";
+import { DialogTitle, DialogTitleProps } from "../title/DialogTitle";
+import { DialogTrigger, DialogTriggerProps } from "../trigger/DialogTrigger";
 import { DialogContextProvider, useDialogContext } from "./DialogRoot.context";
 
 interface DialogProps {
@@ -56,6 +62,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   Trigger: typeof DialogTrigger;
+
   /**
    * @see 🏷️ {@link DialogCloseTriggerProps}
    * @example
@@ -70,6 +77,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   CloseTrigger: typeof DialogCloseTrigger;
+
   /**
    * @see 🏷️ {@link DialogPopupProps}
    * @example
@@ -295,4 +303,24 @@ Dialog.Footer = DialogFooter;
 Dialog.Popup = DialogPopup;
 
 export default Dialog;
-export type { DialogProps };
+export {
+  DialogTrigger,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogPopup,
+};
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogPopupProps,
+};

package/src/expansion-card/ExpansionCard.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
@@ -19,10 +19,9 @@ import {
 } from "./ExpansionCardTitle";
 import { ExpansionCardContext } from "./context";
 
-interface ExpansionCardComponent
-  extends React.ForwardRefExoticComponent<
-    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ExpansionCardComponent extends React.ForwardRefExoticComponent<
+  ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ExpansionCardHeaderProps}
    */
@@ -48,20 +47,23 @@ interface ExpansionCardComponent
   >;
 }
 
-interface ExpansionCardCommonProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+interface ExpansionCardCommonProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onToggle"
+> {
   children: React.ReactNode;
   /**
-   * Callback for when Card is toggled open/closed
+   * Callback for when Card is opened/closed.
    */
   onToggle?: (open: boolean) => void;
   /**
-   * Controlled open-state
-   * Using this removes automatic control of open-state
+   * Controlled open-state.
+   *
+   * Using this removes automatic control of open-state.
    */
   open?: boolean;
   /**
-   * Defaults to open if not controlled
+   * The open state when initially rendered. Use when you do not need to control the open state.
    * @default false
    */
   defaultOpen?: boolean;
@@ -102,7 +104,7 @@ export type ExpansionCardProps = ExpansionCardCommonProps &
  *
  * @example
  * ```jsx
- * <ExpansionCard aria-label="default-demo">
+ * <ExpansionCard aria-label="Utbetaling av sykepenger">
  *   <ExpansionCard.Header>
  *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
  *   </ExpansionCard.Header>
@@ -125,14 +127,9 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
     },
     ref,
   ) => {
-    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
-
     const [_open, _setOpen] = useControllableState({
       value: open,
-      onChange: (newValue) => {
-        onToggle?.(newValue);
-        shouldFade.current = true;
-      },
+      onChange: onToggle,
       defaultValue: defaultOpen,
     });
 
@@ -151,9 +148,6 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             "aksel-expansioncard",
             className,
             `aksel-expansioncard--${size}`,
-            {
-              "aksel-expansioncard--no-animation": !shouldFade.current,
-            },
           )}
           ref={ref}
         />

package/src/form/file-upload/FileUpload.tsx

@@ -14,10 +14,9 @@ interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   translations?: ComponentTranslation<"FileUpload">;
 }
 
-interface FileUploadComponent
-  extends React.ForwardRefExoticComponent<
-    FileUploadProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface FileUploadComponent extends React.ForwardRefExoticComponent<
+  FileUploadProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * Framed area to drag-n-drop files, upload files with button-click or copy-paste.
    * @example
@@ -64,7 +63,7 @@ interface FileUploadComponent
    * Multiple items can be semantically grouped as a list.
    * ```jsx
    * <FileUpload>
-   *   <VStack gap="4" as="ul">
+   *   <VStack gap="space-16" as="ul">
    *     <FileUpload.Item as="li" file={file} />
    *     <FileUpload.Item as="li" file={file2} />
    *     <FileUpload.Item as="li" file={file3} status="uploading" />
@@ -117,7 +116,7 @@ interface FileUploadComponent
  * @example
  * Items
  * ```jsx
- * <VStack gap="4" as="ul">
+ * <VStack gap="space-16" as="ul">
  *   <FileUpload.Item as="li" file={myFile} />
  *   <FileUpload.Item as="li" file={mySecondFile} />
  * </VStack>

package/src/form/search/Search.tsx

@@ -18,6 +18,11 @@ import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
 
+export type SearchNativeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "type"
+>;
+
 export type SearchClearEvent =
   | {
       trigger: "Click";
@@ -26,8 +31,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
+  extends Omit<FormFieldProps, "readOnly">, SearchNativeProps {
   children?: React.ReactNode;
   /**
    * Search label.
@@ -82,10 +86,9 @@ export interface SearchProps
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface SearchComponent
-  extends React.ForwardRefExoticComponent<
-    SearchProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface SearchComponent extends React.ForwardRefExoticComponent<
+  SearchProps & React.RefAttributes<HTMLDivElement>
+> {
   Button: SearchButtonType;
 }