@entur/table 4.6.16 → 4.6.18

package/dist/DataCell.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export type DataCellProps = {
-    /** Innholdet i tabellcellen */
-    children: React.ReactNode;
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Størrelse som settes for DataCell for ulikt innhold av komponenter */
-    padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
-    /** Viser en status-sirkel for DataCell */
-    status?: 'positive' | 'negative' | 'neutral';
-} & React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
-export declare const DataCell: React.ForwardRefExoticComponent<Pick<DataCellProps, "padding" | "status" | "key" | keyof React.TdHTMLAttributes<HTMLTableDataCellElement>> & React.RefAttributes<HTMLTableDataCellElement>>;
+import React from 'react';
+export type DataCellProps = {
+    /** Innholdet i tabellcellen */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Størrelse som settes for DataCell for ulikt innhold av komponenter */
+    padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
+    /** Viser en status-sirkel for DataCell */
+    status?: 'positive' | 'negative' | 'neutral';
+} & React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
+export declare const DataCell: React.ForwardRefExoticComponent<Omit<DataCellProps, "ref"> & React.RefAttributes<HTMLTableDataCellElement>>;

package/dist/EditableCell.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-import { VariantType } from '@entur/form';
-import './EditableCell.scss';
-type EditableCellProps = {
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Inputelementet som skal være i tabellcellen */
-    children: React.ReactElement;
-    /** Valideringsvariant for EditableCell */
-    variant?: VariantType;
-    /** Varselmelding, som vil komme som en Tooltip under EditableCell */
-    feedback?: string;
-    /** Om cellen skal vise omriss til enhver tid
-     * @default false
-     */
-    outlined?: boolean;
-    [key: string]: any;
-};
-export declare const EditableCell: React.FC<EditableCellProps>;
-export {};
+import React from 'react';
+import { VariantType } from '@entur/form';
+import './EditableCell.scss';
+type EditableCellProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Inputelementet som skal være i tabellcellen */
+    children: React.ReactElement;
+    /** Valideringsvariant for EditableCell */
+    variant?: VariantType;
+    /** Varselmelding, som vil komme som en Tooltip under EditableCell */
+    feedback?: string;
+    /** Om cellen skal vise omriss til enhver tid
+     * @default false
+     */
+    outlined?: boolean;
+    [key: string]: any;
+};
+export declare const EditableCell: React.FC<EditableCellProps>;
+export {};

package/dist/ExpandRowButton.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import './ExpandRowButton.scss';
-export type ExpandRowButtonProps = {
-    open: boolean;
-    onClick: (e: React.MouseEvent) => void;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const ExpandRowButton: React.FC<ExpandRowButtonProps>;
+import React from 'react';
+import './ExpandRowButton.scss';
+export type ExpandRowButtonProps = {
+    open: boolean;
+    onClick: (e: React.MouseEvent) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const ExpandRowButton: React.FC<ExpandRowButtonProps>;

package/dist/ExpandableRow.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export type ExpandableRowProps = {
-    /** Antall kolonner tabellraden er */
-    colSpan: number;
-    /** Innholdet til ExpandableRow */
-    children: React.ReactNode;
-    /** Om ExpandableRow er åpen
-     * @default false
-     */
-    open?: boolean;
-};
-export declare const ExpandableRow: React.FC<ExpandableRowProps>;
+import React from 'react';
+export type ExpandableRowProps = {
+    /** Antall kolonner tabellraden er */
+    colSpan: number;
+    /** Innholdet til ExpandableRow */
+    children: React.ReactNode;
+    /** Om ExpandableRow er åpen
+     * @default false
+     */
+    open?: boolean;
+};
+export declare const ExpandableRow: React.FC<ExpandableRowProps>;

package/dist/HeaderCell.d.ts

@@ -1,24 +1,24 @@
-import React from 'react';
-import { ExternalSortConfig } from '.';
-import './HeaderCell.scss';
-export type HeaderCellProps = {
-    /** Kolonneoverskrift */
-    children: React.ReactNode;
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */
-    padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
-    /** 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;
-    sortedAscendingAriaLabel?: string;
-    sortedDescendingAriaLabel?: string;
-} & React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
-export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<HeaderCellProps, "name" | "sortable" | "sortConfig" | "padding" | "sortableButtonProps" | "sortedAscendingAriaLabel" | "sortedDescendingAriaLabel" | "key" | keyof React.ThHTMLAttributes<HTMLTableCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
+import React from 'react';
+import { ExternalSortConfig } from '.';
+import './HeaderCell.scss';
+export type HeaderCellProps = {
+    /** Kolonneoverskrift */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */
+    padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
+    /** 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;
+    sortedAscendingAriaLabel?: string;
+    sortedDescendingAriaLabel?: string;
+} & React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
+export declare const HeaderCell: React.ForwardRefExoticComponent<Omit<HeaderCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/Table.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-export type TableProps = {
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet
-     * @default "default"
-     */
-    spacing?: 'default' | 'middle' | 'small';
-    /** Setter kolonne-layout til å være uavhengig av innhold
-     * @default false
-     */
-    fixed?: boolean;
-    /** Om header-raden skal bli værende på skjermen når man skroller tabellen
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /** Innholdet i tabellen */
-    children: React.ReactNode;
-    [key: string]: any;
-};
-export declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, keyof TableProps> & React.RefAttributes<HTMLTableElement>>;
+import React from 'react';
+export type TableProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet
+     * @default "default"
+     */
+    spacing?: 'default' | 'middle' | 'small';
+    /** Setter kolonne-layout til å være uavhengig av innhold
+     * @default false
+     */
+    fixed?: boolean;
+    /** Om header-raden skal bli værende på skjermen når man skroller tabellen
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /** Innholdet i tabellen */
+    children: React.ReactNode;
+    [key: string]: any;
+};
+export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>;

package/dist/TableBody.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export type TableBodyProps = {
-    /** Tabellrader */
-    children: React.ReactNode;
-    /** Ekstra klassenavn */
-    className?: string;
-    ref?: React.Ref<HTMLTableSectionElement>;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
-export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
+import React from 'react';
+export type TableBodyProps = {
+    /** Tabellrader */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    ref?: React.Ref<HTMLTableSectionElement>;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
+export declare const TableBody: React.ForwardRefExoticComponent<Omit<TableBodyProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/TableFooter.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export type TableFooterProps = {
-    /** Tabellrader */
-    children: React.ReactNode;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
-export declare const TableFooter: React.ForwardRefExoticComponent<Pick<TableFooterProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
+import React from 'react';
+export type TableFooterProps = {
+    /** Tabellrader */
+    children: React.ReactNode;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
+export declare const TableFooter: React.ForwardRefExoticComponent<Omit<TableFooterProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/TableHead.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-export type TableHeadProps = {
-    /** Kolonneoverskrifter */
-    children: React.ReactNode;
-    /** Esktra klassenavn */
-    className?: string;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
-export declare const TableHead: React.ForwardRefExoticComponent<Pick<TableHeadProps, "key" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
+import React from 'react';
+export type TableHeadProps = {
+    /** Kolonneoverskrifter */
+    children: React.ReactNode;
+    /** Esktra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<TableHeadProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/TableRow.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-export type TableRowProps = {
-    /** Tabellceller */
-    children: React.ReactNode;
-    /** Ekstra klassenavn */
-    className?: string;
-    /**Hvis satt, så vil tabellraden endre fargen ved hover
-     * @default false
-     */
-    hover?: boolean;
-    /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet
-     * @default false
-     */
-    active?: boolean;
-    /**Signalisere om at det er en feil i tabellraden
-     * @default false
-     */
-    error?: boolean;
-    ref?: React.Ref<HTMLTableRowElement>;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
-export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "hover" | "active" | "error" | "key" | keyof React.HTMLAttributes<HTMLTableRowElement>> & React.RefAttributes<HTMLTableRowElement>>;
+import React from 'react';
+export type TableRowProps = {
+    /** Tabellceller */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /**Hvis satt, så vil tabellraden endre fargen ved hover
+     * @default false
+     */
+    hover?: boolean;
+    /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet
+     * @default false
+     */
+    active?: boolean;
+    /**Signalisere om at det er en feil i tabellraden
+     * @default false
+     */
+    error?: boolean;
+    ref?: React.Ref<HTMLTableRowElement>;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-import './index.scss';
-export * from './Table';
-export * from './TableHead';
-export * from './TableBody';
-export * from './TableFooter';
-export * from './TableRow';
-export * from './DataCell';
-export * from './HeaderCell';
-export * from './useSortableTable';
-export * from './EditableCell';
-export * from './ExpandableRow';
-export * from './ExpandRowButton';
-export * from './useTableKeyboardNavigation';
+import './index.scss';
+export * from './Table';
+export * from './TableHead';
+export * from './TableBody';
+export * from './TableFooter';
+export * from './TableRow';
+export * from './DataCell';
+export * from './HeaderCell';
+export * from './useSortableTable';
+export * from './EditableCell';
+export * from './ExpandableRow';
+export * from './ExpandRowButton';
+export * from './useTableKeyboardNavigation';

package/dist/styles.css

@@ -1,123 +1,5 @@
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-:root {
-  --eds-table: 1;
-}
-
-.eds-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-.eds-table--fixed {
-  table-layout: fixed;
-}
-.eds-table--sticky-header {
-  position: relative;
-}
-.eds-table__data-cell {
-  height: 3.75rem;
-  padding: 1rem 1.5rem;
-}
-.eds-contrast .eds-table__data-cell {
-  border-bottom-color: #393d79;
-}
-.eds-table--middle .eds-table__data-cell {
-  padding: 0.5rem 1rem;
-  height: 3rem;
-}
-.eds-table--small .eds-table__data-cell {
-  padding: 0.25rem 1rem;
-  height: 2rem;
-}
-.eds-table__data-cell--padding-checkbox {
-  width: 3rem;
-  padding: 0.5rem 0 0.75rem 1.25rem;
-}
-.eds-table__data-cell--padding-radio {
-  width: 3rem;
-  padding: 1rem 0 1rem 1.25rem;
-}
-.eds-table__data-cell--padding-overflow-menu {
-  width: 3rem;
-  padding: 1rem 0.75rem;
-}
-.eds-table__data-cell[class*=eds-table__data-cell--status] {
-  position: relative;
-}
-.eds-table__data-cell[class*=eds-table__data-cell--status]:before {
-  left: 0;
-  top: 1.3125rem;
-  content: "";
-  position: absolute;
-  height: 0.625rem;
-  width: 0.625rem;
-  border-radius: 50%;
-}
-.eds-table--small .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
-  top: 0.5625rem;
-}
-.eds-table--middle .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
-  top: 0.8125rem;
-}
-.eds-table__data-cell--status-positive:before {
-  background: #1a8e60;
-}
-.eds-contrast .eds-table__data-cell--status-positive:before {
-  background: #5ac39a;
-}
-.eds-table__data-cell--status-negative:before {
-  background: #d31b1b;
-}
-.eds-contrast .eds-table__data-cell--status-negative:before {
-  background: #ff9494;
-}
-.eds-table__data-cell--status-neutral:before {
-  background: #d1d3d3;
-}
-.eds-contrast .eds-table__data-cell--status-neutral:before {
-  background: #babbcf;
-}
-.eds-table__body > .eds-table__row {
-  border-bottom: 0.125rem solid #e9e9e9;
-}
-.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;
-}
-.eds-contrast .eds-table__body > .eds-table__row--hover:hover {
-  background: #292b6a;
-}
-.eds-table__body > .eds-table__row--active {
-  background: #ebebf1;
-  border: 0.125rem solid #d1d4e3;
-}
-.eds-contrast .eds-table__body > .eds-table__row--active {
-  border-color: #393d79;
-  background: #393d79;
-}
-.eds-table__body > .eds-table__row--error {
-  background: #ffcece;
-  border-color: #ff9494;
-}
-.eds-table__head {
-  border-bottom: 0.125rem solid #e9e9e9;
-}
-.eds-contrast .eds-table__head {
-  border-color: #393d79;
-}
-.eds-table--sticky-header--active .eds-table__head {
-  position: sticky;
-  top: 0;
-  box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.15);
-  border-bottom: none;
-}
-/* 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;
@@ -187,14 +69,6 @@
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-expand-row-button__icon {
-  transition: transform ease-in-out 0.2s;
-}
-.eds-expand-row-button--open .eds-expand-row-button__icon {
-  transform: rotate(180deg);
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-editable-cell {
   padding: 0.25rem 0.75rem;
 }
@@ -310,3 +184,129 @@
 .eds-table--small .eds-editable-cell .eds-form-control-wrapper .eds-form-control {
   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__icon {
+  transition: transform ease-in-out 0.2s;
+}
+.eds-expand-row-button--open .eds-expand-row-button__icon {
+  transform: rotate(180deg);
+}
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+:root {
+  --eds-table: 1;
+}
+
+.eds-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.eds-table--fixed {
+  table-layout: fixed;
+}
+.eds-table--sticky-header {
+  position: relative;
+}
+.eds-table__data-cell {
+  height: 3.75rem;
+  padding: 1rem 1.5rem;
+}
+.eds-contrast .eds-table__data-cell {
+  border-bottom-color: #393d79;
+}
+.eds-table--middle .eds-table__data-cell {
+  padding: 0.5rem 1rem;
+  height: 3rem;
+}
+.eds-table--small .eds-table__data-cell {
+  padding: 0.25rem 1rem;
+  height: 2rem;
+}
+.eds-table__data-cell--padding-checkbox {
+  width: 3rem;
+  padding: 0.5rem 0 0.75rem 1.25rem;
+}
+.eds-table__data-cell--padding-radio {
+  width: 3rem;
+  padding: 1rem 0 1rem 1.25rem;
+}
+.eds-table__data-cell--padding-overflow-menu {
+  width: 3rem;
+  padding: 1rem 0.75rem;
+}
+.eds-table__data-cell[class*=eds-table__data-cell--status] {
+  position: relative;
+}
+.eds-table__data-cell[class*=eds-table__data-cell--status]:before {
+  left: 0;
+  top: 1.3125rem;
+  content: "";
+  position: absolute;
+  height: 0.625rem;
+  width: 0.625rem;
+  border-radius: 50%;
+}
+.eds-table--small .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
+  top: 0.5625rem;
+}
+.eds-table--middle .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
+  top: 0.8125rem;
+}
+.eds-table__data-cell--status-positive:before {
+  background: #1a8e60;
+}
+.eds-contrast .eds-table__data-cell--status-positive:before {
+  background: #5ac39a;
+}
+.eds-table__data-cell--status-negative:before {
+  background: #d31b1b;
+}
+.eds-contrast .eds-table__data-cell--status-negative:before {
+  background: #ff9494;
+}
+.eds-table__data-cell--status-neutral:before {
+  background: #d1d3d3;
+}
+.eds-contrast .eds-table__data-cell--status-neutral:before {
+  background: #babbcf;
+}
+.eds-table__body > .eds-table__row {
+  border-bottom: 0.125rem solid #e9e9e9;
+}
+.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;
+}
+.eds-contrast .eds-table__body > .eds-table__row--hover:hover {
+  background: #292b6a;
+}
+.eds-table__body > .eds-table__row--active {
+  background: #ebebf1;
+  border: 0.125rem solid #d1d4e3;
+}
+.eds-contrast .eds-table__body > .eds-table__row--active {
+  border-color: #393d79;
+  background: #393d79;
+}
+.eds-table__body > .eds-table__row--error {
+  background: #ffcece;
+  border-color: #ff9494;
+}
+.eds-table__head {
+  border-bottom: 0.125rem solid #e9e9e9;
+}
+.eds-contrast .eds-table__head {
+  border-color: #393d79;
+}
+.eds-table--sticky-header--active .eds-table__head {
+  position: sticky;
+  top: 0;
+  box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.15);
+  border-bottom: none;
+}