@navikt/ds-react 8.1.0 → 8.2.0

package/src/data/table/Readme.md

@@ -0,0 +1,11 @@
+# Naming discussions
+
+## Under same scope
+
+DataTable
+DataToolbar
+DataFilter
+
+DataSearchField
+DataCombobox
+DataOperator

package/src/data/table/caption/DataTableCaption.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+
+const DataTableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  DataTableCaptionProps
+>(({ className, ...rest }, forwardedRef) => {
+  return (
+    <caption
+      {...rest}
+      ref={forwardedRef}
+      className={cl("aksel-data-table__caption", className)}
+    />
+  );
+});
+
+export { DataTableCaption };
+export type { DataTableCaptionProps };

package/src/data/table/index.tsx

@@ -0,0 +1,19 @@
+"use client";
+export {
+  default as DataTable,
+  DataTableCaption,
+  DataTableThead,
+  DataTableTbody,
+  DataTableTr,
+  DataTableTh,
+  DataTableTd,
+} from "./root/DataTableRoot";
+export type {
+  DataTableProps,
+  DataTableCaptionProps,
+  DataTableTheadProps,
+  DataTableTbodyProps,
+  DataTableTrProps,
+  DataTableThProps,
+  DataTableTdProps,
+} from "./root/DataTableRoot";

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

@@ -0,0 +1,143 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+import {
+  DataTableCaption,
+  type DataTableCaptionProps,
+} from "../caption/DataTableCaption";
+import {
+  DataTableTbody,
+  type DataTableTbodyProps,
+} from "../tbody/DataTableTbody";
+import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd";
+import { DataTableTh, type DataTableThProps } from "../th/DataTableTh";
+import {
+  DataTableThead,
+  type DataTableTheadProps,
+} from "../thead/DataTableThead";
+import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+
+interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
+  children: React.ReactNode;
+}
+
+interface DataTableRootComponent extends React.ForwardRefExoticComponent<
+  DataTableProps & React.RefAttributes<HTMLDialogElement>
+> {
+  /**
+   * @see 🏷️ {@link DataTableCaptionProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Caption>
+   *     Lorem ipsum
+   *   </DataTable.Caption
+   * </DataTable>
+   * ```
+   */
+  Caption: typeof DataTableCaption;
+  /**
+   * @see 🏷️ {@link DataTableTheadProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Thead>
+   *     ... TODO
+   *   </DataTable.Thead>
+   * </DataTable>
+   * ```
+   */
+  Thead: typeof DataTableThead;
+  /**
+   * @see 🏷️ {@link DataTableTbodyProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tbody>
+   *     ... TODO
+   *   </DataTable.Tbody>
+   * </DataTable>
+   * ```
+   */
+  Tbody: typeof DataTableTbody;
+  /**
+   * @see 🏷️ {@link DataTableTrProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tr>
+   *     ... TODO
+   *   </DataTable.Tr
+   * </DataTable>
+   * ```
+   */
+  Tr: typeof DataTableTr;
+  /**
+   * @see 🏷️ {@link DataTableThProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Thead>
+   *     <DataTable.Th>Header 1</DataTable.Th>
+   *     <DataTable.Th>Header 2</DataTable.Th>
+   *   </DataTable.Thead>
+   * </DataTable>
+   * ```
+   */
+  Th: typeof DataTableTh;
+  /**
+   * @see 🏷️ {@link DataTableTdProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tbody>
+   *     <DataTable.Td>
+   *       Lorem ipsum
+   *     </DataTable.Td>
+   *     <DataTable.Td>
+   *       Dolor sit amet
+   *     </DataTable.Td>
+   *   </DataTable.Tbody>
+   * </DataTable>
+   * ```
+   */
+  Td: typeof DataTableTd;
+}
+
+const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <table
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table", className)}
+      />
+    );
+  },
+) as DataTableRootComponent;
+
+DataTable.Caption = DataTableCaption;
+DataTable.Thead = DataTableThead;
+DataTable.Tbody = DataTableTbody;
+DataTable.Th = DataTableTh;
+DataTable.Tr = DataTableTr;
+DataTable.Td = DataTableTd;
+
+export {
+  DataTable,
+  DataTableCaption,
+  DataTableTbody,
+  DataTableTd,
+  DataTableTh,
+  DataTableThead,
+  DataTableTr,
+};
+export default DataTable;
+export type {
+  DataTableProps,
+  DataTableCaptionProps,
+  DataTableTbodyProps,
+  DataTableTdProps,
+  DataTableThProps,
+  DataTableTheadProps,
+  DataTableTrProps,
+};

package/src/data/table/tbody/DataTableTbody.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTbodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+const DataTableTbody = forwardRef<HTMLTableSectionElement, DataTableTbodyProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <tbody
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__tbody", className)}
+      />
+    );
+  },
+);
+
+export { DataTableTbody };
+export type { DataTableTbodyProps };

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+
+const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <td
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__td", className)}
+      />
+    );
+  },
+);
+
+export { DataTableTd };
+export type { DataTableTdProps };

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement>;
+
+const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <th
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__th", className)}
+      />
+    );
+  },
+);
+
+export { DataTableTh };
+export type { DataTableThProps };

package/src/data/table/thead/DataTableThead.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTheadProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+const DataTableThead = forwardRef<HTMLTableSectionElement, DataTableTheadProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <thead
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__thead", className)}
+      />
+    );
+  },
+);
+
+export { DataTableThead };
+export type { DataTableTheadProps };

package/src/data/table/tr/DataTableTr.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement>;
+
+const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
+  ({ className, ...rest }, forwardedRef) => {
+    return (
+      <tr
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__tr", className)}
+      />
+    );
+  },
+);
+
+export { DataTableTr };
+export type { DataTableTrProps };

package/src/data/toolbar/index.ts

@@ -0,0 +1,11 @@
+"use client";
+export {
+  DataToolbar,
+  DataToolbarSearchField,
+  DataToolbarToggleButton,
+} from "./root/DataToolbarRoot";
+export type {
+  DataToolbarProps,
+  DataToolbarSearchFieldProps,
+  DataToolbarToggleButtonProps,
+} from "./root/DataToolbarRoot";

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { cl } from "../../../utils/helpers";
+import {
+  DataToolbarSearchField,
+  type DataToolbarSearchFieldProps,
+} from "../search-field/DataToolbarSearchField";
+import DataToolbarToggleButton, {
+  type DataToolbarToggleButtonProps,
+} from "../toggle-button/DataToolbarToggleButton";
+
+interface DataToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
+  DataToolbarProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DataToolbarSearchFieldProps}
+   * @example
+   * ```tsx
+   * <DataToolbar>
+   *   <DataToolbar.SearchField />
+   * </DataToolbar>
+   * ```
+   */
+  SearchField: typeof DataToolbarSearchField;
+
+  /**
+   * @see 🏷️ {@link DataToolbarToggleButtonProps}
+   * @example
+   * ```tsx
+   * <DataToolbar>
+   *   <DataToolbar.ToggleButton />
+   * </DataToolbar>
+   * ```
+   */
+  ToggleButton: typeof DataToolbarToggleButton;
+}
+
+const DataToolbar = React.forwardRef<HTMLDivElement, DataToolbarProps>(
+  ({ children, className, ...rest }, forwardRef) => {
+    return (
+      <div
+        ref={forwardRef}
+        {...rest}
+        className={cl("aksel-data-toolbar", className)}
+        role="toolbar"
+      >
+        {children}
+      </div>
+    );
+  },
+) as DataToolbarRootComponent;
+
+DataToolbar.SearchField = DataToolbarSearchField;
+DataToolbar.ToggleButton = DataToolbarToggleButton;
+
+export { DataToolbar, DataToolbarSearchField, DataToolbarToggleButton };
+export default DataToolbar;
+export type {
+  DataToolbarProps,
+  DataToolbarSearchFieldProps,
+  DataToolbarToggleButtonProps,
+};

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Search, type SearchProps } from "../../../form/search";
+
+type DataToolbarSearchFieldProps = Omit<
+  React.HTMLAttributes<HTMLInputElement>,
+  "data-color" | "size" | "type"
+> &
+  Pick<SearchProps, "label" | "onChange">;
+
+const DataToolbarSearchField = React.forwardRef<
+  HTMLInputElement,
+  DataToolbarSearchFieldProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Search
+      className={className}
+      ref={ref}
+      {...props}
+      variant="simple"
+      size="small"
+      htmlSize="12"
+      placeholder="Quick filter"
+    />
+  );
+});
+
+export { DataToolbarSearchField };
+export default DataToolbarSearchField;
+export type { DataToolbarSearchFieldProps };

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+
+type DataToolbarToggleButtonProps =
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Indicates whether the toggle button is pressed or not.
+     * @default false
+     */
+    isPressed?: boolean;
+    /**
+     * Default uncontrolled pressed state
+     * @default false
+     */
+    defaultPressed?: boolean;
+    /**
+     * Callback for new pressed state
+     */
+    onPressChange?: (isPressed: boolean) => void;
+  };
+
+const DataToolbarToggleButton = React.forwardRef<
+  HTMLButtonElement,
+  DataToolbarToggleButtonProps
+>(
+  (
+    {
+      className,
+      isPressed,
+      defaultPressed = false,
+      onPressChange,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [pressed, setPressed] = useControllableState({
+      defaultValue: defaultPressed,
+      value: isPressed,
+      onChange: onPressChange,
+    });
+
+    return (
+      <button
+        className={cl("aksel-data-toolbar__toggle-button", className)}
+        ref={ref}
+        {...props}
+        aria-pressed={pressed}
+        onClick={composeEventHandlers(onClick, () =>
+          setPressed((oldState) => !oldState),
+        )}
+      />
+    );
+  },
+);
+
+export { DataToolbarToggleButton };
+export default DataToolbarToggleButton;
+export type { DataToolbarToggleButtonProps };

package/src/internal-header/InternalHeader.tsx

@@ -67,14 +67,13 @@ interface InternalHeaderComponent
  * ```jsx
  * <InternalHeader >
  *  <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
- *  <Dropdown>
- *    <InternalHeader.Button
- *      as={Dropdown.Toggle}
- *    >
+ *  <ActionMenu>
+ *   <ActionMenu.Trigger>
+ *    <InternalHeader.Button>
  *      <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
  *    </InternalHeader.Button>
- *    <Dropdown.Menu />
- *  </Dropdown>
+ *   </ActionMenu.Trigger>
+ *  </ActionMenu>
  * </InternalHeader>
  * ```
  */

package/src/overlays/action-menu/ActionMenu.tsx

@@ -544,9 +544,14 @@ interface ActionMenuItemProps extends Omit<MenuItemProps, "asChild"> {
    */
   variant?: "danger";
   /**
-   * Adds an icon on the left side. The icon will always have aria-hidden.
+   * Adds an icon on the left side. For right side position use iconPosition. The icon will always have aria-hidden.
    */
   icon?: React.ReactNode;
+  /**
+   * Position of icon.
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 export const ActionMenuItem: OverridableComponent<
@@ -561,6 +566,7 @@ export const ActionMenuItem: OverridableComponent<
       icon,
       shortcut,
       variant,
+      iconPosition = "left",
       ...rest
     },
     ref,
@@ -570,15 +576,18 @@ export const ActionMenuItem: OverridableComponent<
         {...rest}
         className={cl("aksel-action-menu__item", className, {
           "aksel-action-menu__item--danger": variant === "danger",
-          "aksel-action-menu__item--has-icon": icon,
         })}
+        data-marker={icon ? iconPosition : undefined}
         aria-keyshortcuts={shortcut ?? undefined}
         asChild
       >
         <Component ref={ref}>
           {children}
           {icon && (
-            <Marker placement="left" className="aksel-action-menu__marker-icon">
+            <Marker
+              placement={iconPosition}
+              className="aksel-action-menu__marker-icon"
+            >
               {icon}
             </Marker>
           )}
@@ -632,10 +641,8 @@ export const ActionMenuCheckboxItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
-          "aksel-action-menu__item aksel-action-menu__item--has-icon",
-          className,
-        )}
+        className={cl("aksel-action-menu__item", className)}
+        data-marker="left"
         aria-keyshortcuts={shortcut}
       >
         {children}
@@ -768,10 +775,8 @@ export const ActionMenuRadioItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
-          "aksel-action-menu__item aksel-action-menu__item--has-icon",
-          className,
-        )}
+        className={cl("aksel-action-menu__item", className)}
+        data-marker="left"
       >
         {children}
         <Marker placement="left">
@@ -888,35 +893,54 @@ type MenuSubTriggerProps = React.ComponentPropsWithoutRef<
 interface ActionMenuSubTriggerProps
   extends Omit<MenuSubTriggerProps, "asChild"> {
   icon?: React.ReactNode;
+  /**
+   * Position of icon.
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 export const ActionMenuSubTrigger = forwardRef<
   ActionMenuSubTriggerElement,
   ActionMenuSubTriggerProps
->(({ children, className, icon, ...rest }: ActionMenuSubTriggerProps, ref) => {
-  return (
-    <Menu.SubTrigger
-      ref={ref}
-      {...rest}
-      asChild={false}
-      className={cl(
-        "aksel-action-menu__item aksel-action-menu__sub-trigger",
-        className,
-        { "aksel-action-menu__item--has-icon": icon },
-      )}
-    >
-      {children}
-      {icon && (
-        <Marker placement="left" className="aksel-action-menu__marker-icon">
-          {icon}
+>(
+  (
+    {
+      children,
+      className,
+      icon,
+      iconPosition = "left",
+      ...rest
+    }: ActionMenuSubTriggerProps,
+    ref,
+  ) => {
+    return (
+      <Menu.SubTrigger
+        ref={ref}
+        {...rest}
+        asChild={false}
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__sub-trigger",
+          className,
+        )}
+        data-marker={icon ? iconPosition : undefined}
+      >
+        {children}
+        {icon && (
+          <Marker
+            placement={iconPosition}
+            className="aksel-action-menu__marker-icon"
+          >
+            {icon}
+          </Marker>
+        )}
+        <Marker placement="right" className="aksel-action-menu__marker-icon">
+          <ChevronRightIcon aria-hidden />
         </Marker>
-      )}
-      <Marker placement="right" className="aksel-action-menu__marker-icon">
-        <ChevronRightIcon aria-hidden />
-      </Marker>
-    </Menu.SubTrigger>
-  );
-});
+      </Menu.SubTrigger>
+    );
+  },
+);
 
 /* -------------------------------------------------------------------------- */
 /*                            ActionMenuSubContent                            */