@navikt/ds-react 8.1.0 → 8.2.1

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,145 @@
+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 (
+      <div className="aksel-data-table__wrapper">
+        <table
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table", className)}
+        />
+      </div>
+    );
+  },
+) 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,21 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+
+const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
+  ({ className, children, ...rest }, forwardedRef) => {
+    return (
+      <td
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__td", className)}
+      >
+        <div>{children}</div>
+      </td>
+    );
+  },
+);
+
+export { DataTableTd };
+export type { DataTableTdProps };

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

@@ -0,0 +1,70 @@
+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> & {
+  resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  isPinned?: boolean;
+  pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  size?: number;
+};
+
+const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
+  (
+    {
+      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>
+    );
+  },
+);
+
+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/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/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,86 @@
+import React from "react";
+import { cl } from "../../../utils/helpers";
+import DataToolbarButton, {
+  DataToolbarButtonProps,
+} from "../button/DataToolbarButton";
+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 DataToolbarButtonProps}
+   * @example
+   * ```tsx
+   * <DataToolbar>
+   *   <DataToolbar.Button />
+   * </DataToolbar>
+   * ```
+   */
+  Button: typeof DataToolbarButton;
+
+  /**
+   * @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.Button = DataToolbarButton;
+DataToolbar.ToggleButton = DataToolbarToggleButton;
+
+export {
+  DataToolbar,
+  DataToolbarSearchField,
+  DataToolbarButton,
+  DataToolbarToggleButton,
+};
+export default DataToolbar;
+export type {
+  DataToolbarProps,
+  DataToolbarSearchFieldProps,
+  DataToolbarButtonProps,
+  DataToolbarToggleButtonProps,
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { Search, type SearchProps } from "../../../form/search";
+import type { SearchNativeProps } from "../../../form/search/Search";
+
+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 (
+    <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>
+  );
+});
+
+export { DataToolbarSearchField };
+export default DataToolbarSearchField;
+export type { DataToolbarSearchFieldProps };

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, ButtonProps } from "../../../button";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+
+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 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}
+        variant="secondary"
+        size="small"
+        data-color="neutral"
+        aria-pressed={pressed}
+        onClick={composeEventHandlers(onClick, () =>
+          setPressed((oldState) => !oldState),
+        )}
+      />
+    );
+  },
+);
+
+export { DataToolbarToggleButton };
+export default DataToolbarToggleButton;
+export type { DataToolbarToggleButtonProps };

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