@entur/table 4.5.0 → 4.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/DataCell.d.ts +1 -1
- package/dist/HeaderCell.d.ts +1 -1
- package/dist/Table.d.ts +1 -1
- package/dist/TableBody.d.ts +1 -1
- package/dist/TableFooter.d.ts +1 -1
- package/dist/TableHead.d.ts +1 -1
- package/dist/TableRow.d.ts +1 -1
- package/dist/styles.css +48 -48
- package/dist/table.cjs.development.js +77 -63
- package/dist/table.cjs.development.js.map +1 -1
- package/dist/table.cjs.production.min.js +1 -1
- package/dist/table.cjs.production.min.js.map +1 -1
- package/dist/table.esm.js +34 -23
- package/dist/table.esm.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.cjs.development.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useSortableTable.ts","../src/EditableCell.tsx","../src/ExpandableRow.tsx","../src/ExpandRowButton.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon, UpArrowIcon } from '@entur/icons';\nimport './HeaderCell.scss';\nimport { ExternalSortConfig } from '.';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n </button>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { RightArrowIcon } from '@entur/icons';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <button\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n {...rest}\n >\n <RightArrowIcon className=\"eds-expand-row-button__icon\" />\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n React.useEffect(() => {\n row >= maxRow && setMaxRow(row + 1);\n }, []);\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n\n let tabIndex = -1;\n row === currentRow ? (tabIndex = 0) : undefined;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n"],"names":["Table","React","forwardRef","ref","className","fixed","spacing","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","hover","active","error","DataCell","padding","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UpArrowIcon","size","DownArrowIcon","useSortableData","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","onSortRequested","getSortableHeaderProps","buttonProps","onClick","getSortableTableProps","EditableCell","feedback","variant","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","ExpandableRow","open","colSpan","BaseExpand","ExpandRowButton","RightArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","keyPress","preventDefault","useTableKeyboardNavigation","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","contains","document","activeElement","childNodes","parentElement","focus","getTableBodyNavigationProps","getTableRowNavigationProps","row","tableRowRef","tabIndex","onKeyDown","e","newCell","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.cjs.development.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useSortableTable.ts","../src/EditableCell.tsx","../src/ExpandableRow.tsx","../src/ExpandRowButton.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon, UpArrowIcon } from '@entur/icons';\nimport './HeaderCell.scss';\nimport { ExternalSortConfig } from '.';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n </button>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { RightArrowIcon } from '@entur/icons';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <button\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n {...rest}\n >\n <RightArrowIcon className=\"eds-expand-row-button__icon\" />\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n React.useEffect(() => {\n row >= maxRow && setMaxRow(row + 1);\n }, []);\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n\n let tabIndex = -1;\n row === currentRow ? (tabIndex = 0) : undefined;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n"],"names":["Table","React","forwardRef","ref","className","fixed","spacing","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","hover","active","error","DataCell","padding","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UpArrowIcon","size","DownArrowIcon","useSortableData","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","onSortRequested","getSortableHeaderProps","buttonProps","onClick","getSortableTableProps","EditableCell","feedback","variant","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","ExpandableRow","open","colSpan","BaseExpand","ExpandRowButton","RightArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","keyPress","preventDefault","useTableKeyboardNavigation","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","contains","document","activeElement","childNodes","parentElement","focus","getTableBodyNavigationProps","getTableRowNavigationProps","row","tableRowRef","tabIndex","onKeyDown","e","newCell","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkBaA,KAAK,gBAAGC,yBAAK,CAACC,UAAN,CACnB,gBAQEC,GARF;MAEIC,iBAAAA;wBACAC;MAAAA,gCAAQ;0BACRC;MAAAA,oCAAU;2BACVC;MAAAA,sCAAW;MACRC;;AAIL,SACEP,uCAAA,QAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CACnB,WADmB,EAEnB;AAAE,0BAAoBJ;AAAtB,KAFmB,EAGnB;AAAE,2BAAqBC,OAAO,KAAK;AAAnC,KAHmB,EAInB;AAAE,0BAAoBA,OAAO,KAAK;AAAlC,KAJmB,EAKnB;AAAE,6BAAuBC;AAAzB,KALmB,EAMnBH,SANmB,CADvB;AASED,IAAAA,GAAG,EAAEA;AATP,KAUMK,IAVN,EADF;AAcD,CAzBkB;;;ICLRE,SAAS,gBAAGT,yBAAK,CAACC,UAAN,CAGvB,gBAA0BC,GAA1B;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,MAAiBO,KAAjB;;AAAA,SACAV,uCAAA,QAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,iBAAD,EAAoBL,SAApB,CADvB;AAEED,IAAAA,GAAG,EAAEA;AAFP,KAGMQ,KAHN,EADA;AAAA,CAHuB;;;ICCZC,SAAS,gBAAGX,yBAAK,CAACC,UAAN,CAGvB,gBAAyBC,GAAzB;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,MAAiBI,IAAjB;;AAAA,SACAP,uCAAA,QAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,iBAAD,EAAoBL,SAApB,CADvB;AAEED,IAAAA,GAAG,EAAEA;AAFP,KAGMK,IAHN,EADA;AAAA,CAHuB;;ICJZK,WAAW,gBAAGZ,yBAAK,CAACC,UAAN,CAGzB,gBAAeC,GAAf;AAAA,MAAMQ,KAAN;;AAAA,SAAuBV,uCAAA,QAAA;AAAOE,IAAAA,GAAG,EAAEA;AAAZ,KAAqBQ,KAArB,EAAvB;AAAA,CAHyB;;;ICgBdG,QAAQ,gBAAGb,yBAAK,CAACC,UAAN,CACtB,gBAEEC,GAFF;AAAA,MACIC,SADJ,QACIA,SADJ;AAAA,wBACeW,KADf;AAAA,MACeA,KADf,2BACuB,KADvB;AAAA,yBAC8BC,MAD9B;AAAA,MAC8BA,MAD9B,4BACuC,KADvC;AAAA,wBAC8CC,KAD9C;AAAA,MAC8CA,KAD9C,2BACsD,KADtD;AAAA,MACgET,IADhE;;AAAA,SAIEP,uCAAA,KAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,gBAAD,EAAmBL,SAAnB,EAA8B;AACjD,+BAAyBW,KADwB;AAEjD,gCAA0BC,MAFuB;AAGjD,+BAAyBC;AAHwB,KAA9B,CADvB;AAMEd,IAAAA,GAAG,EAAEA;AANP,KAOMK,IAPN,EAJF;AAAA,CADsB;;;ICTXU,QAAQ,gBAAGjB,yBAAK,CAACC,UAAN,CAItB,gBAEEC,GAFF;AAAA;;AAAA,MACIC,SADJ,QACIA,SADJ;AAAA,0BACee,OADf;AAAA,MACeA,OADf,6BACyB,SADzB;AAAA,yBACoCC,MADpC;AAAA,MACoCA,MADpC,4BAC6CC,SAD7C;AAAA,MAC2Db,IAD3D;;AAAA,SAIEP,uCAAA,KAAA;AACEE,IAAAA,GAAG,EAAEA,GADP;AAEEC,IAAAA,SAAS,EAAEK,8BAAU,CAAC,sBAAD,EAAyBL,SAAzB,mEACcgB,MADd,IACyBA,MADzB,cAEnB,wCAFmB,IAEuBD,OAAO,KAAK,UAFnC,cAGnB,qCAHmB,IAGoBA,OAAO,KAAK,OAHhC,cAInB,6CAJmB,IAKjBA,OAAO,KAAK,eALK;AAFvB,KASMX,IATN,EAJF;AAAA,CAJsB;;;;ICgBXc,UAAU,gBAAGrB,yBAAK,CAACC,UAAN,CAIxB,gBAWEC,GAXF;MAEIC,iBAAAA;MACAmB,gBAAAA;MACAC,YAAAA;2BACAjB;MAAAA,sCAAW;MACXkB,kBAAAA;0BACAN;MAAAA,oCAAU;MACVO,2BAAAA;MACGlB;;AAIL,wBACEP,yBAAK,CAAC0B,QAAN,CAAwB,KAAxB,CADF;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,oBAA1B;;AAEA5B,EAAAA,yBAAK,CAAC6B,SAAN,CAAgB;AACdL,IAAAA,UAAU,IACRD,IADF,IAEEK,oBAAoB,CAACJ,UAAU,IAAID,IAAI,KAAKC,UAAU,CAACM,GAAnC,CAFtB;AAGD,GAJD,EAIG,CAACN,UAAD,EAAaD,IAAb,CAJH;AAKA,MAAMQ,QAAQ,GAAGJ,iBAAiB,GAC9BH,UAAU,IAAIA,UAAU,CAACQ,KADK,GAE9B,MAFJ;AAIA,SACEhC,uCAAA,KAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,wBAAD,EAA2BL,SAA3B,EAAsC;AACzD,0CAAoCG,QADqB;AAEzD,+CAAyCY,OAAO,KAAK,OAFI;AAGzD,kDAA4CA,OAAO,KAAK,UAHC;AAIzD,uDACEA,OAAO,KAAK;AAL2C,KAAtC,CADvB;iBAQaa,QARb;AASE7B,IAAAA,GAAG,EAAEA;AATP,KAUMK,IAVN,GAYGD,QAAQ,IAAIkB,UAAZ,IAA0BC,mBAA1B,GACCzB,uCAAA,CAACiC,wBAAD;AACER,IAAAA,mBAAmB,EAAEA;AACrBD,IAAAA,UAAU,EAAEA;AACZG,IAAAA,iBAAiB,EAAEA;GAHrB,EAKGL,QALH,CADD,GASCA,QArBJ,CADF;AA0BD,CAtDuB;;AAkE1B,IAAMW,wBAAwB,GAA4C,SAApEA,wBAAoE;MACxET,mBAAAA;MACAC,4BAAAA;MACAE,0BAAAA;MACAL,iBAAAA;;AAEA,MAAQnB,SAAR,GAA+BsB,mBAA/B,CAAQtB,SAAR;AAAA,MAAsBI,IAAtB,iCAA+BkB,mBAA/B;;AACA,SACEzB,uCAAA,SAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,+BAAD,EAAkCL,SAAlC,CADvB;AAEE+B,IAAAA,IAAI,EAAC;AAFP,KAGM3B,IAHN,GAKGe,QALH,EAMGK,iBAAiB,IAAIH,UAAU,CAACQ,KAAX,KAAqB,WAA1C,IACChC,uCAAA,CAACmC,iBAAD;AACEC,IAAAA,IAAI,EAAC;AACLjC,IAAAA,SAAS,EAAC;GAFZ,CAPJ,EAYGwB,iBAAiB,IAAIH,UAAU,CAACQ,KAAX,KAAqB,YAA1C,IACChC,uCAAA,CAACqC,mBAAD;AACED,IAAAA,IAAI,EAAC;AACLjC,IAAAA,SAAS,EAAC;GAFZ,CAbJ,CADF;AAqBD,CA5BD;;;;SCvFgBmC,gBACdC,SACAC;MAAAA;AAAAA,IAAAA,qBAAyC;AAAEV,MAAAA,GAAG,EAAE,EAAP;AAAWE,MAAAA,KAAK,EAAE;AAAlB;;;AAQzC,wBAAoChC,yBAAK,CAAC0B,QAAN,CAAec,kBAAf,CAApC;AAAA,MAAOhB,UAAP;AAAA,MAAmBiB,aAAnB;;AACA,MAAMC,SAAS,GAAGH,OAAO,CAACI,KAAR,EAAlB;AAEA3C,EAAAA,yBAAK,CAAC6B,SAAN,CAAgB;AACdY,IAAAA,aAAa,CAAC;AACZX,MAAAA,GAAG,EAAEU,kBAAkB,CAACV,GADZ;AAEZE,MAAAA,KAAK,EAAEQ,kBAAkB,CAACR;AAFd,KAAD,CAAb;AAID,GALD,EAKG,CAACQ,kBAAkB,CAACV,GAApB,EAAyBU,kBAAkB,CAACR,KAA5C,CALH;AAOA,MAAMY,UAAU,GAAQ5C,yBAAK,CAAC6C,OAAN,CAAc;AACpC,QAAIrB,UAAU,CAACQ,KAAX,KAAqB,MAAzB,EAAiC;AAC/B,aAAOU,SAAP;AACD;;AACD,WAAO,UAAIH,OAAJ,EAAaO,IAAb,CAAkB,UAACC,CAAD,EAASC,CAAT;AACvB,UAAIC,uBAAG,CAACF,CAAD,EAAIvB,UAAU,CAACM,GAAf,CAAH,GAAyBmB,uBAAG,CAACD,CAAD,EAAIxB,UAAU,CAACM,GAAf,CAAhC,EAAqD;AACnD,eAAON,UAAU,CAACQ,KAAX,KAAqB,WAArB,GAAmC,CAAC,CAApC,GAAwC,CAA/C;AACD,OAFD,MAEO,IAAIiB,uBAAG,CAACF,CAAD,EAAIvB,UAAU,CAACM,GAAf,CAAH,GAAyBmB,uBAAG,CAACD,CAAD,EAAIxB,UAAU,CAACM,GAAf,CAAhC,EAAqD;AAC1D,eAAON,UAAU,CAACQ,KAAX,KAAqB,WAArB,GAAmC,CAAnC,GAAuC,CAAC,CAA/C;AACD,OAFM,MAEA;AACL,eAAO,CAAP;AACD;AACF,KARM,CAAP;AASD,GAbuB,EAarB,CAACO,OAAD,EAAUG,SAAV,EAAqBlB,UAArB,CAbqB,CAAxB;;AAeA,MAAM0B,eAAe,GAAG,SAAlBA,eAAkB,CAACpB,GAAD;AACtB,QAAIE,KAAK,GAAwC,WAAjD;;AACA,QAAIR,UAAU,CAACM,GAAX,KAAmBA,GAAnB,IAA0BN,UAAU,CAACQ,KAAX,KAAqB,WAAnD,EAAgE;AAC9DA,MAAAA,KAAK,GAAG,YAAR;AACD,KAFD,MAEO,IAAIR,UAAU,CAACM,GAAX,KAAmBA,GAAnB,IAA0BN,UAAU,CAACQ,KAAX,KAAqB,YAAnD,EAAiE;AACtEA,MAAAA,KAAK,GAAG,MAAR;AACD;;AAEDS,IAAAA,aAAa,CAAC;AAAEX,MAAAA,GAAG,EAAHA,GAAF;AAAOE,MAAAA,KAAK,EAALA;AAAP,KAAD,CAAb;AACD,GATD;;AAWA,WAASmB,sBAAT;QACE5B,YAAAA;6BACAjB;QAAAA,sCAAW;QACX8C,mBAAAA;QACG1C;;AAEH;AACEa,MAAAA,IAAI,EAAJA,IADF;AAEEjB,MAAAA,QAAQ,EAARA,QAFF;AAGEkB,MAAAA,UAAU,EAAEA,UAHd;AAIEC,MAAAA,mBAAmB;AACjB4B,QAAAA,OAAO,EAAE;AAAA,iBAAMH,eAAe,CAAC3B,IAAD,CAArB;AAAA;AADQ,SAEd6B,WAFc;AAJrB,OAQK1C,KARL;AAUD;;AAED,WAAS4C,qBAAT;+BACEhD;QAAAA,uCAAW;QACRI;;AAEH;AACEJ,MAAAA,QAAQ,EAARA,QADF;AAEEkB,MAAAA,UAAU,EAAEA;AAFd,OAGKd,KAHL;AAKD;;AAED,SAAO;AAAEkC,IAAAA,UAAU,EAAVA,UAAF;AAAcO,IAAAA,sBAAsB,EAAtBA,sBAAd;AAAsCG,IAAAA,qBAAqB,EAArBA;AAAtC,GAAP;AACD;;;ICjEYC,YAAY,GAAgC,SAA5CA,YAA4C;MACvDjC,gBAAAA;MACAnB,iBAAAA;MACAqD,gBAAAA;MACAC,eAAAA;2BACAC;MAAAA,sCAAW;MACRnD;;AAEH,SACEP,uCAAA,CAAC2D,oBAAD;AAAiBF,IAAAA,OAAO,EAAEA;GAA1B,EACEzD,uCAAA,CAACiB,QAAD;AACEd,IAAAA,SAAS,EAAEK,8BAAU,CACnB,mBADmB,EAEnB;AACE,qCAA+BkD;AADjC,KAFmB,EAKnBvD,SALmB;AADvB,KAQMI,IARN,GAUEP,uCAAA,CAAC4D,eAAD;AACEC,IAAAA,oBAAoB,EAAE,CAACL;AACvBM,IAAAA,oBAAoB,EAAE,CAACN;AACvBO,IAAAA,SAAS,EAAC;AACVC,IAAAA,OAAO,EAAER,QAAQ,IAAIpC;AACrBqC,IAAAA,OAAO,EAAED,QAAQ,GAAG,OAAH,GAAapC;GALhC,EAOGE,QAPH,CAVF,CADF,CADF;AAwBD;;ICzCY2C,aAAa,GAAiC,SAA9CA,aAA8C;uBACzDC;MAAAA,8BAAO;MACP5C,gBAAAA;MACA6C,eAAAA;AAEA,SACEnE,uCAAA,KAAA,MAAA,EACEA,uCAAA,KAAA;AAAImE,IAAAA,OAAO,EAAEA;GAAb,EACEnE,uCAAA,CAACoE,iBAAD;AAAYF,IAAAA,IAAI,EAAEA;GAAlB,EAAyB5C,QAAzB,CADF,CADF,CADF;AAOD;;;IChBY+C,eAAe,GAAmC,SAAlDA,eAAkD;MAC7DH,YAAAA;MACAb,eAAAA;MACG9C;;AAEH,SACEP,uCAAA,SAAA;AACEG,IAAAA,SAAS,EAAEK,8BAAU,CAAC,uBAAD,EAA0B;AAC7C,qCAA+B0D;AADc,KAA1B,CADvB;AAIEb,IAAAA,OAAO,EAAEA;AAJX,KAKM9C,IALN,GAOEP,uCAAA,CAACsE,oBAAD;AAAgBnE,IAAAA,SAAS,EAAC;GAA1B,CAPF,CADF;AAWD;;ACvBD,SAASoE,eAAT,CACEC,KADF,EAEEC,UAFF,EAGEC,MAHF,EAIEC,SAJF;AAME,MAAMC,QAAQ,GAAGJ,KAAK,CAAC1C,GAAvB;;AACA,UAAQ8C,QAAR;AACE,SAAK,SAAL;AACEJ,MAAAA,KAAK,CAACK,cAAN;;AACA,UAAIF,SAAJ,EAAe;AACb,eAAOF,UAAU,KAAK,CAAf,GAAmBC,MAAM,GAAG,CAA5B,GAAgCD,UAAU,GAAG,CAApD;AACD,OAFD,MAEO;AACL,eAAOA,UAAU,GAAG,CAAb,GAAiBA,UAAU,GAAG,CAA9B,GAAkC,CAAzC;AACD;;AACH,SAAK,WAAL;AACED,MAAAA,KAAK,CAACK,cAAN;;AACA,UAAIF,SAAJ,EAAe;AACb,eAAOF,UAAU,KAAKC,MAAM,GAAG,CAAxB,GAA4B,CAA5B,GAAgCD,UAAU,GAAG,CAApD;AACD,OAFD,MAEO;AACL,eAAOA,UAAU,GAAGC,MAAM,GAAG,CAAtB,GAA0BD,UAAU,GAAG,CAAvC,GAA2CA,UAAlD;AACD;;AACH;AACE,aAAOA,UAAP;AAhBJ;AAkBD;;IAiBYK,0BAA0B,GAAoC,SAA9DA,0BAA8D,CACzEC,YADyE,EAEzEJ,SAFyE;;;MACzEI;AAAAA,IAAAA,eAAe;;;MACfJ;AAAAA,IAAAA,YAAY;;;AAEZ,kBAAoCjD,cAAQ,CAACqD,YAAD,CAA5C;AAAA,MAAON,UAAP;AAAA,MAAmBO,aAAnB;;AACA,mBAA4BtD,cAAQ,CAAC,CAAD,CAApC;AAAA,MAAOgD,MAAP;AAAA,MAAeO,SAAf;;AAEA,MAAMC,YAAY,GAAGlF,yBAAK,CAACmF,MAAN,CAAsC,IAAtC,CAArB;AACA,MAAMC,aAAa,GAAGF,YAAH,6CAAGA,YAAY,CAAEG,OAAjB,qBAAG,sBAAuBC,QAAvB,CAAgCC,QAAQ,CAACC,aAAzC,CAAtB;AAEAxF,EAAAA,yBAAK,CAAC6B,SAAN,CAAgB;;;AACdqD,IAAAA,YAAY,IACVA,YAAY,CAACG,OADf,IAEED,aAFF,+BAGEF,YAAY,CAACG,OAAb,CAAqBI,UAArB,CACEhB,UADF,EAEEgB,UAFF,CAEa,CAFb,EAEgBC,aALlB,qBAGE,uBAE+BC,KAF/B,EAHF;AAMD,GAPD,EAOG,CAAClB,UAAD,CAPH;;AASA,WAASmB,2BAAT;sCAAwCrF;AAAAA,MAAAA;;;AACtC;AACEL,MAAAA,GAAG,EAAEgF;AADP,OAEK3E,IAFL;AAID;;AAED,WAASsF,0BAAT,CACEC,GADF;AAIE9F,IAAAA,yBAAK,CAAC6B,SAAN,CAAgB;AACdiE,MAAAA,GAAG,IAAIpB,MAAP,IAAiBO,SAAS,CAACa,GAAG,GAAG,CAAP,CAA1B;AACD,KAFD,EAEG,EAFH;AAGA,QAAMC,WAAW,GAAG/F,yBAAK,CAACmF,MAAN,CAAkC,IAAlC,CAApB;AAEA,QAAIa,QAAQ,GAAG,CAAC,CAAhB;AACAF,IAAAA,GAAG,KAAKrB,UAAR,GAAsBuB,QAAQ,GAAG,CAAjC,GAAsC5E,SAAtC;;uCARGb;AAAAA,MAAAA;;;AASH;AACEyF,MAAAA,QAAQ,EAARA,QADF;AAEE9F,MAAAA,GAAG,EAAE6F,WAFP;AAGE1C,MAAAA,OAAO,EAAE;AAAA,eAAM2B,aAAa,CAACc,GAAD,CAAnB;AAAA,OAHX;AAIEG,MAAAA,SAAS,EAAE,mBAACC,CAAD;AACT,YAAMC,OAAO,GAAG5B,eAAe,CAAC2B,CAAD,EAAIzB,UAAJ,EAAgBM,YAAhB,EAA8BJ,SAA9B,CAA/B;AACAK,QAAAA,aAAa,CAACmB,OAAD,CAAb;AACD;AAPH,OAQK5F,IARL;AAUD;;AACD,SAAO;AAAEsF,IAAAA,0BAA0B,EAA1BA,0BAAF;AAA8BD,IAAAA,2BAA2B,EAA3BA;AAA9B,GAAP;AACD;;AC3FDQ,4BAAsB,CAAC,OAAD,CAAtB;;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("classnames"),r=require("@entur/icons"),n=require("lodash.get"),o=require("@entur/form"),l=require("@entur/tooltip"),d=require("@entur/expand");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(t),c=s(a),i=s(n);function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},f.apply(this,arguments)}function b(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(a=o[r])>=0||(n[a]=e[a]);return n}var v=["className","fixed","spacing","sortable"],m=u.default.forwardRef((function(e,t){var a=e.className,r=e.fixed,n=void 0!==r&&r,o=e.spacing,l=void 0===o?"default":o,d=e.sortable,s=void 0!==d&&d,i=b(e,v);return u.default.createElement("table",f({className:c.default("eds-table",{"eds-table--fixed":n},{"eds-table--middle":"middle"===l},{"eds-table--small":"small"===l},{"eds-table--sortable":s},a),ref:t},i))})),p=["className"],_=u.default.forwardRef((function(e,t){var a=e.className,r=b(e,p);return u.default.createElement("thead",f({className:c.default("eds-table__head",a),ref:t},r))})),g=["className"],h=u.default.forwardRef((function(e,t){var a=e.className,r=b(e,g);return u.default.createElement("tbody",f({className:c.default("eds-table__body",a),ref:t},r))})),w=u.default.forwardRef((function(e,t){var a=f({},e);return u.default.createElement("tfoot",f({ref:t},a))})),N=["className","hover","active","error"],x=u.default.forwardRef((function(e,t){var a=e.className,r=e.hover,n=void 0!==r&&r,o=e.active,l=void 0!==o&&o,d=e.error,s=void 0!==d&&d,i=b(e,N);return u.default.createElement("tr",f({className:c.default("eds-table__row",a,{"eds-table__row--hover":n,"eds-table__row--active":l,"eds-table__row--error":s}),ref:t},i))})),y=["className","padding","status"],E=u.default.forwardRef((function(e,t){var a,r=e.className,n=e.padding,o=void 0===n?"default":n,l=e.status,d=void 0===l?void 0:l,s=b(e,y);return u.default.createElement("td",f({ref:t,className:c.default("eds-table__data-cell",r,(a={},a["eds-table__data-cell--status-"+d]=d,a["eds-table__data-cell--padding-checkbox"]="checkbox"===o,a["eds-table__data-cell--padding-radio"]="radio"===o,a["eds-table__data-cell--padding-overflow-menu"]="overflow-menu"===o,a))},s))})),k=["className","children","name","sortable","sortConfig","padding","sortableButtonProps"],C=["className"],P=u.default.forwardRef((function(e,t){var a=e.className,r=e.children,n=e.name,o=e.sortable,l=void 0!==o&&o,d=e.sortConfig,s=e.padding,i=void 0===s?"default":s,v=e.sortableButtonProps,m=b(e,k),p=u.default.useState(!1),_=p[0],g=p[1];u.default.useEffect((function(){d&&n&&g(d&&n===d.key)}),[d,n]);var h=_?d&&d.order:"none";return u.default.createElement("th",f({className:c.default("eds-table__header-cell",a,{"eds-table__header-cell--sortable":l,"eds-table__header-cell--padding-radio":"radio"===i,"eds-table__header-cell--padding-checkbox":"checkbox"===i,"eds-table__header-cell--padding-overflow-menu":"overflow-menu"===i}),"aria-sort":h,ref:t},m),l&&d&&v?u.default.createElement(R,{sortableButtonProps:v,sortConfig:d,isCurrentlySorted:_},r):r)})),R=function(e){var t=e.sortConfig,a=e.sortableButtonProps,n=e.isCurrentlySorted,o=e.children,l=a.className,d=b(a,C);return u.default.createElement("button",f({className:c.default("eds-table__header-cell-button",l),type:"button"},d),o,n&&"ascending"===t.order&&u.default.createElement(r.UpArrowIcon,{size:"16px",className:"eds-table__header-cell-button-icon"}),n&&"descending"===t.order&&u.default.createElement(r.DownArrowIcon,{size:"16px",className:"eds-table__header-cell-button-icon"}))},S=["name","sortable","buttonProps"],T=["sortable"],B=["children","className","feedback","variant","outlined"],q=["open","onClick"];function A(e,t,a,r){switch(e.key){case"ArrowUp":return e.preventDefault(),r?0===t?a-1:t-1:t>0?t-1:0;case"ArrowDown":return e.preventDefault(),r?t===a-1?0:t+1:t<a-1?t+1:t;default:return t}}e.warnAboutMissingStyles("table"),exports.DataCell=E,exports.EditableCell=function(e){var t=e.children,a=e.className,r=e.feedback,n=e.variant,d=e.outlined,s=void 0!==d&&d,i=b(e,B);return u.default.createElement(o.VariantProvider,{variant:n},u.default.createElement(E,f({className:c.default("eds-editable-cell",{"eds-editable-cell--outlined":s},a)},i),u.default.createElement(l.Tooltip,{disableHoverListener:!r,disableFocusListener:!r,placement:"bottom",content:r||void 0,variant:r?"error":void 0},t)))},exports.ExpandRowButton=function(e){var t=e.open,a=e.onClick,n=b(e,q);return u.default.createElement("button",f({className:c.default("eds-expand-row-button",{"eds-expand-row-button--open":t}),onClick:a},n),u.default.createElement(r.RightArrowIcon,{className:"eds-expand-row-button__icon"}))},exports.ExpandableRow=function(e){var t=e.open;return u.default.createElement("tr",null,u.default.createElement("td",{colSpan:e.colSpan},u.default.createElement(d.BaseExpand,{open:void 0!==t&&t},e.children)))},exports.HeaderCell=P,exports.Table=m,exports.TableBody=h,exports.TableFooter=w,exports.TableHead=_,exports.TableRow=x,exports.useSortableData=function(e,t){void 0===t&&(t={key:"",order:"none"});var a=u.default.useState(t),r=a[0],n=a[1],o=e.slice();return u.default.useEffect((function(){n({key:t.key,order:t.order})}),[t.key,t.order]),{sortedData:u.default.useMemo((function(){return"none"===r.order?o:[].concat(e).sort((function(e,t){return i.default(e,r.key)<i.default(t,r.key)?"ascending"===r.order?-1:1:i.default(e,r.key)>i.default(t,r.key)?"ascending"===r.order?1:-1:0}))}),[e,o,r]),getSortableHeaderProps:function(e){var t=e.name,a=e.sortable,o=void 0===a||a,l=e.buttonProps,d=b(e,S);return f({name:t,sortable:o,sortConfig:r,sortableButtonProps:f({onClick:function(){return a="ascending",r.key===(e=t)&&"ascending"===r.order?a="descending":r.key===e&&"descending"===r.order&&(a="none"),void n({key:e,order:a});var e,a}},l)},d)},getSortableTableProps:function(e){var t=e.sortable,a=void 0===t||t,n=b(e,T);return f({sortable:a,sortConfig:r},n)}}},exports.useTableKeyboardNavigation=function(e,a){var r;void 0===e&&(e=0),void 0===a&&(a=!0);var n=t.useState(e),o=n[0],l=n[1],d=t.useState(0),s=d[0],c=d[1],i=u.default.useRef(null),b=null==i||null==(r=i.current)?void 0:r.contains(document.activeElement);return u.default.useEffect((function(){var e;i&&i.current&&b&&(null==(e=i.current.childNodes[o].childNodes[0].parentElement)||e.focus())}),[o]),{getTableRowNavigationProps:function(t){u.default.useEffect((function(){t>=s&&c(t+1)}),[]);var r=u.default.useRef(null),n=-1;t===o&&(n=0);for(var d=arguments.length,i=new Array(d>1?d-1:0),b=1;b<d;b++)i[b-1]=arguments[b];return f({tabIndex:n,ref:r,onClick:function(){return l(t)},onKeyDown:function(t){var r=A(t,o,e,a);l(r)}},i)},getTableBodyNavigationProps:function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];return f({ref:i},t)}}};
|
|
2
2
|
//# sourceMappingURL=table.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx","../src/EditableCell.tsx","../src/ExpandRowButton.tsx","../src/ExpandableRow.tsx","../src/useSortableTable.ts"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon, UpArrowIcon } from '@entur/icons';\nimport './HeaderCell.scss';\nimport { ExternalSortConfig } from '.';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n React.useEffect(() => {\n row >= maxRow && setMaxRow(row + 1);\n }, []);\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n\n let tabIndex = -1;\n row === currentRow ? (tabIndex = 0) : undefined;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { RightArrowIcon } from '@entur/icons';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <button\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n {...rest}\n >\n <RightArrowIcon className=\"eds-expand-row-button__icon\" />\n </button>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n"],"names":["Table","React","forwardRef","ref","className","fixed","spacing","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","hover","active","error","DataCell","padding","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UpArrowIcon","size","DownArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","preventDefault","warnAboutMissingStyles","feedback","variant","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","open","onClick","RightArrowIcon","colSpan","BaseExpand","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","getSortableHeaderProps","buttonProps","getSortableTableProps","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","_tableBodyRef$current","contains","document","activeElement","childNodes","parentElement","_tableBodyRef$current2","focus","getTableRowNavigationProps","row","tableRowRef","tabIndex","onKeyDown","e","newCell","getTableBodyNavigationProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx","../src/EditableCell.tsx","../src/ExpandRowButton.tsx","../src/ExpandableRow.tsx","../src/useSortableTable.ts"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon, UpArrowIcon } from '@entur/icons';\nimport './HeaderCell.scss';\nimport { ExternalSortConfig } from '.';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n />\n )}\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n React.useEffect(() => {\n row >= maxRow && setMaxRow(row + 1);\n }, []);\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n\n let tabIndex = -1;\n row === currentRow ? (tabIndex = 0) : undefined;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { RightArrowIcon } from '@entur/icons';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <button\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n {...rest}\n >\n <RightArrowIcon className=\"eds-expand-row-button__icon\" />\n </button>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n"],"names":["Table","React","forwardRef","ref","className","fixed","spacing","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","hover","active","error","DataCell","padding","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UpArrowIcon","size","DownArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","preventDefault","warnAboutMissingStyles","feedback","variant","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","open","onClick","RightArrowIcon","colSpan","BaseExpand","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","getSortableHeaderProps","buttonProps","getSortableTableProps","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","_tableBodyRef$current","contains","document","activeElement","childNodes","parentElement","_tableBodyRef$current2","focus","getTableRowNavigationProps","row","tableRowRef","tabIndex","onKeyDown","e","newCell","getTableBodyNavigationProps"],"mappings":"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"}
|
package/dist/table.esm.js
CHANGED
|
@@ -40,6 +40,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
40
40
|
return target;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
var _excluded$8 = ["className", "fixed", "spacing", "sortable"];
|
|
43
44
|
var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
44
45
|
var className = _ref.className,
|
|
45
46
|
_ref$fixed = _ref.fixed,
|
|
@@ -48,9 +49,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
48
49
|
spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
49
50
|
_ref$sortable = _ref.sortable,
|
|
50
51
|
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
51
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
52
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
52
53
|
|
|
53
|
-
return React.createElement("table",
|
|
54
|
+
return React.createElement("table", _extends({
|
|
54
55
|
className: classNames('eds-table', {
|
|
55
56
|
'eds-table--fixed': fixed
|
|
56
57
|
}, {
|
|
@@ -64,21 +65,23 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
64
65
|
}, rest));
|
|
65
66
|
});
|
|
66
67
|
|
|
68
|
+
var _excluded$7 = ["className"];
|
|
67
69
|
var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
68
70
|
var className = _ref.className,
|
|
69
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
71
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
70
72
|
|
|
71
|
-
return React.createElement("thead",
|
|
73
|
+
return React.createElement("thead", _extends({
|
|
72
74
|
className: classNames('eds-table__head', className),
|
|
73
75
|
ref: ref
|
|
74
76
|
}, props));
|
|
75
77
|
});
|
|
76
78
|
|
|
79
|
+
var _excluded$6 = ["className"];
|
|
77
80
|
var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
78
81
|
var className = _ref.className,
|
|
79
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
82
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
80
83
|
|
|
81
|
-
return React.createElement("tbody",
|
|
84
|
+
return React.createElement("tbody", _extends({
|
|
82
85
|
className: classNames('eds-table__body', className),
|
|
83
86
|
ref: ref
|
|
84
87
|
}, rest));
|
|
@@ -87,11 +90,12 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
87
90
|
var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
88
91
|
var props = _extends({}, _ref);
|
|
89
92
|
|
|
90
|
-
return React.createElement("tfoot",
|
|
93
|
+
return React.createElement("tfoot", _extends({
|
|
91
94
|
ref: ref
|
|
92
95
|
}, props));
|
|
93
96
|
});
|
|
94
97
|
|
|
98
|
+
var _excluded$5 = ["className", "hover", "active", "error"];
|
|
95
99
|
var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
96
100
|
var className = _ref.className,
|
|
97
101
|
_ref$hover = _ref.hover,
|
|
@@ -100,9 +104,9 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
100
104
|
active = _ref$active === void 0 ? false : _ref$active,
|
|
101
105
|
_ref$error = _ref.error,
|
|
102
106
|
error = _ref$error === void 0 ? false : _ref$error,
|
|
103
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
107
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
104
108
|
|
|
105
|
-
return React.createElement("tr",
|
|
109
|
+
return React.createElement("tr", _extends({
|
|
106
110
|
className: classNames('eds-table__row', className, {
|
|
107
111
|
'eds-table__row--hover': hover,
|
|
108
112
|
'eds-table__row--active': active,
|
|
@@ -112,6 +116,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
112
116
|
}, rest));
|
|
113
117
|
});
|
|
114
118
|
|
|
119
|
+
var _excluded$4 = ["className", "padding", "status"];
|
|
115
120
|
var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
116
121
|
var _classNames;
|
|
117
122
|
|
|
@@ -120,14 +125,16 @@ var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
120
125
|
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
121
126
|
_ref$status = _ref.status,
|
|
122
127
|
status = _ref$status === void 0 ? undefined : _ref$status,
|
|
123
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
128
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
124
129
|
|
|
125
|
-
return React.createElement("td",
|
|
130
|
+
return React.createElement("td", _extends({
|
|
126
131
|
ref: ref,
|
|
127
132
|
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))
|
|
128
133
|
}, rest));
|
|
129
134
|
});
|
|
130
135
|
|
|
136
|
+
var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps"],
|
|
137
|
+
_excluded2$1 = ["className"];
|
|
131
138
|
var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
132
139
|
var className = _ref.className,
|
|
133
140
|
children = _ref.children,
|
|
@@ -138,7 +145,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
138
145
|
_ref$padding = _ref.padding,
|
|
139
146
|
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
140
147
|
sortableButtonProps = _ref.sortableButtonProps,
|
|
141
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
148
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
142
149
|
|
|
143
150
|
var _React$useState = React.useState(false),
|
|
144
151
|
isCurrentlySorted = _React$useState[0],
|
|
@@ -148,7 +155,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
148
155
|
sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
|
|
149
156
|
}, [sortConfig, name]);
|
|
150
157
|
var ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : 'none';
|
|
151
|
-
return React.createElement("th",
|
|
158
|
+
return React.createElement("th", _extends({
|
|
152
159
|
className: classNames('eds-table__header-cell', className, {
|
|
153
160
|
'eds-table__header-cell--sortable': sortable,
|
|
154
161
|
'eds-table__header-cell--padding-radio': padding === 'radio',
|
|
@@ -171,9 +178,9 @@ var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
|
171
178
|
children = _ref2.children;
|
|
172
179
|
|
|
173
180
|
var className = sortableButtonProps.className,
|
|
174
|
-
rest = _objectWithoutPropertiesLoose(sortableButtonProps,
|
|
181
|
+
rest = _objectWithoutPropertiesLoose(sortableButtonProps, _excluded2$1);
|
|
175
182
|
|
|
176
|
-
return React.createElement("button",
|
|
183
|
+
return React.createElement("button", _extends({
|
|
177
184
|
className: classNames('eds-table__header-cell-button', className),
|
|
178
185
|
type: "button"
|
|
179
186
|
}, rest), children, isCurrentlySorted && sortConfig.order === 'ascending' && React.createElement(UpArrowIcon, {
|
|
@@ -185,6 +192,8 @@ var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
|
185
192
|
}));
|
|
186
193
|
};
|
|
187
194
|
|
|
195
|
+
var _excluded$2 = ["name", "sortable", "buttonProps"],
|
|
196
|
+
_excluded2 = ["sortable"];
|
|
188
197
|
function useSortableData(rawData, externalSortConfig) {
|
|
189
198
|
if (externalSortConfig === void 0) {
|
|
190
199
|
externalSortConfig = {
|
|
@@ -240,7 +249,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
240
249
|
_ref$sortable = _ref.sortable,
|
|
241
250
|
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
242
251
|
buttonProps = _ref.buttonProps,
|
|
243
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
252
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
244
253
|
|
|
245
254
|
return _extends({
|
|
246
255
|
name: name,
|
|
@@ -257,7 +266,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
257
266
|
function getSortableTableProps(_ref2) {
|
|
258
267
|
var _ref2$sortable = _ref2.sortable,
|
|
259
268
|
sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
|
|
260
|
-
props = _objectWithoutPropertiesLoose(_ref2,
|
|
269
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
261
270
|
|
|
262
271
|
return _extends({
|
|
263
272
|
sortable: sortable,
|
|
@@ -272,6 +281,7 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
272
281
|
};
|
|
273
282
|
}
|
|
274
283
|
|
|
284
|
+
var _excluded$1 = ["children", "className", "feedback", "variant", "outlined"];
|
|
275
285
|
var EditableCell = function EditableCell(_ref) {
|
|
276
286
|
var children = _ref.children,
|
|
277
287
|
className = _ref.className,
|
|
@@ -279,11 +289,11 @@ var EditableCell = function EditableCell(_ref) {
|
|
|
279
289
|
variant = _ref.variant,
|
|
280
290
|
_ref$outlined = _ref.outlined,
|
|
281
291
|
outlined = _ref$outlined === void 0 ? false : _ref$outlined,
|
|
282
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
292
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
283
293
|
|
|
284
294
|
return React.createElement(VariantProvider, {
|
|
285
295
|
variant: variant
|
|
286
|
-
}, React.createElement(DataCell,
|
|
296
|
+
}, React.createElement(DataCell, _extends({
|
|
287
297
|
className: classNames('eds-editable-cell', {
|
|
288
298
|
'eds-editable-cell--outlined': outlined
|
|
289
299
|
}, className)
|
|
@@ -308,12 +318,13 @@ var ExpandableRow = function ExpandableRow(_ref) {
|
|
|
308
318
|
}, children)));
|
|
309
319
|
};
|
|
310
320
|
|
|
321
|
+
var _excluded = ["open", "onClick"];
|
|
311
322
|
var ExpandRowButton = function ExpandRowButton(_ref) {
|
|
312
323
|
var open = _ref.open,
|
|
313
324
|
onClick = _ref.onClick,
|
|
314
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
325
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
315
326
|
|
|
316
|
-
return React.createElement("button",
|
|
327
|
+
return React.createElement("button", _extends({
|
|
317
328
|
className: classNames('eds-expand-row-button', {
|
|
318
329
|
'eds-expand-row-button--open': open
|
|
319
330
|
}),
|
|
@@ -370,11 +381,11 @@ var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRow
|
|
|
370
381
|
setMaxRow = _useState2[1];
|
|
371
382
|
|
|
372
383
|
var tableBodyRef = React.useRef(null);
|
|
373
|
-
var tableHasFocus = tableBodyRef
|
|
384
|
+
var tableHasFocus = tableBodyRef == null ? void 0 : (_tableBodyRef$current = tableBodyRef.current) == null ? void 0 : _tableBodyRef$current.contains(document.activeElement);
|
|
374
385
|
React.useEffect(function () {
|
|
375
386
|
var _tableBodyRef$current2;
|
|
376
387
|
|
|
377
|
-
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement)
|
|
388
|
+
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) == null ? void 0 : _tableBodyRef$current2.focus());
|
|
378
389
|
}, [currentRow]);
|
|
379
390
|
|
|
380
391
|
function getTableBodyNavigationProps() {
|