@open-pioneer/result-list 0.3.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @open-pioneer/result-list
 
+## 0.7.0
+
+### Minor Changes
+
+-   310800c: Switch from `peerDependencies` to normal `dependencies`. Peer dependencies have some usability problems when used at scale.
+
+### Patch Changes
+
+-   310800c: Update core packages version.
+-   583f1d6: The `mapId` or `map` properties are now optional on individual components.
+    You can use the `DefaultMapProvider` to configure an implicit default value.
+
+    Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
+
+-   583f1d6: All UI components in this project now accept the `mapId` (a `string`) _or_ the `map` (a `MapModel`) directly.
+-   a8b3449: Switch to a new versioning strategy.
+    From now on, packages released by this repository share a common version number.
+-   900eb11: Update dependencies.
+-   Updated dependencies [310800c]
+-   Updated dependencies [2502050]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [397d617]
+-   Updated dependencies [a8b3449]
+-   Updated dependencies [310800c]
+-   Updated dependencies [900eb11]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [397d617]
+    -   @open-pioneer/map@0.7.0
+
 ## 0.3.2
 
 ### Patch Changes

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Table,\n    Tbody,\n    Td,\n    Th,\n    Thead,\n    Tr,\n    chakra,\n    useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport {\n    ColumnDef,\n    Header,\n    HeaderGroup,\n    SortDirection,\n    Table as TanstackTable,\n    flexRender\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport React, { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n    data: Data[];\n    columns: ColumnDef<Data>[];\n    memoizeRows: boolean;\n    selectionMode: SelectionMode;\n    onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\n    const { memoizeRows } = props;\n    const { table } = useSetupTable(props);\n    const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n    const columnSizeVars = useColumnSizeVars(table);\n    const [isClickBlocked, setIsClickBlocked] = useState(false);\n\n    useEffect(() => {\n        setIsClickBlocked(isResizing);\n    }, [isResizing]);\n\n    if (!table.getRowModel().rows.length) {\n        return (\n            <chakra.div className={\"result-list-no-data-message\"}>\n                {intl.formatMessage({ id: \"noDataMessage\" })}\n            </chakra.div>\n        );\n    }\n\n    return (\n        <Table\n            className={classNames(\"result-list-table\", {\n                \"result-list-table--is-resizing\": isResizing\n            })}\n            style={columnSizeVars}\n            width=\"99.9%\"\n            // An attempt to block click events while dragging the resize handle.\n            // If the click event gets through, the user may accidentally trigger column sorting on mouse release\n            onClickCapture={(e) => {\n                if (isClickBlocked) {\n                    LOG.debug(\"Blocking click event because resizing is active\");\n                    e.stopPropagation();\n                    e.preventDefault();\n                }\n            }}\n        >\n            <Thead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n                ))}\n            </Thead>\n            <Tbody className=\"result-list-table-body\">\n                {memoizeRows || isResizing ? (\n                    <MemoizedTableRows table={table} />\n                ) : (\n                    <TableRows table={table} />\n                )}\n            </Tbody>\n        </Table>\n    );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n    const { headerGroup } = props;\n    const borderColor = useToken(\"colors\", \"trails.100\");\n    return (\n        <Tr key={headerGroup.id} className=\"result-list-headers\">\n            {headerGroup.headers.map((header, index) => {\n                return (\n                    <TableHeader\n                        key={header.id}\n                        header={header}\n                        index={index}\n                        borderColor={borderColor}\n                    />\n                );\n            })}\n        </Tr>\n    );\n}\n\nfunction TableHeader<Data>(props: {\n    header: Header<Data, unknown>;\n    index: number;\n    borderColor: string;\n}) {\n    const { header, index, borderColor } = props;\n    const width = `calc(var(--header-${header.id}-size) * 1px)`;\n    return (\n        <Th\n            className=\"result-list-header\"\n            tabIndex={0}\n            aria-sort={mapAriaSorting(header.column.getIsSorted())}\n            onClick={() => header.column.getCanSort() && header.column.toggleSorting()}\n            cursor={header.column.getCanSort() ? \"pointer\" : \"unset\"}\n            style={{ width: index === 0 ? \"50px\" : width }}\n            onKeyDown={(evt) => {\n                if (evt.key === \"Enter\" && header.column.getCanSort()) {\n                    header.column.toggleSorting(undefined);\n                }\n            }}\n            /* use box shadow instead of border because it works better with position: sticky */\n            border=\"none\"\n            boxShadow={`inset 0 -2px 0 0 ${borderColor}`}\n            _focusVisible={{ textDecorationLine: \"underline\" }}\n            _focus={{ outline: \"none\" }}\n        >\n            {flexRender(header.column.columnDef.header, header.getContext())}\n            {header.column.getCanSort() && (\n                <ColumnSortIndicator isSorted={header.column.getIsSorted()} />\n            )}\n            <ColumnResizer\n                onDoubleClick={() => header.column.resetSize()}\n                onMouseDown={header.getResizeHandler()}\n                onTouchStart={header.getResizeHandler()}\n                isResizing={header.column.getIsResizing()}\n            />\n        </Th>\n    );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return table.getRowModel().rows.map((row) => {\n        return (\n            <Tr key={row.id} className=\"result-list-table-row\">\n                {row.getVisibleCells().map((cell) => {\n                    const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;\n                    return (\n                        <Td\n                            key={cell.id}\n                            style={{ width: width }}\n                            className=\"result-list-table-row\"\n                        >\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </Td>\n                    );\n                })}\n            </Tr>\n        );\n    });\n}\n\n/**\n * Rows are memoized and only updating on changes due to sorting columns or selecting rows.\n * Removed full Memoization on Resizing because it does not have an additional effect.\n */\nfunction MemoizedTableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    const memoizedRows = React.useMemo<ReactNode>(() => {\n        return <TableRows table={table} />;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [table, table.getSortedRowModel().rows, table.getSelectedRowModel().rows]);\n    return memoizedRows;\n}\n\n/**\n * Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n */\nfunction useColumnSizeVars<Data>(table: TanstackTable<Data>) {\n    const columnSizingInfo = table.getState().columnSizingInfo;\n    const columnSizing = table.getState().columnSizing;\n    const tableHeaders = table.getFlatHeaders();\n\n    // Needs to be useMemo, not useEffect, to avoid multiple render calls?\n    // Need to add columnSizingInfo to the dependency array to make resizing work\n    return useMemo(() => {\n        // Not used directly, but the memo must re-execute whenever this changes.\n        // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())\n        // won't to anything.\n        void columnSizingInfo, columnSizing;\n        const colSizes: { [key: string]: number } = {};\n        for (let i = 0; i < tableHeaders.length; i++) {\n            const header = tableHeaders[i]!;\n            colSizes[`--header-${header.id}-size`] = header.getSize();\n            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n        }\n        return colSizes;\n    }, [tableHeaders, columnSizingInfo, columnSizing]);\n}\n\ntype SortState = SortDirection | false;\nfunction mapAriaSorting(sortState: SortState) {\n    switch (sortState) {\n        case \"asc\":\n            return \"ascending\";\n        case \"desc\":\n            return \"descending\";\n        default:\n            return \"none\";\n    }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Table,\n    Tbody,\n    Td,\n    Th,\n    Thead,\n    Tr,\n    chakra,\n    useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport {\n    ColumnDef,\n    Header,\n    HeaderGroup,\n    SortDirection,\n    Table as TanstackTable,\n    flexRender\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport React, { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n    data: Data[];\n    columns: ColumnDef<Data>[];\n    memoizeRows: boolean;\n    selectionMode: SelectionMode;\n    onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\n    const { memoizeRows } = props;\n    const { table } = useSetupTable(props);\n    const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n    const columnSizeVars = useColumnSizeVars(table);\n    const [isClickBlocked, setIsClickBlocked] = useState(false);\n\n    useEffect(() => {\n        setIsClickBlocked(isResizing);\n    }, [isResizing]);\n\n    if (!table.getRowModel().rows.length) {\n        return (\n            <chakra.div className={\"result-list-no-data-message\"}>\n                {intl.formatMessage({ id: \"noDataMessage\" })}\n            </chakra.div>\n        );\n    }\n\n    return (\n        <Table\n            className={classNames(\"result-list-table\", {\n                \"result-list-table--is-resizing\": isResizing\n            })}\n            style={columnSizeVars}\n            width=\"99.9%\"\n            // An attempt to block click events while dragging the resize handle.\n            // If the click event gets through, the user may accidentally trigger column sorting on mouse release\n            onClickCapture={(e) => {\n                if (isClickBlocked) {\n                    LOG.debug(\"Blocking click event because resizing is active\");\n                    e.stopPropagation();\n                    e.preventDefault();\n                }\n            }}\n        >\n            <Thead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n                ))}\n            </Thead>\n            <Tbody className=\"result-list-table-body\">\n                {memoizeRows || isResizing ? (\n                    <MemoizedTableRows table={table} />\n                ) : (\n                    <TableRows table={table} />\n                )}\n            </Tbody>\n        </Table>\n    );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n    const { headerGroup } = props;\n    const borderColor = useToken(\"colors\", \"trails.100\");\n    return (\n        <Tr key={headerGroup.id} className=\"result-list-headers\">\n            {headerGroup.headers.map((header, index) => {\n                return (\n                    <TableHeader\n                        key={header.id}\n                        header={header}\n                        index={index}\n                        borderColor={borderColor}\n                    />\n                );\n            })}\n        </Tr>\n    );\n}\n\nfunction TableHeader<Data>(props: {\n    header: Header<Data, unknown>;\n    index: number;\n    borderColor: string;\n}) {\n    const { header, index, borderColor } = props;\n    const width = `calc(var(--header-${header.id}-size) * 1px)`;\n    return (\n        <Th\n            className=\"result-list-header\"\n            tabIndex={0}\n            aria-sort={mapAriaSorting(header.column.getIsSorted())}\n            onClick={() => header.column.getCanSort() && header.column.toggleSorting()}\n            cursor={header.column.getCanSort() ? \"pointer\" : \"unset\"}\n            style={{ width: index === 0 ? \"50px\" : width }}\n            onKeyDown={(evt) => {\n                if (evt.key === \"Enter\" && header.column.getCanSort()) {\n                    header.column.toggleSorting(undefined);\n                }\n            }}\n            /* use box shadow instead of border because it works better with position: sticky */\n            border=\"none\"\n            boxShadow={`inset 0 -2px 0 0 ${borderColor}`}\n            _focusVisible={{ textDecorationLine: \"underline\" }}\n            _focus={{ outline: \"none\" }}\n        >\n            {flexRender(header.column.columnDef.header, header.getContext())}\n            {header.column.getCanSort() && (\n                <ColumnSortIndicator isSorted={header.column.getIsSorted()} />\n            )}\n            <ColumnResizer\n                onDoubleClick={() => header.column.resetSize()}\n                onMouseDown={header.getResizeHandler()}\n                onTouchStart={header.getResizeHandler()}\n                isResizing={header.column.getIsResizing()}\n            />\n        </Th>\n    );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return table.getRowModel().rows.map((row) => {\n        return (\n            <Tr key={row.id} className=\"result-list-table-row\">\n                {row.getVisibleCells().map((cell) => {\n                    const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;\n                    return (\n                        <Td\n                            key={cell.id}\n                            style={{ width: width }}\n                            className=\"result-list-table-row\"\n                        >\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </Td>\n                    );\n                })}\n            </Tr>\n        );\n    });\n}\n\n/**\n * Rows are memoized and only updating on changes due to sorting columns or selecting rows.\n * Removed full Memoization on Resizing because it does not have an additional effect.\n */\nfunction MemoizedTableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    const memoizedRows = React.useMemo<ReactNode>(() => {\n        return <TableRows table={table} />;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [table, table.getSortedRowModel().rows, table.getSelectedRowModel().rows]);\n    return memoizedRows;\n}\n\n/**\n * Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n */\nfunction useColumnSizeVars<Data>(table: TanstackTable<Data>) {\n    const columnSizingInfo = table.getState().columnSizingInfo;\n    const columnSizing = table.getState().columnSizing;\n    const tableHeaders = table.getFlatHeaders();\n\n    // Needs to be useMemo, not useEffect, to avoid multiple render calls?\n    // Need to add columnSizingInfo to the dependency array to make resizing work\n    return useMemo(() => {\n        // Not used directly, but the memo must re-execute whenever this changes.\n        // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())\n        // won't to anything.\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        void columnSizingInfo, columnSizing;\n        const colSizes: { [key: string]: number } = {};\n        for (let i = 0; i < tableHeaders.length; i++) {\n            const header = tableHeaders[i]!;\n            colSizes[`--header-${header.id}-size`] = header.getSize();\n            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n        }\n        return colSizes;\n    }, [tableHeaders, columnSizingInfo, columnSizing]);\n}\n\ntype SortState = SortDirection | false;\nfunction mapAriaSorting(sortState: SortState) {\n    switch (sortState) {\n        case \"asc\":\n            return \"ascending\";\n        case \"desc\":\n            return \"descending\";\n        default:\n            return \"none\";\n    }\n}\n"],"names":[],"mappings":"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"}

package/DataTable/createColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { createColumnHelper, Table as TanstackTable } from \"@tanstack/react-table\";\nimport { FormatOptions, ResultColumn, SelectionMode } from \"../ResultList\";\nimport { SelectComponent } from \"./SelectComponent\";\n\nexport const SELECT_COLUMN_SIZE = 70;\n\nconst columnHelper = createColumnHelper<BaseFeature>();\n\nexport interface CreateColumnsOptions {\n    columns: ResultColumn[];\n    intl: PackageIntl;\n    tableWidth?: number;\n    formatOptions?: FormatOptions;\n    selectionMode: SelectionMode;\n    selectionStyle: \"radio\" | \"checkbox\";\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const { columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(intl, selectionMode, selectionStyle);\n    const columnDefs = columns.map((column, index) => {\n        const columnWidth = column.width || remainingColumnWidth;\n        const configuredId =\n            column.id || (column.propertyName && slug(column.propertyName)) || String(index);\n        return createColumn({\n            id: \"result-list-col_\" + configuredId,\n            column: column,\n            intl: intl,\n            columnWidth: columnWidth,\n            formatOptions: formatOptions\n        });\n    });\n    return [selectionColumn, ...columnDefs];\n}\n\ninterface CreateColumnOptions {\n    id: string;\n    column: ResultColumn;\n    intl: PackageIntl;\n    columnWidth?: number;\n    formatOptions?: FormatOptions;\n}\n\nfunction createColumn(options: CreateColumnOptions) {\n    const { id, column, columnWidth, formatOptions, intl } = options;\n    const { propertyName, getPropertyValue } = column;\n    const hasPropertyValue = getPropertyValue != null || propertyName != null;\n\n    // TODO: Another issue\n    if (!hasPropertyValue) {\n        throw new Error(\n            \"Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'.\"\n        );\n    }\n\n    return columnHelper.accessor(\n        (feature: BaseFeature) => {\n            return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];\n        },\n        {\n            id: id,\n            cell: (info) => {\n                const cellValue = info.getValue();\n                if (column.renderCell) {\n                    return column.renderCell({\n                        feature: info.row.original,\n                        value: cellValue\n                    });\n                }\n                return renderFunc(cellValue, intl, formatOptions);\n            },\n            header: column.displayName ?? column.propertyName,\n            size: columnWidth\n        }\n    );\n}\n\nfunction renderFunc(cellValue: unknown, intl: PackageIntl, formatOptions?: FormatOptions) {\n    if (cellValue === null || cellValue === undefined) return \"\";\n    const type = typeof cellValue;\n    const formatNumber = (num: number | bigint) => {\n        if (Number.isNaN(num)) return \"\";\n        return intl.formatNumber(num, formatOptions?.numberOptions);\n    };\n\n    switch (type) {\n        case \"number\": {\n            return formatNumber(cellValue as number);\n        }\n        case \"bigint\": {\n            return formatNumber(cellValue as bigint);\n        }\n        case \"boolean\": {\n            return intl.formatMessage({ id: `displayBoolean.${cellValue}` });\n        }\n        case \"string\": {\n            return cellValue as string;\n        }\n        case \"object\": {\n            if (cellValue instanceof Date)\n                return intl.formatDate(cellValue, formatOptions?.dateOptions);\n            return cellValue.toString();\n        }\n        default:\n            return String(cellValue);\n    }\n}\n\nfunction createSelectionColumn(\n    intl: PackageIntl,\n    selectionMode: SelectionMode,\n    selectionStyle: \"radio\" | \"checkbox\"\n) {\n    return columnHelper.display({\n        id: \"selection-buttons\",\n        size: SELECT_COLUMN_SIZE,\n        enableSorting: false,\n        header: ({ table }) => {\n            if (selectionMode !== \"multi\") return;\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-all-container\"\n                >\n                    <SelectComponent\n                        className=\"result-list-select-all-checkbox\"\n                        isChecked={table.getIsAllRowsSelected()}\n                        isIndeterminate={table.getIsSomeRowsSelected()}\n                        onChange={table.getToggleAllRowsSelectedHandler()}\n                        toolTipLabel={getCheckboxToolTip(table, intl)}\n                    />\n                </chakra.div>\n            );\n        },\n        cell: ({ row }) => {\n            const className =\n                selectionStyle === \"radio\"\n                    ? \"result-list-select-row-radio\"\n                    : \"result-list-select-row-checkbox\";\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-row-container\"\n                >\n                    <SelectComponent\n                        mode={selectionStyle}\n                        className={className}\n                        isChecked={row.getIsSelected()}\n                        isDisabled={!row.getCanSelect()}\n                        isIndeterminate={row.getIsSomeSelected()}\n                        onChange={row.getToggleSelectedHandler()}\n                        aria-label={intl.formatMessage({\n                            id: \"ariaLabel.selectSingle\"\n                        })}\n                    />\n                </chakra.div>\n            );\n        }\n    });\n}\n\nfunction calcRemainingColumnWidth(\n    columns: ResultColumn[],\n    tableWidth: number,\n    selectColumnWidth: number = SELECT_COLUMN_SIZE\n) {\n    const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);\n    const undefinedWidthCount = columns.reduce(\n        (sum, column) => (column.width === undefined ? sum + 1 : sum),\n        0\n    );\n    const remainingWidth = tableWidth - selectColumnWidth - fullWidth;\n    return remainingWidth / undefinedWidthCount;\n}\n\nfunction getCheckboxToolTip<Data>(table: TanstackTable<Data>, intl: PackageIntl) {\n    if (table.getIsAllRowsSelected()) {\n        return intl.formatMessage({ id: \"deSelectAllTooltip\" });\n    } else {\n        return intl.formatMessage({ id: \"selectAllTooltip\" });\n    }\n}\n\nfunction slug(id: string) {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { createColumnHelper, Table as TanstackTable } from \"@tanstack/react-table\";\nimport { FormatOptions, ResultColumn, SelectionMode } from \"../ResultList\";\nimport { SelectComponent } from \"./SelectComponent\";\n\nexport const SELECT_COLUMN_SIZE = 70;\n\nconst columnHelper = createColumnHelper<BaseFeature>();\n\nexport interface CreateColumnsOptions {\n    columns: ResultColumn[];\n    intl: PackageIntl;\n    tableWidth?: number;\n    formatOptions?: FormatOptions;\n    selectionMode: SelectionMode;\n    selectionStyle: \"radio\" | \"checkbox\";\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const { columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(intl, selectionMode, selectionStyle);\n    const columnDefs = columns.map((column, index) => {\n        const columnWidth = column.width || remainingColumnWidth;\n        const configuredId =\n            column.id || (column.propertyName && slug(column.propertyName)) || String(index);\n        return createColumn({\n            id: \"result-list-col_\" + configuredId,\n            column: column,\n            intl: intl,\n            columnWidth: columnWidth,\n            formatOptions: formatOptions\n        });\n    });\n    return [selectionColumn, ...columnDefs];\n}\n\ninterface CreateColumnOptions {\n    id: string;\n    column: ResultColumn;\n    intl: PackageIntl;\n    columnWidth?: number;\n    formatOptions?: FormatOptions;\n}\n\nfunction createColumn(options: CreateColumnOptions) {\n    const { id, column, columnWidth, formatOptions, intl } = options;\n    const { propertyName, getPropertyValue } = column;\n    const hasPropertyValue = getPropertyValue != null || propertyName != null;\n\n    if (!hasPropertyValue) {\n        throw new Error(\n            \"Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'.\"\n        );\n    }\n\n    return columnHelper.accessor(\n        (feature: BaseFeature) => {\n            return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];\n        },\n        {\n            id: id,\n            cell: (info) => {\n                const cellValue = info.getValue();\n                if (column.renderCell) {\n                    return column.renderCell({\n                        feature: info.row.original,\n                        value: cellValue\n                    });\n                }\n                return renderFunc(cellValue, intl, formatOptions);\n            },\n            header: column.displayName ?? column.propertyName,\n            size: columnWidth\n        }\n    );\n}\n\nfunction renderFunc(cellValue: unknown, intl: PackageIntl, formatOptions?: FormatOptions) {\n    if (cellValue === null || cellValue === undefined) return \"\";\n    const type = typeof cellValue;\n    const formatNumber = (num: number | bigint) => {\n        if (Number.isNaN(num)) return \"\";\n        return intl.formatNumber(num, formatOptions?.numberOptions);\n    };\n\n    switch (type) {\n        case \"number\": {\n            return formatNumber(cellValue as number);\n        }\n        case \"bigint\": {\n            return formatNumber(cellValue as bigint);\n        }\n        case \"boolean\": {\n            return intl.formatMessage({ id: `displayBoolean.${cellValue}` });\n        }\n        case \"string\": {\n            return cellValue as string;\n        }\n        case \"object\": {\n            if (cellValue instanceof Date)\n                return intl.formatDate(cellValue, formatOptions?.dateOptions);\n            return cellValue.toString();\n        }\n        default:\n            return String(cellValue);\n    }\n}\n\nfunction createSelectionColumn(\n    intl: PackageIntl,\n    selectionMode: SelectionMode,\n    selectionStyle: \"radio\" | \"checkbox\"\n) {\n    return columnHelper.display({\n        id: \"selection-buttons\",\n        size: SELECT_COLUMN_SIZE,\n        enableSorting: false,\n        header: ({ table }) => {\n            if (selectionMode !== \"multi\") return;\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-all-container\"\n                >\n                    <SelectComponent\n                        className=\"result-list-select-all-checkbox\"\n                        isChecked={table.getIsAllRowsSelected()}\n                        isIndeterminate={table.getIsSomeRowsSelected()}\n                        onChange={table.getToggleAllRowsSelectedHandler()}\n                        toolTipLabel={getCheckboxToolTip(table, intl)}\n                    />\n                </chakra.div>\n            );\n        },\n        cell: ({ row }) => {\n            const className =\n                selectionStyle === \"radio\"\n                    ? \"result-list-select-row-radio\"\n                    : \"result-list-select-row-checkbox\";\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-row-container\"\n                >\n                    <SelectComponent\n                        mode={selectionStyle}\n                        className={className}\n                        isChecked={row.getIsSelected()}\n                        isDisabled={!row.getCanSelect()}\n                        isIndeterminate={row.getIsSomeSelected()}\n                        onChange={row.getToggleSelectedHandler()}\n                        aria-label={intl.formatMessage({\n                            id: \"ariaLabel.selectSingle\"\n                        })}\n                    />\n                </chakra.div>\n            );\n        }\n    });\n}\n\nfunction calcRemainingColumnWidth(\n    columns: ResultColumn[],\n    tableWidth: number,\n    selectColumnWidth: number = SELECT_COLUMN_SIZE\n) {\n    const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);\n    const undefinedWidthCount = columns.reduce(\n        (sum, column) => (column.width === undefined ? sum + 1 : sum),\n        0\n    );\n    const remainingWidth = tableWidth - selectColumnWidth - fullWidth;\n    return remainingWidth / undefinedWidthCount;\n}\n\nfunction getCheckboxToolTip<Data>(table: TanstackTable<Data>, intl: PackageIntl) {\n    if (table.getIsAllRowsSelected()) {\n        return intl.formatMessage({ id: \"deSelectAllTooltip\" });\n    } else {\n        return intl.formatMessage({ id: \"selectAllTooltip\" });\n    }\n}\n\nfunction slug(id: string) {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}

package/ResultList.d.ts

@@ -1,4 +1,4 @@
-import { BaseFeature, HighlightOptions, ZoomOptions } from "@open-pioneer/map";
+import { BaseFeature, HighlightOptions, MapModelProps, ZoomOptions } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { FC, ReactNode } from "react";
 import { FormatNumberOptions } from "@formatjs/intl";
@@ -110,11 +110,7 @@ export type SelectionMode = "multi" | "single";
 /**
  * Properties supported by the {@link ResultList} component.
  */
-export interface ResultListProps extends CommonComponentProps {
-    /**
-     * The id of the map.
-     */
-    mapId: string;
+export interface ResultListProps extends CommonComponentProps, MapModelProps {
     /**
      * Describes the data rendered by the component.
      */

package/ResultList.js

@@ -11,7 +11,6 @@ const ResultList = (props) => {
   const { containerProps } = useCommonComponentProps("result-list", props);
   const intl = useIntl();
   const {
-    mapId,
     input: { data, columns, formatOptions },
     memoizeRows = false,
     onSelectionChange,
@@ -22,7 +21,7 @@ const ResultList = (props) => {
     selectionStyle = selectionMode === "single" ? "radio" : "checkbox",
     highlightOptions
   } = props;
-  const { map } = useMapModel(mapId);
+  const { map } = useMapModel(props);
   if (columns.length === 0) {
     throw Error("No columns were defined. The result list cannot be displayed.");
   }

package/ResultList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature, HighlightOptions, useMapModel, ZoomOptions } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataTable } from \"./DataTable/DataTable\";\nimport { createColumns } from \"./DataTable/createColumns\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\n\n/**\n * Configures a column in the result list component.\n *\n * A column typically renders a property from the underlying feature.\n */\nexport interface ResultColumn {\n    /**\n     * Use this option to define an explicit column id.\n     * This can be helpful to track your column when it moves in the table (for example, the sort order can be maintained).\n     *\n     * If this is not defined, {@link propertyName} will serve as a fallback.\n     * If that is also not defined, the column index will be used instead.\n     *\n     * It is recommended to specify an id, if no {@link propertyName} has been set, because the\n     * column index fallback is not advised.\n     */\n    id?: string;\n\n    /**\n     * The display name of this column.\n     *\n     * If no `displayName` has been configured, {@link propertyName} will serve as a fallback value.\n     * If `propertyName` is also undefined, no column header will be rendered at all.\n     */\n    displayName?: string;\n\n    /**\n     * The width of this column, in pixels.\n     */\n    width?: number;\n\n    /**\n     * The property name to render.\n     *\n     * The value is expected to be available as `feature.properties[propertyName]`.\n     *\n     * See also {@link getPropertyValue}.\n     */\n    propertyName?: string;\n\n    /**\n     * Define this function to return a custom property value for this column.\n     *\n     * This can be used to create derived columns (by combining multiple properties into one value)\n     * or to create columns for property that don't exist directly on the feature.\n     *\n     * The return value of this function will be rendered by the table.\n     */\n    getPropertyValue?: (feature: BaseFeature) => unknown;\n\n    /** Custom render function to render a table cell in this column. */\n    renderCell?: (context: RenderCellContext) => ReactNode;\n}\n\n/**\n * The arguments passed to {@link ResultColumn.renderCell | renderCell}.\n */\nexport interface RenderCellContext {\n    /**\n     * The feature in this row.\n     */\n    feature: BaseFeature;\n\n    /**\n     * The value of this column.\n     * May be undefined if neither `propertyName` nor `getPropertyValue` was specified on the column.\n     */\n    value: unknown;\n}\n\n/**\n * To specify the format of cell values if they are of number or date type.\n */\nexport interface FormatOptions {\n    /**\n     * To specify the format of number type values\n     */\n    numberOptions?: FormatNumberOptions;\n    /**\n     *  To specify the format of date type values\n     */\n    dateOptions?: Intl.DateTimeFormatOptions;\n}\n\n/**\n * Configures the result list's content.\n */\nexport interface ResultListInput {\n    /**\n     * Configures the columns shown by the result list.\n     */\n    columns: ResultColumn[];\n\n    /**\n     * The data shown by the result list component.\n     * Every feature will be rendered as an individual row.\n     */\n    data: BaseFeature[];\n\n    /**\n     * Optional formatOptions to specify the `numberOptions` for number type values and\n     * `dateOptions` to specify the format of date type values\n     */\n    formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n    features: BaseFeature[];\n    getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * Describes the data rendered by the component.\n     */\n    input: ResultListInput;\n\n    /**\n     * The selection mode used by the result list. Defaults to `\"multi\"`.\n     */\n    selectionMode?: SelectionMode;\n\n    /**\n     * The style used for the selection controls in a row.\n     * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n     *\n     * Note: `\"radio\"` can not be used together with multi selection.\n     */\n    selectionStyle?: \"radio\" | \"checkbox\";\n\n    /**\n     * This handler is called whenever the user has changed the selected features in the result-list.\n     */\n    onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n    /**\n     * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n     */\n    enableZoom?: boolean;\n\n    /**\n     * Should data be highlighted in the map. Default true.\n     */\n    enableHighlight?: boolean;\n\n    /**\n     * Optional styling option\n     */\n    highlightOptions?: HighlightOptions;\n\n    /**\n     * Optional zooming options\n     */\n    zoomOptions?: ZoomOptions;\n\n    /**\n     * Should each row be memoized to improve render performance. Default `false`.\n     */\n    memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n    const { containerProps } = useCommonComponentProps(\"result-list\", props);\n    const intl = useIntl();\n    const {\n        mapId,\n        input: { data, columns, formatOptions },\n        memoizeRows = false,\n        onSelectionChange,\n        enableZoom = true,\n        zoomOptions,\n        enableHighlight = true,\n        selectionMode = \"multi\",\n        selectionStyle = selectionMode === \"single\" ? \"radio\" : \"checkbox\",\n        highlightOptions\n    } = props;\n\n    const { map } = useMapModel(mapId);\n\n    if (columns.length === 0) {\n        throw Error(\"No columns were defined. The result list cannot be displayed.\");\n    }\n\n    if (selectionMode === \"multi\" && selectionStyle === \"radio\") {\n        throw new Error(\"Cannot mix multi selection with selectionStyle 'radio'.\");\n    }\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const tableWidth = useTableWidth(containerRef);\n    const dataTableColumns = useMemo(\n        () =>\n            createColumns({\n                columns: columns,\n                intl: intl,\n                tableWidth: tableWidth,\n                formatOptions: formatOptions,\n                selectionMode,\n                selectionStyle\n            }),\n        [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle]\n    );\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n        if (enableZoom) {\n            map.zoom(data, zoomOptions);\n        }\n\n        if (enableHighlight) {\n            const highlight = map.highlight(data, highlightOptions);\n            return () => highlight.destroy();\n        }\n    }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n    return (\n        <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n            <DataTable\n                columns={dataTableColumns}\n                data={data}\n                memoizeRows={memoizeRows}\n                selectionMode={selectionMode}\n                onSelectionChange={onSelectionChange}\n            />\n        </Box>\n    );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement> | null) {\n    const [tableWidth, setTableWidth] = useState<number>();\n\n    useEffect(() => {\n        if (!tableRef?.current) return;\n        const resizeObserver = new ResizeObserver((event) => {\n            // Depending on the layout, you may need to swap inlineSize with blockSize\n            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n            const width = event[0]?.contentBoxSize[0]?.inlineSize;\n            if (width != null) {\n                setTableWidth(width);\n            }\n        });\n        resizeObserver.observe(tableRef.current);\n        return () => resizeObserver.disconnect();\n    }, [tableRef]);\n    return tableWidth;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@open-pioneer/chakra-integration\";\nimport {\n    BaseFeature,\n    HighlightOptions,\n    MapModelProps,\n    useMapModel,\n    ZoomOptions\n} from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataTable } from \"./DataTable/DataTable\";\nimport { createColumns } from \"./DataTable/createColumns\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\n\n/**\n * Configures a column in the result list component.\n *\n * A column typically renders a property from the underlying feature.\n */\nexport interface ResultColumn {\n    /**\n     * Use this option to define an explicit column id.\n     * This can be helpful to track your column when it moves in the table (for example, the sort order can be maintained).\n     *\n     * If this is not defined, {@link propertyName} will serve as a fallback.\n     * If that is also not defined, the column index will be used instead.\n     *\n     * It is recommended to specify an id, if no {@link propertyName} has been set, because the\n     * column index fallback is not advised.\n     */\n    id?: string;\n\n    /**\n     * The display name of this column.\n     *\n     * If no `displayName` has been configured, {@link propertyName} will serve as a fallback value.\n     * If `propertyName` is also undefined, no column header will be rendered at all.\n     */\n    displayName?: string;\n\n    /**\n     * The width of this column, in pixels.\n     */\n    width?: number;\n\n    /**\n     * The property name to render.\n     *\n     * The value is expected to be available as `feature.properties[propertyName]`.\n     *\n     * See also {@link getPropertyValue}.\n     */\n    propertyName?: string;\n\n    /**\n     * Define this function to return a custom property value for this column.\n     *\n     * This can be used to create derived columns (by combining multiple properties into one value)\n     * or to create columns for property that don't exist directly on the feature.\n     *\n     * The return value of this function will be rendered by the table.\n     */\n    getPropertyValue?: (feature: BaseFeature) => unknown;\n\n    /** Custom render function to render a table cell in this column. */\n    renderCell?: (context: RenderCellContext) => ReactNode;\n}\n\n/**\n * The arguments passed to {@link ResultColumn.renderCell | renderCell}.\n */\nexport interface RenderCellContext {\n    /**\n     * The feature in this row.\n     */\n    feature: BaseFeature;\n\n    /**\n     * The value of this column.\n     * May be undefined if neither `propertyName` nor `getPropertyValue` was specified on the column.\n     */\n    value: unknown;\n}\n\n/**\n * To specify the format of cell values if they are of number or date type.\n */\nexport interface FormatOptions {\n    /**\n     * To specify the format of number type values\n     */\n    numberOptions?: FormatNumberOptions;\n    /**\n     *  To specify the format of date type values\n     */\n    dateOptions?: Intl.DateTimeFormatOptions;\n}\n\n/**\n * Configures the result list's content.\n */\nexport interface ResultListInput {\n    /**\n     * Configures the columns shown by the result list.\n     */\n    columns: ResultColumn[];\n\n    /**\n     * The data shown by the result list component.\n     * Every feature will be rendered as an individual row.\n     */\n    data: BaseFeature[];\n\n    /**\n     * Optional formatOptions to specify the `numberOptions` for number type values and\n     * `dateOptions` to specify the format of date type values\n     */\n    formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n    features: BaseFeature[];\n    getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Describes the data rendered by the component.\n     */\n    input: ResultListInput;\n\n    /**\n     * The selection mode used by the result list. Defaults to `\"multi\"`.\n     */\n    selectionMode?: SelectionMode;\n\n    /**\n     * The style used for the selection controls in a row.\n     * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n     *\n     * Note: `\"radio\"` can not be used together with multi selection.\n     */\n    selectionStyle?: \"radio\" | \"checkbox\";\n\n    /**\n     * This handler is called whenever the user has changed the selected features in the result-list.\n     */\n    onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n    /**\n     * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n     */\n    enableZoom?: boolean;\n\n    /**\n     * Should data be highlighted in the map. Default true.\n     */\n    enableHighlight?: boolean;\n\n    /**\n     * Optional styling option\n     */\n    highlightOptions?: HighlightOptions;\n\n    /**\n     * Optional zooming options\n     */\n    zoomOptions?: ZoomOptions;\n\n    /**\n     * Should each row be memoized to improve render performance. Default `false`.\n     */\n    memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n    const { containerProps } = useCommonComponentProps(\"result-list\", props);\n    const intl = useIntl();\n    const {\n        input: { data, columns, formatOptions },\n        memoizeRows = false,\n        onSelectionChange,\n        enableZoom = true,\n        zoomOptions,\n        enableHighlight = true,\n        selectionMode = \"multi\",\n        selectionStyle = selectionMode === \"single\" ? \"radio\" : \"checkbox\",\n        highlightOptions\n    } = props;\n\n    const { map } = useMapModel(props);\n\n    if (columns.length === 0) {\n        throw Error(\"No columns were defined. The result list cannot be displayed.\");\n    }\n\n    if (selectionMode === \"multi\" && selectionStyle === \"radio\") {\n        throw new Error(\"Cannot mix multi selection with selectionStyle 'radio'.\");\n    }\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const tableWidth = useTableWidth(containerRef);\n    const dataTableColumns = useMemo(\n        () =>\n            createColumns({\n                columns: columns,\n                intl: intl,\n                tableWidth: tableWidth,\n                formatOptions: formatOptions,\n                selectionMode,\n                selectionStyle\n            }),\n        [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle]\n    );\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n        if (enableZoom) {\n            map.zoom(data, zoomOptions);\n        }\n\n        if (enableHighlight) {\n            const highlight = map.highlight(data, highlightOptions);\n            return () => highlight.destroy();\n        }\n    }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n    return (\n        <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n            <DataTable\n                columns={dataTableColumns}\n                data={data}\n                memoizeRows={memoizeRows}\n                selectionMode={selectionMode}\n                onSelectionChange={onSelectionChange}\n            />\n        </Box>\n    );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement> | null) {\n    const [tableWidth, setTableWidth] = useState<number>();\n\n    useEffect(() => {\n        if (!tableRef?.current) return;\n        const resizeObserver = new ResizeObserver((event) => {\n            // Depending on the layout, you may need to swap inlineSize with blockSize\n            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n            const width = event[0]?.contentBoxSize[0]?.inlineSize;\n            if (width != null) {\n                setTableWidth(width);\n            }\n        });\n        resizeObserver.observe(tableRef.current);\n        return () => resizeObserver.disconnect();\n    }, [tableRef]);\n    return tableWidth;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/result-list",
-  "version": "0.3.2",
+  "version": "0.7.0",
   "description": "This package provides a UI component to display features and their attributes.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,19 +14,17 @@
     "directory": "src/packages/result-list"
   },
   "dependencies": {
-    "react-use": "^17.5.1"
-  },
-  "peerDependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@open-pioneer/chakra-integration": "^1.1.4",
-    "@open-pioneer/core": "^1.3.0",
-    "@open-pioneer/react-utils": "^1.0.1",
-    "@open-pioneer/runtime": "^2.1.7",
-    "@tanstack/react-table": "^8.11.6",
+    "@chakra-ui/icons": "^2.2.4",
+    "@open-pioneer/chakra-integration": "^2.3.0",
+    "@open-pioneer/core": "^2.3.0",
+    "@open-pioneer/react-utils": "^2.3.0",
+    "@open-pioneer/runtime": "^2.3.0",
+    "@tanstack/react-table": "^8.20.5",
     "classnames": "^2.3.2",
     "ol": "^9.2.4",
     "react": "^18.3.1",
-    "@open-pioneer/map": "^0.6.1"
+    "react-use": "^17.5.1",
+    "@open-pioneer/map": "^0.7.0"
   },
   "exports": {
     "./package.json": "./package.json",