@navikt/ds-react 0.16.15 → 0.16.18

package/src/form/checkbox/Checkbox.tsx

@@ -23,7 +23,7 @@ export interface CheckboxProps
   /**
    * The value of the HTML element.
    */
-  value?: string | number | boolean;
+  value?: any;
   /**
    * Specify whether the Checkbox is in an indeterminate state
    * @default false

package/src/form/checkbox/CheckboxGroup.tsx

@@ -3,9 +3,9 @@ import cl from "classnames";
 import { Fieldset, FieldsetProps, FieldsetContext } from "..";
 
 export interface CheckboxGroupState {
-  readonly defaultValue?: ReadonlyArray<string | number | boolean>;
-  readonly value?: ReadonlyArray<string | number | boolean>;
-  toggleValue(value: string | number | boolean): void;
+  readonly defaultValue?: readonly any[];
+  readonly value?: readonly any[];
+  toggleValue(value: any): void;
 }
 
 export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
@@ -24,15 +24,15 @@ export interface CheckboxGroupProps
   /**
    * Controlled state for group
    */
-  value?: Array<string | number | boolean>;
+  value?: any[];
   /**
    * Default checked checkboxes on render
    */
-  defaultValue?: Array<string | number | boolean>;
+  defaultValue?: any[];
   /**
    * Returns current checked checkboxes in group
    */
-  onChange?: (value: Array<string | number | boolean>) => void;
+  onChange?: (value: any[]) => void;
 }
 
 const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
@@ -42,11 +42,9 @@ const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
   ) => {
     const fieldset = useContext(FieldsetContext);
 
-    const [state, setState] = useState<Array<string | number | boolean>>(
-      defaultValue ?? []
-    );
+    const [state, setState] = useState<any[]>(defaultValue ?? []);
 
-    const toggleValue = (v: string | number | boolean) => {
+    const toggleValue = (v: any) => {
       const newValue = value ?? state;
       const newState = newValue.includes(v)
         ? newValue.filter((x) => x !== v)

package/src/form/checkbox/useCheckbox.ts

@@ -28,21 +28,19 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
     }
   }
 
-  const value = props.value as string | number | boolean;
-
   return {
     ...rest,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
-        ? checkboxGroup.value.includes(value)
+        ? checkboxGroup.value.includes(props.value)
         : props.checked,
       defaultChecked: checkboxGroup?.defaultValue
-        ? checkboxGroup.defaultValue.includes(value)
+        ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
       onChange: (e) => {
         props.onChange && props.onChange(e);
-        checkboxGroup && checkboxGroup.toggleValue(value);
+        checkboxGroup && checkboxGroup.toggleValue(props.value);
       },
     },
   };

package/src/form/radio/Radio.tsx

@@ -14,7 +14,7 @@ export interface RadioProps
   /**
    * The value of the HTML element
    */
-  value: string | number | boolean;
+  value: any;
 }
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {

package/src/form/radio/RadioGroup.tsx

@@ -5,9 +5,9 @@ import { useId } from "../..";
 
 export interface RadioGroupContextProps {
   name: string;
-  defaultValue?: string | number | boolean;
-  value?: string | number | boolean;
-  onChange: (value: string | number | boolean) => void;
+  defaultValue?: any;
+  value?: any;
+  onChange: (value: any) => void;
   required?: boolean;
 }
 
@@ -31,15 +31,15 @@ export interface RadioGroupProps
   /**
    * Default checked radiobutton
    */
-  defaultValue?: string | number | boolean;
+  defaultValue?: any;
   /**
    * Controlled state for Radiobutton
    */
-  value?: string | number | boolean;
+  value?: any;
   /**
    * Returns current checked radiobutton in group
    */
-  onChange?: (value: string | number | boolean) => void;
+  onChange?: (value: any) => void;
   /**
    * Tells Fieldset if group is required
    */

package/src/menu/Menu.tsx

@@ -19,15 +19,15 @@ interface MenuComponent
 
 const Menu = forwardRef<HTMLElement, MenuProps>(
   ({ children, className, ...rest }, ref) => (
-      <nav
-        {...rest}
-        role="navigation"
-        ref={ref}
-        className={cl("navds-menu", className)}
-      >
-        <MenuItems>{children}</MenuItems>
-      </nav>
-    )
+    <nav
+      {...rest}
+      role="navigation"
+      ref={ref}
+      className={cl("navds-menu", className)}
+    >
+      <MenuItems>{children}</MenuItems>
+    </nav>
+  )
 ) as MenuComponent;
 
 Menu.Collapse = Collapse;

package/src/table/ColumnHeader.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, useContext } from "react";
+import { Down, Up } from "@navikt/ds-icons";
+import { TableContext } from "..";
+import HeaderCell, { HeaderCellProps } from "./HeaderCell";
+
+interface ColumnHeaderProps extends HeaderCellProps {
+  /**
+   * Key to sort by
+   */
+  sortKey?: string;
+  /**
+   * Column is sortable
+   * @default false
+   */
+  sortable?: boolean;
+}
+
+export interface ColumnHeaderType
+  extends React.ForwardRefExoticComponent<
+    ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
+  > {}
+
+const ColumnHeader: ColumnHeaderType = forwardRef(
+  ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    if (sortable && !sortKey) {
+      console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+    }
+
+    return (
+      <HeaderCell
+        scope="col"
+        ref={ref}
+        className={className}
+        aria-sort={
+          sortable
+            ? context?.sort?.orderBy === sortKey
+              ? context?.sort?.direction
+              : "none"
+            : undefined
+        }
+        {...rest}
+      >
+        {sortable ? (
+          <button
+            className="navds-table__sort-button"
+            onClick={
+              sortable && sortKey
+                ? () => context?.onSortChange?.(sortKey)
+                : undefined
+            }
+          >
+            {children}
+            {context?.sort?.orderBy === sortKey &&
+            context?.sort?.direction === "descending" ? (
+              <Down aria-label="sorter synkende" />
+            ) : (
+              <Up aria-label="sorter stigende" />
+            )}
+          </button>
+        ) : (
+          children
+        )}
+      </HeaderCell>
+    );
+  }
+);
+
+export default ColumnHeader;

package/src/table/DataCell.tsx

@@ -3,7 +3,13 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 
-interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
+interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
+}
 
 export interface DataCellType
   extends React.ForwardRefExoticComponent<
@@ -11,14 +17,16 @@ export interface DataCellType
   > {}
 
 const DataCell: DataCellType = forwardRef(
-  ({ className, children = "", ...rest }, ref) => {
+  ({ className, children = "", align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <BodyShort
         as="td"
         ref={ref}
-        className={cl("navds-table__data-cell", className)}
+        className={cl("navds-table__data-cell", className, {
+          [`navds-table__data-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/HeaderCell.tsx

@@ -2,8 +2,14 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface HeaderCellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
 }
 
 export interface HeaderCellType
@@ -12,14 +18,16 @@ export interface HeaderCellType
   > {}
 
 const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, ...rest }, ref) => {
+  ({ className, children, align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <Label
         as="th"
         ref={ref}
-        className={cl("navds-table__header-cell", className)}
+        className={cl("navds-table__header-cell", className, {
+          [`navds-table__header-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/Table.tsx

@@ -3,9 +3,15 @@ import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
 import Row, { RowType } from "./Row";
+import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
 
+export interface SortState {
+  orderBy: string;
+  direction: "ascending" | "descending";
+}
+
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
@@ -18,6 +24,14 @@ export interface TableProps
    * @default false
    */
   zebraStripes?: boolean;
+  /**
+   * Sort state
+   */
+  sort?: SortState;
+  /**
+   * Callback whens sort state changes
+   */
+  onSortChange?: (sortKey?: string) => void;
 }
 
 export interface TableType
@@ -29,17 +43,30 @@ export interface TableType
   Row: RowType;
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
+  ColumnHeader: ColumnHeaderType;
 }
 
 export interface TableContextProps {
   size: "medium" | "small";
+  onSortChange?: (sortKey: string) => void;
+  sort?: SortState;
 }
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
 const Table = forwardRef(
-  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
-    <TableContext.Provider value={{ size }}>
+  (
+    {
+      className,
+      zebraStripes = false,
+      size = "medium",
+      onSortChange,
+      sort,
+      ...rest
+    },
+    ref
+  ) => (
+    <TableContext.Provider value={{ size, onSortChange, sort }}>
       <table
         {...rest}
         ref={ref}
@@ -54,6 +81,7 @@ const Table = forwardRef(
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
+Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;