@entur/table 4.3.18 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.5.0...@entur/table@4.5.1) (2021-12-10)
+
+**Note:** Version bump only for package @entur/table
+
+# [4.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.4.1...@entur/table@4.5.0) (2021-11-17)
+
+### Bug Fixes
+
+- **headercell:** improve typings of props ([f8fff33](https://bitbucket.org/enturas/design-system/commits/f8fff33a6a94d1932d9d21df946ee62702ba6690))
+- **useSortableTable:** apply focus styling for sortable HeaderCells ([cf481eb](https://bitbucket.org/enturas/design-system/commits/cf481eb8528c056e3e07ab8e37b94e374d1ca5d7))
+
+### Features
+
+- **usesortabletable:** add buttonProps to getSortableeHeaderProps ([a5f3d48](https://bitbucket.org/enturas/design-system/commits/a5f3d48518f2ab729a91df0c58e367279fbdaa69))
+
+## [4.4.1](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.4.0...@entur/table@4.4.1) (2021-10-25)
+
+### Bug Fixes
+
+- **tablebody:** fix typing for ref prop ([fe133f2](https://bitbucket.org/enturas/design-system/commits/fe133f25f882d39b682baf6fb3b214305ac75dfc))
+
+# [4.4.0](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.3.18...@entur/table@4.4.0) (2021-10-18)
+
+### Bug Fixes
+
+- **sortable table:** fix sort icon position on small and middle table ([f57062f](https://bitbucket.org/enturas/design-system/commits/f57062f6753df1cdba8cd3ba1290e5b1b1f6c724))
+- improve useTableKeyboardNavigation ([2d112cf](https://bitbucket.org/enturas/design-system/commits/2d112cf263a73f9c4ad9dcbaa20db6be27829702))
+- **expand row button:** fix focus styling ([9d94b9c](https://bitbucket.org/enturas/design-system/commits/9d94b9c0bb7b44f881cd769694491d294874988c))
+- **tablebody:** improve typings ([729f69d](https://bitbucket.org/enturas/design-system/commits/729f69d733df82f75bbc010a35757f5bd6c9af06))
+- **tablerow:** export props for component ([8119df0](https://bitbucket.org/enturas/design-system/commits/8119df03209d33603335fd744866bfbee6b0d4c7))
+
+### Features
+
+- add hook for enabling keyboard navigation in tables ([cd7ef12](https://bitbucket.org/enturas/design-system/commits/cd7ef12474810aa813a275804e2356b26814c56f))
+
 ## [4.3.18](https://bitbucket.org/enturas/design-system/compare/@entur/table@4.3.17...@entur/table@4.3.18) (2021-09-23)
 
 **Note:** Version bump only for package @entur/table

package/dist/HeaderCell.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './HeaderCell.scss';
+import { ExternalSortConfig } from '.';
 export declare type HeaderCellProps = {
     /** Kolonneoverskrift */
     children: React.ReactNode;
@@ -7,6 +8,15 @@ export declare type HeaderCellProps = {
     className?: string;
     /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */
     padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
-    [key: string]: any;
-};
-export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<HeaderCellProps, React.ReactText> & React.RefAttributes<HTMLTableHeaderCellElement>>;
+    /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */
+    sortableButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /** Om komponenten brukes til sortering. Benytt via useSortableTable
+     * @default false
+     */
+    sortable?: boolean;
+    /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */
+    sortConfig?: ExternalSortConfig;
+    /** Navnet det skal sorteres på. Benyttes via useSortableTable */
+    name?: string;
+} & React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
+export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<HeaderCellProps, "className" | "children" | "name" | "sortable" | "sortConfig" | "padding" | "sortableButtonProps" | "key" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "abbr" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/TableBody.d.ts

@@ -4,6 +4,6 @@ export declare type TableBodyProps = {
     children: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
-    [key: string]: any;
-};
-export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, React.ReactText> & React.RefAttributes<HTMLTableSectionElement>>;
+    ref?: React.Ref<HTMLTableSectionElement>;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
+export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "className" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/TableRow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type TableRowProps = {
+export declare type TableRowProps = {
     /** Tabellceller */
     children: React.ReactNode;
     /** Ekstra klassenavn */
@@ -16,6 +16,6 @@ declare type TableRowProps = {
      * @default false
      */
     error?: boolean;
+    ref?: React.Ref<HTMLTableRowElement>;
 } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
 export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "className" | "hover" | "active" | "error" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLTableRowElement>>;
-export {};

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export * from './useSortableTable';
 export * from './EditableCell';
 export * from './ExpandableRow';
 export * from './ExpandRowButton';
+export * from './useTableKeyboardNavigation';

package/dist/styles.css

@@ -22,10 +22,16 @@
   padding: 0.5rem 1rem;
   height: 3rem;
 }
+.eds-table--middle .eds-table__data-cell .eds-table__header-cell-button-icon, .eds-table--middle .eds-table__header-cell .eds-table__header-cell-button-icon {
+  top: 0.5rem;
+}
 .eds-table--small .eds-table__data-cell, .eds-table--small .eds-table__header-cell {
   padding: 0.25rem 1rem;
   height: 2rem;
 }
+.eds-table--small .eds-table__data-cell .eds-table__header-cell-button-icon, .eds-table--small .eds-table__header-cell .eds-table__header-cell-button-icon {
+  top: 0.25rem;
+}
 .eds-table__header-cell {
   padding-top: 0;
 }
@@ -88,6 +94,9 @@
 .eds-contrast .eds-table__body > .eds-table__row {
   border-color: #393d79;
 }
+.eds-table__body > .eds-table__row:focus {
+  outline: 2px solid #181c56;
+}
 .eds-table__body > .eds-table__row--hover:hover {
   background: #f3f3f3;
 }
@@ -205,28 +214,6 @@
   padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-expand-row-button {
-  background: none;
-  border: none;
-  font-family: inherit;
-  cursor: pointer;
-  padding: 0.25rem;
-}
-.eds-expand-row-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-expand-row-button:focus {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-expand-row-button--open .eds-expand-row-button__icon {
-  transform: rotate(90deg);
-}
-.eds-expand-row-button__icon {
-  transition: transform ease-in-out 0.2s;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-table__header-cell {
   color: #656782;
   font-size: 0.875rem;
@@ -267,4 +254,37 @@
   position: absolute;
   top: 0.75rem;
   margin-left: 0.25rem;
+}
+.eds-table__header-cell-button:focus {
+  outline: 2px solid #181c56;
+}
+.eds-contrast .eds-table__header-cell-button:focus {
+  outline: 2px solid #ffffff;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-expand-row-button {
+  background: #ffffff;
+  border: none;
+  border-radius: 50%;
+  font-family: inherit;
+  cursor: pointer;
+  height: 1.5rem;
+  width: 1.5rem;
+  padding: 0.25rem;
+}
+.eds-expand-row-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+}
+.eds-contrast .eds-expand-row-button:focus {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-expand-row-button {
+  background: #181c56;
+}
+.eds-expand-row-button--open .eds-expand-row-button__icon {
+  transform: rotate(90deg);
+}
+.eds-expand-row-button__icon {
+  transition: transform ease-in-out 0.2s;
 }

package/dist/table.cjs.development.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var utils = require('@entur/utils');
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var icons = require('@entur/icons');
 var get = _interopDefault(require('lodash.get'));
@@ -46,7 +47,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Table = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
       _ref$fixed = _ref.fixed,
       fixed = _ref$fixed === void 0 ? false : _ref$fixed,
@@ -56,7 +57,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       sortable = _ref$sortable === void 0 ? false : _ref$sortable,
       rest = _objectWithoutPropertiesLoose(_ref, ["className", "fixed", "spacing", "sortable"]);
 
-  return React.createElement("table", Object.assign({
+  return React__default.createElement("table", Object.assign({
     className: classNames('eds-table', {
       'eds-table--fixed': fixed
     }, {
@@ -70,35 +71,35 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest));
 });
 
-var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TableHead = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, ["className"]);
 
-  return React.createElement("thead", Object.assign({
+  return React__default.createElement("thead", Object.assign({
     className: classNames('eds-table__head', className),
     ref: ref
   }, props));
 });
 
-var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TableBody = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, ["className"]);
 
-  return React.createElement("tbody", Object.assign({
+  return React__default.createElement("tbody", Object.assign({
     className: classNames('eds-table__body', className),
     ref: ref
   }, rest));
 });
 
-var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TableFooter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var props = _extends({}, _ref);
 
-  return React.createElement("tfoot", Object.assign({
+  return React__default.createElement("tfoot", Object.assign({
     ref: ref
   }, props));
 });
 
-var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TableRow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
       _ref$hover = _ref.hover,
       hover = _ref$hover === void 0 ? false : _ref$hover,
@@ -108,7 +109,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       error = _ref$error === void 0 ? false : _ref$error,
       rest = _objectWithoutPropertiesLoose(_ref, ["className", "hover", "active", "error"]);
 
-  return React.createElement("tr", Object.assign({
+  return React__default.createElement("tr", Object.assign({
     className: classNames('eds-table__row', className, {
       'eds-table__row--hover': hover,
       'eds-table__row--active': active,
@@ -118,7 +119,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest));
 });
 
-var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var DataCell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _classNames;
 
   var className = _ref.className,
@@ -128,33 +129,33 @@ var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       status = _ref$status === void 0 ? undefined : _ref$status,
       rest = _objectWithoutPropertiesLoose(_ref, ["className", "padding", "status"]);
 
-  return React.createElement("td", Object.assign({
+  return React__default.createElement("td", Object.assign({
     ref: ref,
     className: classNames('eds-table__data-cell', className, (_classNames = {}, _classNames["eds-table__data-cell--status-" + status] = status, _classNames['eds-table__data-cell--padding-checkbox'] = padding === 'checkbox', _classNames['eds-table__data-cell--padding-radio'] = padding === 'radio', _classNames['eds-table__data-cell--padding-overflow-menu'] = padding === 'overflow-menu', _classNames))
   }, rest));
 });
 
-var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var HeaderCell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
-      onClick = _ref.onClick,
       name = _ref.name,
       _ref$sortable = _ref.sortable,
       sortable = _ref$sortable === void 0 ? false : _ref$sortable,
       sortConfig = _ref.sortConfig,
       _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? 'default' : _ref$padding,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "onClick", "name", "sortable", "sortConfig", "padding"]);
+      sortableButtonProps = _ref.sortableButtonProps,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps"]);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React__default.useState(false),
       isCurrentlySorted = _React$useState[0],
       setIsCurrentlySorted = _React$useState[1];
 
-  React.useEffect(function () {
-    setIsCurrentlySorted(sortConfig && name === sortConfig.key);
+  React__default.useEffect(function () {
+    sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
   }, [sortConfig, name]);
   var ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : 'none';
-  return React.createElement("th", Object.assign({
+  return React__default.createElement("th", Object.assign({
     className: classNames('eds-table__header-cell', className, {
       'eds-table__header-cell--sortable': sortable,
       'eds-table__header-cell--padding-radio': padding === 'radio',
@@ -163,18 +164,33 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     "aria-sort": ariaSort,
     ref: ref
-  }, rest), sortable ? React.createElement("button", {
-    className: "eds-table__header-cell-button",
-    type: "button",
-    onClick: onClick
-  }, children, isCurrentlySorted && sortConfig.order === 'ascending' && React.createElement(icons.UpArrowIcon, {
+  }, rest), sortable && sortConfig && sortableButtonProps ? React__default.createElement(SortableHeaderCellButton, {
+    sortableButtonProps: sortableButtonProps,
+    sortConfig: sortConfig,
+    isCurrentlySorted: isCurrentlySorted
+  }, children) : children);
+});
+
+var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
+  var sortConfig = _ref2.sortConfig,
+      sortableButtonProps = _ref2.sortableButtonProps,
+      isCurrentlySorted = _ref2.isCurrentlySorted,
+      children = _ref2.children;
+
+  var className = sortableButtonProps.className,
+      rest = _objectWithoutPropertiesLoose(sortableButtonProps, ["className"]);
+
+  return React__default.createElement("button", Object.assign({
+    className: classNames('eds-table__header-cell-button', className),
+    type: "button"
+  }, rest), children, isCurrentlySorted && sortConfig.order === 'ascending' && React__default.createElement(icons.UpArrowIcon, {
     size: "16px",
     className: "eds-table__header-cell-button-icon"
-  }), isCurrentlySorted && sortConfig.order === 'descending' && React.createElement(icons.DownArrowIcon, {
+  }), isCurrentlySorted && sortConfig.order === 'descending' && React__default.createElement(icons.DownArrowIcon, {
     size: "16px",
     className: "eds-table__header-cell-button-icon"
-  })) : children);
-});
+  }));
+};
 
 function useSortableData(rawData, externalSortConfig) {
   if (externalSortConfig === void 0) {
@@ -184,18 +200,18 @@ function useSortableData(rawData, externalSortConfig) {
     };
   }
 
-  var _React$useState = React.useState(externalSortConfig),
+  var _React$useState = React__default.useState(externalSortConfig),
       sortConfig = _React$useState[0],
       setSortConfig = _React$useState[1];
 
   var tableCopy = rawData.slice();
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     setSortConfig({
       key: externalSortConfig.key,
       order: externalSortConfig.order
     });
   }, [externalSortConfig.key, externalSortConfig.order]);
-  var sortedData = React.useMemo(function () {
+  var sortedData = React__default.useMemo(function () {
     if (sortConfig.order === 'none') {
       return tableCopy;
     }
@@ -230,15 +246,18 @@ function useSortableData(rawData, externalSortConfig) {
     var name = _ref.name,
         _ref$sortable = _ref.sortable,
         sortable = _ref$sortable === void 0 ? true : _ref$sortable,
-        props = _objectWithoutPropertiesLoose(_ref, ["name", "sortable"]);
+        buttonProps = _ref.buttonProps,
+        props = _objectWithoutPropertiesLoose(_ref, ["name", "sortable", "buttonProps"]);
 
     return _extends({
       name: name,
       sortable: sortable,
-      onClick: function onClick() {
-        return onSortRequested(name);
-      },
-      sortConfig: sortConfig
+      sortConfig: sortConfig,
+      sortableButtonProps: _extends({
+        onClick: function onClick() {
+          return onSortRequested(name);
+        }
+      }, buttonProps)
     }, props);
   }
 
@@ -269,13 +288,13 @@ var EditableCell = function EditableCell(_ref) {
       outlined = _ref$outlined === void 0 ? false : _ref$outlined,
       rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "feedback", "variant", "outlined"]);
 
-  return React.createElement(form.VariantProvider, {
+  return React__default.createElement(form.VariantProvider, {
     variant: variant
-  }, React.createElement(DataCell, Object.assign({
+  }, React__default.createElement(DataCell, Object.assign({
     className: classNames('eds-editable-cell', {
       'eds-editable-cell--outlined': outlined
     }, className)
-  }, rest), React.createElement(tooltip.Tooltip, {
+  }, rest), React__default.createElement(tooltip.Tooltip, {
     disableHoverListener: !feedback,
     disableFocusListener: !feedback,
     placement: "bottom",
@@ -289,9 +308,9 @@ var ExpandableRow = function ExpandableRow(_ref) {
       open = _ref$open === void 0 ? false : _ref$open,
       children = _ref.children,
       colSpan = _ref.colSpan;
-  return React.createElement("tr", null, React.createElement("td", {
+  return React__default.createElement("tr", null, React__default.createElement("td", {
     colSpan: colSpan
-  }, React.createElement(expand.BaseExpand, {
+  }, React__default.createElement(expand.BaseExpand, {
     open: open
   }, children)));
 };
@@ -301,16 +320,111 @@ var ExpandRowButton = function ExpandRowButton(_ref) {
       onClick = _ref.onClick,
       rest = _objectWithoutPropertiesLoose(_ref, ["open", "onClick"]);
 
-  return React.createElement("button", Object.assign({
+  return React__default.createElement("button", Object.assign({
     className: classNames('eds-expand-row-button', {
       'eds-expand-row-button--open': open
     }),
     onClick: onClick
-  }, rest), React.createElement(icons.RightArrowIcon, {
+  }, rest), React__default.createElement(icons.RightArrowIcon, {
     className: "eds-expand-row-button__icon"
   }));
 };
 
+function onTableKeypress(event, currentRow, maxRow, allowWrap) {
+  var keyPress = event.key;
+
+  switch (keyPress) {
+    case 'ArrowUp':
+      event.preventDefault();
+
+      if (allowWrap) {
+        return currentRow === 0 ? maxRow - 1 : currentRow - 1;
+      } else {
+        return currentRow > 0 ? currentRow - 1 : 0;
+      }
+
+    case 'ArrowDown':
+      event.preventDefault();
+
+      if (allowWrap) {
+        return currentRow === maxRow - 1 ? 0 : currentRow + 1;
+      } else {
+        return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;
+      }
+
+    default:
+      return currentRow;
+  }
+}
+
+var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRows, allowWrap) {
+  var _tableBodyRef$current;
+
+  if (numberOfRows === void 0) {
+    numberOfRows = 0;
+  }
+
+  if (allowWrap === void 0) {
+    allowWrap = true;
+  }
+
+  var _useState = React.useState(numberOfRows),
+      currentRow = _useState[0],
+      setCurrentRow = _useState[1];
+
+  var _useState2 = React.useState(0),
+      maxRow = _useState2[0],
+      setMaxRow = _useState2[1];
+
+  var tableBodyRef = React__default.useRef(null);
+  var tableHasFocus = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.contains(document.activeElement);
+  React__default.useEffect(function () {
+    var _tableBodyRef$current2;
+
+    tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.focus());
+  }, [currentRow]);
+
+  function getTableBodyNavigationProps() {
+    for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
+      rest[_key] = arguments[_key];
+    }
+
+    return _extends({
+      ref: tableBodyRef
+    }, rest);
+  }
+
+  function getTableRowNavigationProps(row) {
+    React__default.useEffect(function () {
+      row >= maxRow && setMaxRow(row + 1);
+    }, []);
+    var tableRowRef = React__default.useRef(null);
+    var tabIndex = -1;
+    row === currentRow ? tabIndex = 0 : undefined;
+
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      rest[_key2 - 1] = arguments[_key2];
+    }
+
+    return _extends({
+      tabIndex: tabIndex,
+      ref: tableRowRef,
+      onClick: function onClick() {
+        return setCurrentRow(row);
+      },
+      onKeyDown: function onKeyDown(e) {
+        var newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);
+        setCurrentRow(newCell);
+      }
+    }, rest);
+  }
+
+  return {
+    getTableRowNavigationProps: getTableRowNavigationProps,
+    getTableBodyNavigationProps: getTableBodyNavigationProps
+  };
+};
+
 utils.warnAboutMissingStyles('table');
 
 exports.DataCell = DataCell;
@@ -324,4 +438,5 @@ exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableRow = TableRow;
 exports.useSortableData = useSortableData;
+exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
 //# sourceMappingURL=table.cjs.development.js.map