@open-pioneer/result-list 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @open-pioneer/result-list
 
+## 0.3.1
+
+### Patch Changes
+
+-   28e092a: Update dependencies
+-   Updated dependencies [28e092a]
+-   Updated dependencies [0d51d2f]
+-   Updated dependencies [76f8863]
+    -   @open-pioneer/map@0.6.0
+
+## 0.3.0
+
+### Minor Changes
+
+-   fbd12d6: Added the possibility to configure single or multi row selection mode.
+-   9a0c1a9: Added a new optional parameter `memoizeRows` to improve render performance.
+    When rows are memoized, they are only rerendered under certain conditions (e.g. selection changes, sort order changes), which can
+    greatly improve performance in some circumstances.
+
+    Example:
+
+    ```tsx
+    <ResultList mapId={mapId} input={input} memoizeRows={true} />
+    ```
+
+-   5623b5e: Changed ResultListProps interface to differentiate between highlightOptions and zoomOptions.
+
+### Patch Changes
+
+-   4140646: Fix imports.
+-   4140646: Update trails dependencies
+-   4140646: Update to react 18.3.1
+-   81bc7da: Update trails dependencies
+-   2c092dc: Update dependencies
+-   Updated dependencies [4140646]
+-   Updated dependencies [4140646]
+-   Updated dependencies [b5bb7a1]
+-   Updated dependencies [81bc7da]
+-   Updated dependencies [2c092dc]
+-   Updated dependencies [4140646]
+    -   @open-pioneer/react-utils@0.2.3
+    -   @open-pioneer/map@0.5.1
+
 ## 0.2.0
 
 ### Minor Changes

package/DataTable/ColumnResizer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function ColumnResizer(props: {
     onDoubleClick: React.MouseEventHandler<HTMLElement>;
     onMouseDown: React.MouseEventHandler<HTMLElement>;

package/DataTable/ColumnSortIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SortDirection } from "@tanstack/react-table";
 export declare function ColumnSortIndicator(props: {
     isSorted: false | SortDirection;

package/DataTable/DataTable.d.ts

@@ -1,9 +1,11 @@
 import { BaseFeature } from "@open-pioneer/map";
 import { ColumnDef } from "@tanstack/react-table";
-import { ResultListSelectionChangeEvent } from "../ResultList";
+import { ResultListSelectionChangeEvent, SelectionMode } from "../ResultList";
 export interface DataTableProps<Data extends BaseFeature> {
     data: Data[];
     columns: ColumnDef<Data>[];
+    memoizeRows: boolean;
+    selectionMode: SelectionMode;
     onSelectionChange?(event: ResultListSelectionChangeEvent): void;
 }
 export declare function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>): import("react/jsx-runtime").JSX.Element;

package/DataTable/DataTable.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Tbody, Tr, Td, chakra, Table, Thead, useToken, Th } from '@open-pioneer/chakra-integration';
+import { chakra, Table, Thead, Tbody, useToken, Tr, Th, Td } from '@open-pioneer/chakra-integration';
 import { createLogger } from '@open-pioneer/core';
 import { flexRender } from '@tanstack/react-table';
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { useSetupTable } from './useSetupTable.js';
 const LOG = createLogger("result-list:DataTable");
 function DataTable(props) {
   const intl = useIntl();
+  const { memoizeRows } = props;
   const { table } = useSetupTable(props);
   const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;
   const columnSizeVars = useColumnSizeVars(table);
@@ -39,7 +40,7 @@ function DataTable(props) {
       },
       children: [
         /* @__PURE__ */ jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderGroup, { headerGroup }, headerGroup.id)) }),
-        isResizing ? /* @__PURE__ */ jsx(MemoizedTableBody, { table }) : /* @__PURE__ */ jsx(TableBody, { table })
+        /* @__PURE__ */ jsx(Tbody, { className: "result-list-table-body", children: memoizeRows || isResizing ? /* @__PURE__ */ jsx(MemoizedTableRows, { table }) : /* @__PURE__ */ jsx(TableRows, { table }) })
       ]
     }
   );
@@ -96,8 +97,8 @@ function TableHeader(props) {
     }
   );
 }
-function TableBody({ table }) {
-  return /* @__PURE__ */ jsx(Tbody, { className: "result-list-table-body", children: table.getRowModel().rows.map((row) => {
+function TableRows({ table }) {
+  return table.getRowModel().rows.map((row) => {
     return /* @__PURE__ */ jsx(Tr, { className: "result-list-table-row", children: row.getVisibleCells().map((cell) => {
       const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;
       return /* @__PURE__ */ jsx(
@@ -110,12 +111,14 @@ function TableBody({ table }) {
         cell.id
       );
     }) }, row.id);
-  }) });
+  });
+}
+function MemoizedTableRows({ table }) {
+  const memoizedRows = React.useMemo(() => {
+    return /* @__PURE__ */ jsx(TableRows, { table });
+  }, [table, table.getSortedRowModel().rows, table.getSelectedRowModel().rows]);
+  return memoizedRows;
 }
-const MemoizedTableBody = React.memo(
-  TableBody,
-  (prev, next) => prev.table.options.data === next.table.options.data
-);
 function useColumnSizeVars(table) {
   const columnSizingInfo = table.getState().columnSizingInfo;
   const columnSizing = table.getState().columnSizing;

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, { useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n    data: Data[];\n    columns: ColumnDef<Data>[];\n    onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\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            {isResizing ? <MemoizedTableBody table={table} /> : <TableBody table={table} />}\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\n//un-memoized normal table body component - see memoized version below\nfunction TableBody<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return (\n        <Tbody className=\"result-list-table-body\">\n            {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        </Tbody>\n    );\n}\n\n// Special memoized wrapper for our table body that we will use during column resizing.\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant\nconst MemoizedTableBody = React.memo(\n    TableBody,\n    (prev, next) => prev.table.options.data === next.table.options.data\n) as typeof TableBody;\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        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/SelectComponent.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent } from "react";
+export interface SelectComponentProps {
+    mode?: "checkbox" | "radio";
+    toolTipLabel?: string;
+    className?: string;
+    "aria-label"?: string;
+    isIndeterminate?: boolean;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function SelectComponent({ mode, toolTipLabel, ...props }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;

package/DataTable/SelectComponent.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip, chakra, Checkbox, Radio } from '@open-pioneer/chakra-integration';
+import { useMemo, useId } from 'react';
+
+function SelectComponent({
+  mode = "checkbox",
+  toolTipLabel,
+  ...props
+}) {
+  const Component = mode === "checkbox" ? Checkbox : SelectRadio;
+  const renderedComponent = useMemo(() => {
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  }, [Component, props]);
+  if (!toolTipLabel) {
+    return renderedComponent;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: toolTipLabel, placement: "right", closeOnClick: false, children: /* @__PURE__ */ jsx(
+    chakra.span,
+    {
+      children: renderedComponent
+    }
+  ) });
+}
+function SelectRadio(props) {
+  const id = useId();
+  const { isIndeterminate, ...rest } = props;
+  return /* @__PURE__ */ jsx(Radio, { name: id, ...rest });
+}
+
+export { SelectComponent };
+//# sourceMappingURL=SelectComponent.js.map

package/DataTable/SelectComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponent.js","sources":["SelectComponent.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Checkbox, Radio, Tooltip, chakra } from \"@open-pioneer/chakra-integration\";\nimport { ChangeEvent, useId, useMemo } from \"react\";\n\nexport interface SelectComponentProps {\n    mode?: \"checkbox\" | \"radio\";\n    toolTipLabel?: string;\n\n    className?: string;\n    \"aria-label\"?: string;\n    isIndeterminate?: boolean;\n    isChecked?: boolean;\n    isDisabled?: boolean;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function SelectComponent({\n    mode = \"checkbox\",\n    toolTipLabel,\n    ...props\n}: SelectComponentProps) {\n    const Component = mode === \"checkbox\" ? Checkbox : SelectRadio;\n    const renderedComponent = useMemo(() => {\n        return <Component {...props} />;\n    }, [Component, props]);\n    if (!toolTipLabel) {\n        return renderedComponent;\n    }\n\n    return (\n        <Tooltip label={toolTipLabel} placement=\"right\" closeOnClick={false}>\n            <chakra.span\n            /* \n                wrap into span to fix tooltip around checkbox, see https://github.com/chakra-ui/chakra-ui/issues/6353\n                not using \"shouldWrapChildren\" because that also introduces a _focusable_ span (we only want the checkbox)\n            */\n            >\n                {renderedComponent}\n            </chakra.span>\n        </Tooltip>\n    );\n}\n\nfunction SelectRadio(props: Omit<SelectComponentProps, \"mode\">) {\n    const id = useId();\n    const { isIndeterminate, ...rest } = props;\n    void isIndeterminate; // ignored, not supported by radio button\n\n    /** Name seems to be required for screen reader tabbing support. */\n    return <Radio name={id} {...rest} />;\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,eAAgB,CAAA;AAAA,EAC5B,IAAO,GAAA,UAAA;AAAA,EACP,YAAA;AAAA,EACA,GAAG,KAAA;AACP,CAAyB,EAAA;AACrB,EAAM,MAAA,SAAA,GAAY,IAAS,KAAA,UAAA,GAAa,QAAW,GAAA,WAAA,CAAA;AACnD,EAAM,MAAA,iBAAA,GAAoB,QAAQ,MAAM;AACpC,IAAO,uBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,GAC9B,EAAA,CAAC,SAAW,EAAA,KAAK,CAAC,CAAA,CAAA;AACrB,EAAA,IAAI,CAAC,YAAc,EAAA;AACf,IAAO,OAAA,iBAAA,CAAA;AAAA,GACX;AAEA,EAAA,2BACK,OAAQ,EAAA,EAAA,KAAA,EAAO,cAAc,SAAU,EAAA,OAAA,EAAQ,cAAc,KAC1D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MAMI,QAAA,EAAA,iBAAA;AAAA,KAAA;AAAA,GAET,EAAA,CAAA,CAAA;AAER,CAAA;AAEA,SAAS,YAAY,KAA2C,EAAA;AAC5D,EAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,EAAA,MAAM,EAAE,eAAA,EAAiB,GAAG,IAAA,EAAS,GAAA,KAAA,CAAA;AAIrC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAM,IAAM,EAAA,EAAA,EAAK,GAAG,IAAM,EAAA,CAAA,CAAA;AACtC;;;;"}

package/DataTable/createColumns.d.ts

@@ -1,11 +1,13 @@
 import { BaseFeature } from "@open-pioneer/map";
 import { PackageIntl } from "@open-pioneer/runtime";
-import { FormatOptions, ResultColumn } from "../ResultList";
+import { FormatOptions, ResultColumn, SelectionMode } from "../ResultList";
 export declare const SELECT_COLUMN_SIZE = 70;
 export interface CreateColumnsOptions {
     columns: ResultColumn[];
     intl: PackageIntl;
     tableWidth?: number;
     formatOptions?: FormatOptions;
+    selectionMode: SelectionMode;
+    selectionStyle: "radio" | "checkbox";
 }
-export declare function createColumns(options: CreateColumnsOptions): import("@tanstack/react-table").ColumnDef<BaseFeature, unknown>[];
+export declare function createColumns(options: CreateColumnsOptions): ((import("@tanstack/react-table").ColumnDefBase<BaseFeature, unknown> & import("@tanstack/react-table").StringHeaderIdentifier) | (import("@tanstack/react-table").ColumnDefBase<BaseFeature, unknown> & import("@tanstack/react-table").IdIdentifier<BaseFeature, unknown>))[];

package/DataTable/createColumns.js

@@ -1,14 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { chakra } from '@open-pioneer/chakra-integration';
 import { createColumnHelper } from '@tanstack/react-table';
-import { SelectCheckbox } from './SelectCheckbox.js';
+import { SelectComponent } from './SelectComponent.js';
 
 const SELECT_COLUMN_SIZE = 70;
 const columnHelper = createColumnHelper();
 function createColumns(options) {
-  const { columns, intl, tableWidth, formatOptions } = options;
+  const { columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle } = options;
   const remainingColumnWidth = tableWidth === void 0 ? void 0 : calcRemainingColumnWidth(columns, tableWidth);
-  const selectionColumn = createSelectionColumn(intl);
+  const selectionColumn = createSelectionColumn(intl, selectionMode, selectionStyle);
   const columnDefs = columns.map((column, index) => {
     const columnWidth = column.width || remainingColumnWidth;
     const configuredId = column.id || column.propertyName && slug(column.propertyName) || String(index);
@@ -53,12 +53,10 @@ function createColumn(options) {
   );
 }
 function renderFunc(cellValue, intl, formatOptions) {
-  if (cellValue === null || cellValue === void 0)
-    return "";
+  if (cellValue === null || cellValue === void 0) return "";
   const type = typeof cellValue;
   const formatNumber = (num) => {
-    if (Number.isNaN(num))
-      return "";
+    if (Number.isNaN(num)) return "";
     return intl.formatNumber(num, formatOptions?.numberOptions);
   };
   switch (type) {
@@ -83,12 +81,13 @@ function renderFunc(cellValue, intl, formatOptions) {
       return String(cellValue);
   }
 }
-function createSelectionColumn(intl) {
+function createSelectionColumn(intl, selectionMode, selectionStyle) {
   return columnHelper.display({
     id: "selection-buttons",
     size: SELECT_COLUMN_SIZE,
     enableSorting: false,
     header: ({ table }) => {
+      if (selectionMode !== "multi") return;
       return /* @__PURE__ */ jsx(
         chakra.div,
         {
@@ -96,9 +95,9 @@ function createSelectionColumn(intl) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          className: "result-list-select-all-checkbox-container",
+          className: "result-list-select-all-container",
           children: /* @__PURE__ */ jsx(
-            SelectCheckbox,
+            SelectComponent,
             {
               className: "result-list-select-all-checkbox",
               isChecked: table.getIsAllRowsSelected(),
@@ -111,6 +110,7 @@ function createSelectionColumn(intl) {
       );
     },
     cell: ({ row }) => {
+      const className = selectionStyle === "radio" ? "result-list-select-row-radio" : "result-list-select-row-checkbox";
       return /* @__PURE__ */ jsx(
         chakra.div,
         {
@@ -118,16 +118,17 @@ function createSelectionColumn(intl) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          className: "result-list-select-row-checkbox-container",
+          className: "result-list-select-row-container",
           children: /* @__PURE__ */ jsx(
-            SelectCheckbox,
+            SelectComponent,
             {
-              className: "result-list-select-row-checkbox",
+              mode: selectionStyle,
+              className,
               isChecked: row.getIsSelected(),
               isDisabled: !row.getCanSelect(),
               isIndeterminate: row.getIsSomeSelected(),
               onChange: row.getToggleSelectedHandler(),
-              ariaLabel: intl.formatMessage({
+              "aria-label": intl.formatMessage({
                 id: "ariaLabel.selectSingle"
               })
             }

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 } from \"@tanstack/react-table\";\nimport { Table as TanstackTable } from \"@tanstack/table-core/build/lib/types\";\nimport { FormatOptions, ResultColumn } from \"../ResultList\";\nimport { SelectCheckbox } from \"./SelectCheckbox\";\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}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const { columns, intl, tableWidth, formatOptions } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(intl);\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(intl: PackageIntl) {\n    return columnHelper.display({\n        id: \"selection-buttons\",\n        size: SELECT_COLUMN_SIZE,\n        enableSorting: false,\n        header: ({ table }) => {\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-all-checkbox-container\"\n                >\n                    <SelectCheckbox\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            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-row-checkbox-container\"\n                >\n                    <SelectCheckbox\n                        className=\"result-list-select-row-checkbox\"\n                        isChecked={row.getIsSelected()}\n                        isDisabled={!row.getCanSelect()}\n                        isIndeterminate={row.getIsSomeSelected()}\n                        onChange={row.getToggleSelectedHandler()}\n                        ariaLabel={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    // 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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"}

package/DataTable/useSetupTable.js

@@ -1,10 +1,12 @@
 import { useEvent } from '@open-pioneer/react-utils';
 import { useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import { usePrevious } from 'react-use';
 
 function useSetupTable(props) {
-  const { data, columns, onSelectionChange } = props;
+  const { data, columns, onSelectionChange, selectionMode } = props;
   const [sorting, setSorting] = useState([]);
+  const previousSelectionMode = usePrevious(props.selectionMode);
   const [rowSelection, setRowSelection] = useState({});
   const actualSort = useMemo(() => {
     return sorting.filter((sort) => columns.some((c) => c.id === sort.id));
@@ -45,6 +47,7 @@ function useSetupTable(props) {
     columnResizeMode: "onChange",
     getCoreRowModel: getCoreRowModel(),
     enableRowSelection: true,
+    enableMultiRowSelection: selectionMode === "multi",
     onRowSelectionChange: updateSelection,
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
@@ -53,6 +56,11 @@ function useSetupTable(props) {
       rowSelection
     }
   });
+  useEffect(() => {
+    if (previousSelectionMode && selectionMode !== previousSelectionMode) {
+      table.resetRowSelection();
+    }
+  }, [table, previousSelectionMode, selectionMode]);
   return { table, sorting, rowSelection };
 }
 function applyUpdate(current, updaterOrValue) {

package/DataTable/useSetupTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSetupTable.js","sources":["useSetupTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport {\n    RowSelectionState,\n    SortingState,\n    Updater,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { DataTableProps } from \"./DataTable\";\n\nexport function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const { data, columns, onSelectionChange: onSelectionChange } = props;\n    const [sorting, setSorting] = useState<SortingState>([]);\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    // Only sort by columns which actually exist\n    const actualSort = useMemo(() => {\n        return sorting.filter((sort) => columns.some((c) => c.id === sort.id));\n    }, [sorting, columns]);\n\n    const updateSelection = useEvent((updaterOrValue: Updater<RowSelectionState>) => {\n        const newSelection = applyUpdate(rowSelection, updaterOrValue);\n        if (newSelection === rowSelection) {\n            return;\n        }\n\n        setRowSelection(newSelection);\n\n        if (onSelectionChange) {\n            const rowsById = table.getCoreRowModel().rowsById;\n            const selectedFeatures: BaseFeature[] = [];\n            for (const rowId of Object.keys(newSelection)) {\n                if (!newSelection[rowId]) {\n                    continue;\n                }\n\n                const row = rowsById[rowId];\n                if (!row) {\n                    continue;\n                }\n\n                selectedFeatures.push(row.original);\n            }\n\n            onSelectionChange({\n                features: selectedFeatures,\n                getFeatureIds: () => {\n                    return selectedFeatures.map((feature: BaseFeature) => feature.id);\n                }\n            });\n        }\n    });\n\n    const table = useReactTable({\n        columns: columns,\n        data,\n        getRowId(feature) {\n            return String(feature.id);\n        },\n        columnResizeMode: \"onChange\",\n        getCoreRowModel: getCoreRowModel(),\n        enableRowSelection: true,\n        onRowSelectionChange: updateSelection,\n        onSortingChange: setSorting,\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            sorting: actualSort,\n            rowSelection\n        }\n    });\n\n    return { table, sorting, rowSelection };\n}\n\nfunction applyUpdate<T>(current: T, updaterOrValue: Updater<T>): T {\n    if (typeof updaterOrValue === \"function\") {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return (updaterOrValue as any)(current);\n    }\n    return updaterOrValue;\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,cAAwC,KAA6B,EAAA;AACjF,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,iBAAA,EAAyC,GAAA,KAAA,CAAA;AAChE,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAuB,EAAE,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAA4B,EAAE,CAAA,CAAA;AAGtE,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC7B,IAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,EAAA,KAAO,IAAK,CAAA,EAAE,CAAC,CAAA,CAAA;AAAA,GACtE,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkB,QAAS,CAAA,CAAC,cAA+C,KAAA;AAC7E,IAAM,MAAA,YAAA,GAAe,WAAY,CAAA,YAAA,EAAc,cAAc,CAAA,CAAA;AAC7D,IAAA,IAAI,iBAAiB,YAAc,EAAA;AAC/B,MAAA,OAAA;AAAA,KACJ;AAEA,IAAA,eAAA,CAAgB,YAAY,CAAA,CAAA;AAE5B,IAAA,IAAI,iBAAmB,EAAA;AACnB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,eAAA,EAAkB,CAAA,QAAA,CAAA;AACzC,MAAA,MAAM,mBAAkC,EAAC,CAAA;AACzC,MAAA,KAAA,MAAW,KAAS,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAG,EAAA;AAC3C,QAAI,IAAA,CAAC,YAAa,CAAA,KAAK,CAAG,EAAA;AACtB,UAAA,SAAA;AAAA,SACJ;AAEA,QAAM,MAAA,GAAA,GAAM,SAAS,KAAK,CAAA,CAAA;AAC1B,QAAA,IAAI,CAAC,GAAK,EAAA;AACN,UAAA,SAAA;AAAA,SACJ;AAEA,QAAiB,gBAAA,CAAA,IAAA,CAAK,IAAI,QAAQ,CAAA,CAAA;AAAA,OACtC;AAEA,MAAkB,iBAAA,CAAA;AAAA,QACd,QAAU,EAAA,gBAAA;AAAA,QACV,eAAe,MAAM;AACjB,UAAA,OAAO,gBAAiB,CAAA,GAAA,CAAI,CAAC,OAAA,KAAyB,QAAQ,EAAE,CAAA,CAAA;AAAA,SACpE;AAAA,OACH,CAAA,CAAA;AAAA,KACL;AAAA,GACH,CAAA,CAAA;AAED,EAAA,MAAM,QAAQ,aAAc,CAAA;AAAA,IACxB,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAS,OAAS,EAAA;AACd,MAAO,OAAA,MAAA,CAAO,QAAQ,EAAE,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,gBAAkB,EAAA,UAAA;AAAA,IAClB,iBAAiB,eAAgB,EAAA;AAAA,IACjC,kBAAoB,EAAA,IAAA;AAAA,IACpB,oBAAsB,EAAA,eAAA;AAAA,IACtB,eAAiB,EAAA,UAAA;AAAA,IACjB,mBAAmB,iBAAkB,EAAA;AAAA,IACrC,KAAO,EAAA;AAAA,MACH,OAAS,EAAA,UAAA;AAAA,MACT,YAAA;AAAA,KACJ;AAAA,GACH,CAAA,CAAA;AAED,EAAO,OAAA,EAAE,KAAO,EAAA,OAAA,EAAS,YAAa,EAAA,CAAA;AAC1C,CAAA;AAEA,SAAS,WAAA,CAAe,SAAY,cAA+B,EAAA;AAC/D,EAAI,IAAA,OAAO,mBAAmB,UAAY,EAAA;AAEtC,IAAA,OAAQ,eAAuB,OAAO,CAAA,CAAA;AAAA,GAC1C;AACA,EAAO,OAAA,cAAA,CAAA;AACX;;;;"}
+{"version":3,"file":"useSetupTable.js","sources":["useSetupTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport {\n    RowSelectionState,\n    SortingState,\n    Updater,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { usePrevious } from \"react-use\";\nimport { DataTableProps } from \"./DataTable\";\n\nexport function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const { data, columns, onSelectionChange: onSelectionChange, selectionMode } = props;\n    const [sorting, setSorting] = useState<SortingState>([]);\n    const previousSelectionMode = usePrevious(props.selectionMode);\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    // Only sort by columns which actually exist\n    const actualSort = useMemo(() => {\n        return sorting.filter((sort) => columns.some((c) => c.id === sort.id));\n    }, [sorting, columns]);\n\n    const updateSelection = useEvent((updaterOrValue: Updater<RowSelectionState>) => {\n        const newSelection = applyUpdate(rowSelection, updaterOrValue);\n        if (newSelection === rowSelection) {\n            return;\n        }\n\n        setRowSelection(newSelection);\n\n        if (onSelectionChange) {\n            const rowsById = table.getCoreRowModel().rowsById;\n            const selectedFeatures: BaseFeature[] = [];\n            for (const rowId of Object.keys(newSelection)) {\n                if (!newSelection[rowId]) {\n                    continue;\n                }\n\n                const row = rowsById[rowId];\n                if (!row) {\n                    continue;\n                }\n\n                selectedFeatures.push(row.original);\n            }\n\n            onSelectionChange({\n                features: selectedFeatures,\n                getFeatureIds: () => {\n                    return selectedFeatures.map((feature: BaseFeature) => feature.id);\n                }\n            });\n        }\n    });\n\n    const table = useReactTable({\n        columns: columns,\n        data,\n        getRowId(feature) {\n            return String(feature.id);\n        },\n        columnResizeMode: \"onChange\",\n        getCoreRowModel: getCoreRowModel(),\n        enableRowSelection: true,\n        enableMultiRowSelection: selectionMode === \"multi\",\n        onRowSelectionChange: updateSelection,\n        onSortingChange: setSorting,\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            sorting: actualSort,\n            rowSelection\n        }\n    });\n\n    useEffect(() => {\n        if (previousSelectionMode && selectionMode !== previousSelectionMode) {\n            table.resetRowSelection();\n        }\n    }, [table, previousSelectionMode, selectionMode]);\n\n    return { table, sorting, rowSelection };\n}\n\nfunction applyUpdate<T>(current: T, updaterOrValue: Updater<T>): T {\n    if (typeof updaterOrValue === \"function\") {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return (updaterOrValue as any)(current);\n    }\n    return updaterOrValue;\n}\n"],"names":[],"mappings":";;;;;AAgBO,SAAS,cAAwC,KAA6B,EAAA;AACjF,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,iBAAA,EAAsC,eAAkB,GAAA,KAAA,CAAA;AAC/E,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAuB,EAAE,CAAA,CAAA;AACvD,EAAM,MAAA,qBAAA,GAAwB,WAAY,CAAA,KAAA,CAAM,aAAa,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAA4B,EAAE,CAAA,CAAA;AAGtE,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC7B,IAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,EAAA,KAAO,IAAK,CAAA,EAAE,CAAC,CAAA,CAAA;AAAA,GACtE,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkB,QAAS,CAAA,CAAC,cAA+C,KAAA;AAC7E,IAAM,MAAA,YAAA,GAAe,WAAY,CAAA,YAAA,EAAc,cAAc,CAAA,CAAA;AAC7D,IAAA,IAAI,iBAAiB,YAAc,EAAA;AAC/B,MAAA,OAAA;AAAA,KACJ;AAEA,IAAA,eAAA,CAAgB,YAAY,CAAA,CAAA;AAE5B,IAAA,IAAI,iBAAmB,EAAA;AACnB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,eAAA,EAAkB,CAAA,QAAA,CAAA;AACzC,MAAA,MAAM,mBAAkC,EAAC,CAAA;AACzC,MAAA,KAAA,MAAW,KAAS,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAG,EAAA;AAC3C,QAAI,IAAA,CAAC,YAAa,CAAA,KAAK,CAAG,EAAA;AACtB,UAAA,SAAA;AAAA,SACJ;AAEA,QAAM,MAAA,GAAA,GAAM,SAAS,KAAK,CAAA,CAAA;AAC1B,QAAA,IAAI,CAAC,GAAK,EAAA;AACN,UAAA,SAAA;AAAA,SACJ;AAEA,QAAiB,gBAAA,CAAA,IAAA,CAAK,IAAI,QAAQ,CAAA,CAAA;AAAA,OACtC;AAEA,MAAkB,iBAAA,CAAA;AAAA,QACd,QAAU,EAAA,gBAAA;AAAA,QACV,eAAe,MAAM;AACjB,UAAA,OAAO,gBAAiB,CAAA,GAAA,CAAI,CAAC,OAAA,KAAyB,QAAQ,EAAE,CAAA,CAAA;AAAA,SACpE;AAAA,OACH,CAAA,CAAA;AAAA,KACL;AAAA,GACH,CAAA,CAAA;AAED,EAAA,MAAM,QAAQ,aAAc,CAAA;AAAA,IACxB,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAS,OAAS,EAAA;AACd,MAAO,OAAA,MAAA,CAAO,QAAQ,EAAE,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,gBAAkB,EAAA,UAAA;AAAA,IAClB,iBAAiB,eAAgB,EAAA;AAAA,IACjC,kBAAoB,EAAA,IAAA;AAAA,IACpB,yBAAyB,aAAkB,KAAA,OAAA;AAAA,IAC3C,oBAAsB,EAAA,eAAA;AAAA,IACtB,eAAiB,EAAA,UAAA;AAAA,IACjB,mBAAmB,iBAAkB,EAAA;AAAA,IACrC,KAAO,EAAA;AAAA,MACH,OAAS,EAAA,UAAA;AAAA,MACT,YAAA;AAAA,KACJ;AAAA,GACH,CAAA,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACZ,IAAI,IAAA,qBAAA,IAAyB,kBAAkB,qBAAuB,EAAA;AAClE,MAAA,KAAA,CAAM,iBAAkB,EAAA,CAAA;AAAA,KAC5B;AAAA,GACD,EAAA,CAAC,KAAO,EAAA,qBAAA,EAAuB,aAAa,CAAC,CAAA,CAAA;AAEhD,EAAO,OAAA,EAAE,KAAO,EAAA,OAAA,EAAS,YAAa,EAAA,CAAA;AAC1C,CAAA;AAEA,SAAS,WAAA,CAAe,SAAY,cAA+B,EAAA;AAC/D,EAAI,IAAA,OAAO,mBAAmB,UAAY,EAAA;AAEtC,IAAA,OAAQ,eAAuB,OAAO,CAAA,CAAA;AAAA,GAC1C;AACA,EAAO,OAAA,cAAA,CAAA;AACX;;;;"}

package/README.md

@@ -122,10 +122,52 @@ const ownHighlightStyle = {
 <ResultList mapId={mapId} input={input} highlightOptions={ownHighlightStyle} />;
 ```
 
+### Configuring memoization of rows
+
+The optional property `memoizeRows` determines whether result list table rows should be memoized or not.
+The default value is `false`.
+
+If memoization is turned on, the result list only rerenders if
+
+-   direct properties of the result list table changes,
+-   a row is selected (or deselected), or
+-   the sort order is changed,
+
+but the performance of the result list is greatly improved, especially for high row counts.
+
+`memoizeRows` should remain `false` if additional rerender conditions are present.
+
+Example:
+
+```tsx
+import { ResultList } from "@open-pioneer/result-list";
+<ResultList mapId={mapId} input={input} memoizeRows={true} />;
+```
+
 ### Selection
 
-Users can select (and deselect) individual features by clicking on the checkbox at the beginning of a row.
-A checkbox in the header of the table allows to select (or deselect) _all_ features in the table.
+Users can select (and deselect) individual features by clicking on the selection control
+(checkbox or radio button) at the beginning of a row.
+
+The optional property `selectionMode` can be used to change the default selection mode "multi" to "single".
+Single selection means that only one row can be selected at a time.
+With the `selectionMode` `"single"`, the selection control is a radio button by default.
+
+A checkbox in the header of the table allows to select (or deselect) _all_ features in the table if
+the `selectionMode` is "multi" (default).
+
+```tsx
+import { ResultList } from "@open-pioneer/result-list";
+<ResultList mapId={mapId} input={input} selectionMode="single" />;
+```
+
+The style of the selection control can be configured by using the `"selectionStyle"` property (`"checkbox"` or `"radio`).
+Note that the combination of `selectionMode` `"single"` with `selectionStyle` `"radio"` is not allowed:
+
+```tsx
+import { ResultList } from "@open-pioneer/result-list";
+<ResultList mapId={mapId} input={input} selectionMode="single" selectionStyle="checkbox" />;
+```
 
 ### Listening for selection changes
 

package/ResultList.d.ts

@@ -1,4 +1,4 @@
-import { BaseFeature, HighlightOptions, HighlightZoomOptions } from "@open-pioneer/map";
+import { BaseFeature, HighlightOptions, ZoomOptions } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { FC, ReactNode } from "react";
 import { FormatNumberOptions } from "@formatjs/intl";
@@ -103,6 +103,10 @@ export interface ResultListSelectionChangeEvent {
     features: BaseFeature[];
     getFeatureIds: () => (number | string)[];
 }
+/**
+ * Specifies whether it should be possible to select multiple or only single rows.
+ */
+export type SelectionMode = "multi" | "single";
 /**
  * Properties supported by the {@link ResultList} component.
  */
@@ -115,6 +119,17 @@ export interface ResultListProps extends CommonComponentProps {
      * Describes the data rendered by the component.
      */
     input: ResultListInput;
+    /**
+     * The selection mode used by the result list. Defaults to `"multi"`.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * The style used for the selection controls in a row.
+     * Defaults to `"checkbox"` if `selectionMode` is `"multi"`, or `"radio"` if `selectionMode` is `"single"`.
+     *
+     * Note: `"radio"` can not be used together with multi selection.
+     */
+    selectionStyle?: "radio" | "checkbox";
     /**
      * This handler is called whenever the user has changed the selected features in the result-list.
      */
@@ -134,7 +149,11 @@ export interface ResultListProps extends CommonComponentProps {
     /**
      * Optional zooming options
      */
-    highlightZoomOptions?: HighlightZoomOptions;
+    zoomOptions?: ZoomOptions;
+    /**
+     * Should each row be memoized to improve render performance. Default `false`.
+     */
+    memoizeRows?: boolean;
 }
 /**
  * A component that displays a set of features as a list.

package/ResultList.js

@@ -13,16 +13,22 @@ const ResultList = (props) => {
   const {
     mapId,
     input: { data, columns, formatOptions },
+    memoizeRows = false,
     onSelectionChange,
     enableZoom = true,
-    highlightZoomOptions,
+    zoomOptions,
     enableHighlight = true,
+    selectionMode = "multi",
+    selectionStyle = selectionMode === "single" ? "radio" : "checkbox",
     highlightOptions
   } = props;
   const { map } = useMapModel(mapId);
   if (columns.length === 0) {
     throw Error("No columns were defined. The result list cannot be displayed.");
   }
+  if (selectionMode === "multi" && selectionStyle === "radio") {
+    throw new Error("Cannot mix multi selection with selectionStyle 'radio'.");
+  }
   const containerRef = useRef(null);
   const tableWidth = useTableWidth(containerRef);
   const dataTableColumns = useMemo(
@@ -30,27 +36,31 @@ const ResultList = (props) => {
       columns,
       intl,
       tableWidth,
-      formatOptions
+      formatOptions,
+      selectionMode,
+      selectionStyle
     }),
-    [columns, intl, tableWidth, formatOptions]
+    [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle]
   );
   useEffect(() => {
     if (!map) {
       return;
     }
     if (enableZoom) {
-      map.zoom(data, highlightZoomOptions);
+      map.zoom(data, zoomOptions);
     }
     if (enableHighlight) {
       const highlight = map.highlight(data, highlightOptions);
       return () => highlight.destroy();
     }
-  }, [map, data, highlightZoomOptions, enableZoom, enableHighlight, highlightOptions]);
+  }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);
   return /* @__PURE__ */ jsx(Box, { ...containerProps, height: "100%", overflowY: "auto", ref: containerRef, children: /* @__PURE__ */ jsx(
     DataTable,
     {
       columns: dataTableColumns,
       data,
+      memoizeRows,
+      selectionMode,
       onSelectionChange
     }
   ) });
@@ -58,8 +68,7 @@ const ResultList = (props) => {
 function useTableWidth(tableRef) {
   const [tableWidth, setTableWidth] = useState();
   useEffect(() => {
-    if (!tableRef?.current)
-      return;
+    if (!tableRef?.current) return;
     const resizeObserver = new ResizeObserver((event) => {
       const width = event[0]?.contentBoxSize[0]?.inlineSize;
       if (width != null) {

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 {\n    BaseFeature,\n    HighlightOptions,\n    HighlightZoomOptions,\n    useMapModel\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 * 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     * 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    highlightZoomOptions?: HighlightZoomOptions;\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        onSelectionChange,\n        enableZoom = true,\n        highlightZoomOptions,\n        enableHighlight = true,\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    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            }),\n        [columns, intl, tableWidth, formatOptions]\n    );\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n        if (enableZoom) {\n            map.zoom(data, highlightZoomOptions);\n        }\n\n        if (enableHighlight) {\n            const highlight = map.highlight(data, highlightOptions);\n            return () => highlight.destroy();\n        }\n    }, [map, data, highlightZoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n    return (\n        <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n            <DataTable\n                columns={dataTableColumns}\n                data={data}\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 { 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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"}

package/index.d.ts

@@ -1 +1 @@
-export { ResultList, type ResultListProps, type ResultColumn, type ResultListInput, type FormatOptions, type RenderCellContext, type ResultListSelectionChangeEvent } from "./ResultList";
+export { ResultList, type FormatOptions, type RenderCellContext, type ResultColumn, type ResultListInput, type ResultListProps, type ResultListSelectionChangeEvent, type SelectionMode } from "./ResultList";

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/result-list",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "This package provides a UI component to display features and their attributes.",
   "keywords": [
     "open-pioneer-trails"
@@ -13,17 +13,20 @@
     "url": "https://github.com/open-pioneer/trails-openlayers-base-packages",
     "directory": "src/packages/result-list"
   },
+  "dependencies": {
+    "react-use": "^17.5.1"
+  },
   "peerDependencies": {
-    "@open-pioneer/chakra-integration": "^1.1.1",
-    "@open-pioneer/runtime": "^2.1.2",
-    "@open-pioneer/core": "^1.2.1",
-    "ol": "^9.0.0",
-    "react": "^18.2.0",
-    "classnames": "^2.3.2",
     "@chakra-ui/icons": "^2.1.1",
+    "@open-pioneer/chakra-integration": "^1.1.3",
+    "@open-pioneer/core": "^1.2.3",
+    "@open-pioneer/react-utils": "^1.0.0",
+    "@open-pioneer/runtime": "^2.1.6",
     "@tanstack/react-table": "^8.11.6",
-    "@open-pioneer/react-utils": "^0.2.2",
-    "@open-pioneer/map": "^0.5.0"
+    "classnames": "^2.3.2",
+    "ol": "^9.2.4",
+    "react": "^18.3.1",
+    "@open-pioneer/map": "^0.6.0"
   },
   "exports": {
     "./package.json": "./package.json",

package/DataTable/SelectCheckbox.d.ts

@@ -1,11 +0,0 @@
-import { ChangeEvent } from "react";
-export interface SelectCheckboxProps {
-    className?: string;
-    ariaLabel?: string;
-    toolTipLabel?: string;
-    isIndeterminate?: boolean;
-    isChecked?: boolean;
-    isDisabled?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-export declare function SelectCheckbox({ isIndeterminate, className, toolTipLabel, ariaLabel, isChecked, onChange, isDisabled }: SelectCheckboxProps): import("react/jsx-runtime").JSX.Element;

package/DataTable/SelectCheckbox.js

@@ -1,33 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Tooltip, chakra, Checkbox } from '@open-pioneer/chakra-integration';
-
-function SelectCheckbox({
-  isIndeterminate,
-  className,
-  toolTipLabel,
-  ariaLabel,
-  isChecked,
-  onChange,
-  isDisabled
-}) {
-  const checkboxComponent = /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      "aria-label": ariaLabel,
-      className,
-      isChecked,
-      onChange,
-      isIndeterminate,
-      isDisabled
-    }
-  );
-  return toolTipLabel ? /* @__PURE__ */ jsx(Tooltip, { label: toolTipLabel, placement: "right", closeOnClick: false, children: /* @__PURE__ */ jsx(
-    chakra.span,
-    {
-      children: checkboxComponent
-    }
-  ) }) : checkboxComponent;
-}
-
-export { SelectCheckbox };
-//# sourceMappingURL=SelectCheckbox.js.map

package/DataTable/SelectCheckbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectCheckbox.js","sources":["SelectCheckbox.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Checkbox, Tooltip, chakra } from \"@open-pioneer/chakra-integration\";\nimport { ChangeEvent } from \"react\";\n\nexport interface SelectCheckboxProps {\n    className?: string;\n    ariaLabel?: string;\n    toolTipLabel?: string;\n    isIndeterminate?: boolean;\n    isChecked?: boolean;\n    isDisabled?: boolean;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function SelectCheckbox({\n    isIndeterminate,\n    className,\n    toolTipLabel,\n    ariaLabel,\n    isChecked,\n    onChange,\n    isDisabled\n}: SelectCheckboxProps) {\n    const checkboxComponent = (\n        <Checkbox\n            aria-label={ariaLabel}\n            className={className}\n            isChecked={isChecked}\n            onChange={onChange}\n            isIndeterminate={isIndeterminate}\n            isDisabled={isDisabled}\n        />\n    );\n    return toolTipLabel ? (\n        <Tooltip label={toolTipLabel} placement=\"right\" closeOnClick={false}>\n            <chakra.span\n            /* \n               wrap into span to fix tooltip around checkbox, see https://github.com/chakra-ui/chakra-ui/issues/6353\n               not using \"shouldWrapChildren\" because that also introduces a _focusable_ span (we only want the checkbox)\n            */\n            >\n                {checkboxComponent}\n            </chakra.span>\n        </Tooltip>\n    ) : (\n        checkboxComponent\n    );\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,cAAe,CAAA;AAAA,EAC3B,eAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AACJ,CAAwB,EAAA;AACpB,EAAA,MAAM,iBACF,mBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACG,YAAY,EAAA,SAAA;AAAA,MACZ,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAEJ,EAAO,OAAA,YAAA,uBACF,OAAQ,EAAA,EAAA,KAAA,EAAO,cAAc,SAAU,EAAA,OAAA,EAAQ,cAAc,KAC1D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MAMI,QAAA,EAAA,iBAAA;AAAA,KAAA;AAAA,KAET,CAEA,GAAA,iBAAA,CAAA;AAER;;;;"}