@open-pioneer/result-list 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @open-pioneer/result-list
 
+## 1.1.0
+
+### Minor Changes
+
+- 10338fa: Update OpenLayers to 10.7.0
+- a8b8a36: Update trails core packages to 4.3.0
+- 10338fa: Update Chakra to 3.29.0
+
+### Patch Changes
+
+- fce7fa9: Implement stricter null safety checks.
+- Updated dependencies [fce7fa9]
+- Updated dependencies [10338fa]
+- Updated dependencies [a8b8a36]
+- Updated dependencies [10338fa]
+- Updated dependencies [c38b619]
+    - @open-pioneer/map@1.1.0
+
 ## 1.0.0
 
 ### Minor Changes

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Table, chakra, useToken } from \"@chakra-ui/react\";\nimport { Reactive, reactive } from \"@conterra/reactivity-core\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\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 { MouseEvent, createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\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\nconst TableContext = createContext<TableContext<unknown> | undefined>(undefined);\n\ninterface TableContext<Data> {\n    /** The tanstack table instance. This object is stable. */\n    table: TanstackTable<Data>;\n\n    /** A signal to trigger re-rendering in the children of the chakra table. */\n    forceRerender: Reactive<number>;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\n    const { memoizeRows } = props;\n    const { table } = useSetupTable(props); // NOTE: Triggers re-render often when table state changes!\n    const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n    const useMemoOptimization = isResizing || memoizeRows;\n    const columnSizeVars = useColumnSizeVars(table);\n\n    const context = useMemo((): TableContext<Data> => {\n        return {\n            table,\n            forceRerender: reactive(0)\n        };\n    }, [table]);\n    context.forceRerender.value += 1; // Force rerendering of the TableContent child.\n\n    // 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    // Note that this is in a useEffect() on purpose to defer \"freeing\" click events a bit.\n    const [isClickBlocked, setIsClickBlocked] = useState(false);\n    useEffect(() => {\n        setIsClickBlocked(isResizing);\n    }, [isResizing]);\n    const blockClicksIfResizing = useEvent((e: MouseEvent) => {\n        if (isClickBlocked) {\n            LOG.debug(\"Blocking click event because resizing is active\");\n            e.stopPropagation();\n            e.preventDefault();\n        }\n    });\n\n    // We cache the table's root because chakra's table has some broken memo behavior: it recomputes\n    // its styles and rerenders all all its children via context when some props change.\n    // We keep both the props and the table's children as stable as possible.\n    //\n    // The table content instead uses a force rerender bypass via the `forceRerender` signal:\n    // When react-table tells us to rerender, we trigger a rerender on our grandchild as well.\n    const chakraTable = useMemo(() => {\n        const content = <TableContent useMemo={useMemoOptimization} />;\n        const chakraTable = (\n            <Table.Root\n                className=\"result-list-table\"\n                width=\"99.9%\"\n                onClickCapture={blockClicksIfResizing}\n            >\n                {content}\n            </Table.Root>\n        );\n        return chakraTable;\n    }, [blockClicksIfResizing, useMemoOptimization]);\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    return (\n        <chakra.div\n            className={classNames(\"result-list-table-container\", {\n                \"result-list-table-container--is-resizing\": isResizing\n            })}\n            h=\"100%\"\n            w=\"100%\"\n            style={columnSizeVars}\n        >\n            <TableContext.Provider value={context as TableContext<unknown>}>\n                {chakraTable}\n            </TableContext.Provider>\n        </chakra.div>\n    );\n}\n\nfunction TableContent<Data extends BaseFeature>(props: { useMemo: boolean }) {\n    const store = useContext(TableContext)! as TableContext<Data>;\n    const table = store.table;\n\n    // Hack to let the grandparent of this component force a rerender.\n    useReactiveSnapshot(() => store.forceRerender.value, [store.forceRerender]);\n\n    return (\n        <>\n            <Table.Header>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n                ))}\n            </Table.Header>\n            <Table.Body className=\"result-list-table-body\">\n                {props.useMemo ? <MemoizedTableRows table={table} /> : <TableRows table={table} />}\n            </Table.Body>\n        </>\n    );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n    const { headerGroup } = props;\n    const borderColor = useToken(\"colors\", \"trails.100\")[0] ?? \"#000000\";\n    return (\n        <Table.Row 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        </Table.Row>\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\n    let width: string | undefined;\n    let minWidth: string | undefined;\n    if (index > 0) {\n        width = `calc(var(--header-${header.id}-size) * 1px)`;\n    } else {\n        minWidth = \"50px\"; // Selection column\n    }\n\n    return (\n        <Table.ColumnHeader\n            className=\"result-list-header\"\n            fontWeight=\"semi-bold\"\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, minWidth }}\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            whiteSpace=\"nowrap\" // prevent wrapping between header title and sort indicator\n            userSelect=\"none\"\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        </Table.ColumnHeader>\n    );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return table.getRowModel().rows.map((row) => {\n        return (\n            <Table.Row 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                        <Table.Cell\n                            key={cell.id}\n                            style={{ width: width }}\n                            className=\"result-list-table-row\"\n                        >\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </Table.Cell>\n                    );\n                })}\n            </Table.Row>\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 = useMemo(() => {\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        // Note: 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;\n\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":["chakraTable"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Table, chakra, useToken } from \"@chakra-ui/react\";\nimport { Reactive, reactive } from \"@conterra/reactivity-core\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\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 { MouseEvent, createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\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\nconst TableContext = createContext<TableContext<unknown> | undefined>(undefined);\n\ninterface TableContext<Data> {\n    /** The tanstack table instance. This object is stable. */\n    table: TanstackTable<Data>;\n\n    /** A signal to trigger re-rendering in the children of the chakra table. */\n    forceRerender: Reactive<number>;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\n    const { memoizeRows } = props;\n    const { table } = useSetupTable(props); // NOTE: Triggers re-render often when table state changes!\n    const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n    const useMemoOptimization = isResizing || memoizeRows;\n    const columnSizeVars = useColumnSizeVars(table);\n\n    const context = useMemo((): TableContext<Data> => {\n        return {\n            table,\n            forceRerender: reactive(0)\n        };\n    }, [table]);\n    context.forceRerender.value += 1; // Force rerendering of the TableContent child.\n\n    // 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    // Note that this is in a useEffect() on purpose to defer \"freeing\" click events a bit.\n    const [isClickBlocked, setIsClickBlocked] = useState(false);\n    useEffect(() => {\n        setIsClickBlocked(isResizing);\n    }, [isResizing]);\n    const blockClicksIfResizing = useEvent((e: MouseEvent) => {\n        if (isClickBlocked) {\n            LOG.debug(\"Blocking click event because resizing is active\");\n            e.stopPropagation();\n            e.preventDefault();\n        }\n    });\n\n    // We cache the table's root because chakra's table has some broken memo behavior: it recomputes\n    // its styles and rerenders all its children via context when some props change.\n    // We keep both the props and the table's children as stable as possible.\n    //\n    // The table content instead uses a force rerender bypass via the `forceRerender` signal:\n    // When react-table tells us to rerender, we trigger a rerender on our grandchild as well.\n    const chakraTable = useMemo(() => {\n        const content = <TableContent useMemo={useMemoOptimization} />;\n        const chakraTable = (\n            <Table.Root\n                className=\"result-list-table\"\n                width=\"99.9%\"\n                onClickCapture={blockClicksIfResizing}\n            >\n                {content}\n            </Table.Root>\n        );\n        return chakraTable;\n    }, [blockClicksIfResizing, useMemoOptimization]);\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    return (\n        <chakra.div\n            className={classNames(\"result-list-table-container\", {\n                \"result-list-table-container--is-resizing\": isResizing\n            })}\n            h=\"100%\"\n            w=\"100%\"\n            style={columnSizeVars}\n        >\n            <TableContext.Provider value={context as TableContext<unknown>}>\n                {chakraTable}\n            </TableContext.Provider>\n        </chakra.div>\n    );\n}\n\nfunction TableContent<Data extends BaseFeature>(props: { useMemo: boolean }) {\n    const store = useContext(TableContext) as TableContext<Data>;\n    const table = store.table;\n\n    // Hack to let the grandparent of this component force a rerender.\n    useReactiveSnapshot(() => store.forceRerender.value, [store.forceRerender]);\n\n    return (\n        <>\n            <Table.Header>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n                ))}\n            </Table.Header>\n            <Table.Body className=\"result-list-table-body\">\n                {props.useMemo ? <MemoizedTableRows table={table} /> : <TableRows table={table} />}\n            </Table.Body>\n        </>\n    );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n    const { headerGroup } = props;\n    const borderColor = useToken(\"colors\", \"trails.100\")[0] ?? \"#000000\";\n    return (\n        <Table.Row 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        </Table.Row>\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\n    let width: string | undefined;\n    let minWidth: string | undefined;\n    if (index > 0) {\n        width = `calc(var(--header-${header.id}-size) * 1px)`;\n    } else {\n        minWidth = \"50px\"; // Selection column\n    }\n\n    return (\n        <Table.ColumnHeader\n            className=\"result-list-header\"\n            fontWeight=\"semi-bold\"\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, minWidth }}\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            whiteSpace=\"nowrap\" // prevent wrapping between header title and sort indicator\n            userSelect=\"none\"\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        </Table.ColumnHeader>\n    );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return table.getRowModel().rows.map((row) => {\n        return (\n            <Table.Row 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                        <Table.Cell\n                            key={cell.id}\n                            style={{ width: width }}\n                            className=\"result-list-table-row\"\n                        >\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </Table.Cell>\n                    );\n                })}\n            </Table.Row>\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 = useMemo(() => {\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        // Note: 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            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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;\n\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":["chakraTable"],"mappings":"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"}

package/DataTable/createColumns.js

@@ -38,8 +38,7 @@ function createColumns(options) {
 function createColumn(options) {
   const { id, column, columnWidth, formatOptions, intl } = options;
   const { propertyName, getPropertyValue } = column;
-  const hasPropertyValue = getPropertyValue != null || propertyName != null;
-  if (!hasPropertyValue) {
+  if (getPropertyValue == null && propertyName == null) {
     throw new Error(
       "Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'."
     );

package/DataTable/createColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@chakra-ui/react\";\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 { createSelectComponent } 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    labelProperty?: string;\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const {\n        columns,\n        intl,\n        tableWidth,\n        formatOptions,\n        selectionMode,\n        selectionStyle,\n        labelProperty\n    } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(\n        intl,\n        selectionMode,\n        selectionStyle,\n        labelProperty\n    );\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 defaultRenderCell(cellValue, intl, formatOptions);\n            },\n            header: column.displayName ?? column.propertyName,\n            size: columnWidth\n        }\n    );\n}\n\nfunction defaultRenderCell(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    labelProperty?: string\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\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                    {createSelectComponent({\n                        className: \"result-list-select-all-checkbox\",\n                        toolTipLabel: getCheckboxTooltip(table, intl),\n                        checked: table.getIsAllRowsSelected()\n                            ? true\n                            : table.getIsSomeRowsSelected()\n                              ? \"indeterminate\"\n                              : false,\n                        onChange(newIsChecked) {\n                            table.toggleAllRowsSelected(newIsChecked);\n                        }\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            const ariaLabel = intl.formatMessage(\n                {\n                    id: \"ariaLabel.selectSingle\"\n                },\n                { featureProperty: getLabel(row.original, labelProperty) }\n            );\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                    {createSelectComponent({\n                        mode: selectionStyle,\n                        className,\n                        checked: row.getIsSomeSelected() ? \"indeterminate\" : row.getIsSelected(),\n                        disabled: !row.getCanSelect(),\n                        onChange(newIsChecked) {\n                            row.toggleSelected(newIsChecked);\n                        },\n                        ariaLabel: ariaLabel\n                    })}\n                </chakra.div>\n            );\n        }\n    });\n}\n\nfunction getLabel(feature: BaseFeature, labelProperty: string | undefined) {\n    if (labelProperty && feature.properties && feature.properties[labelProperty] != null) {\n        return feature.properties[labelProperty].toString();\n    }\n    // use feature id as fallback if property not provided or does not exist for this feature\n    return feature.id.toString();\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-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@chakra-ui/react\";\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 { createSelectComponent } 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    labelProperty?: string;\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const {\n        columns,\n        intl,\n        tableWidth,\n        formatOptions,\n        selectionMode,\n        selectionStyle,\n        labelProperty\n    } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(\n        intl,\n        selectionMode,\n        selectionStyle,\n        labelProperty\n    );\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\n    if (getPropertyValue == null && propertyName == null) {\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            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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 defaultRenderCell(cellValue, intl, formatOptions);\n            },\n            header: column.displayName ?? column.propertyName,\n            size: columnWidth\n        }\n    );\n}\n\nfunction defaultRenderCell(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    labelProperty?: string\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\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                    {createSelectComponent({\n                        className: \"result-list-select-all-checkbox\",\n                        toolTipLabel: getCheckboxTooltip(table, intl),\n                        checked: table.getIsAllRowsSelected()\n                            ? true\n                            : table.getIsSomeRowsSelected()\n                              ? \"indeterminate\"\n                              : false,\n                        onChange(newIsChecked) {\n                            table.toggleAllRowsSelected(newIsChecked);\n                        }\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            const ariaLabel = intl.formatMessage(\n                {\n                    id: \"ariaLabel.selectSingle\"\n                },\n                { featureProperty: getLabel(row.original, labelProperty) }\n            );\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                    {createSelectComponent({\n                        mode: selectionStyle,\n                        className,\n                        checked: row.getIsSomeSelected() ? \"indeterminate\" : row.getIsSelected(),\n                        disabled: !row.getCanSelect(),\n                        onChange(newIsChecked) {\n                            row.toggleSelected(newIsChecked);\n                        },\n                        ariaLabel: ariaLabel\n                    })}\n                </chakra.div>\n            );\n        }\n    });\n}\n\nfunction getLabel(feature: BaseFeature, labelProperty: string | undefined) {\n    if (labelProperty && feature.properties && feature.properties[labelProperty] != null) {\n        return feature.properties[labelProperty].toString();\n    }\n    // use feature id as fallback if property not provided or does not exist for this feature\n    return feature.id.toString();\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/README.md

@@ -241,7 +241,8 @@ To always display features from a layer in the same way, define the metadata dir
 For example:
 
 ```js
-new SimpleLayer({
+layerFactory.create({
+    type: SimpleLayer,
     id: "ogc_kitas",
     title: "Kindertagesstätten",
     olLayer: createKitasLayer(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/result-list",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "This package provides a UI component to display features and their attributes.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,20 +14,20 @@
     "directory": "src/packages/result-list"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.28.0",
-    "@conterra/reactivity-core": "^0.8.0",
-    "@open-pioneer/reactivity": "^4.2.0",
-    "@open-pioneer/core": "^4.2.0",
-    "@open-pioneer/chakra-snippets": "^4.2.0",
-    "@open-pioneer/react-utils": "^4.2.0",
-    "@open-pioneer/runtime": "^4.2.0",
+    "@chakra-ui/react": "^3.29.0",
+    "@conterra/reactivity-core": "^0.8.1",
+    "@open-pioneer/reactivity": "^4.3.0",
+    "@open-pioneer/core": "^4.3.0",
+    "@open-pioneer/chakra-snippets": "^4.3.0",
+    "@open-pioneer/react-utils": "^4.3.0",
+    "@open-pioneer/runtime": "^4.3.0",
     "@tanstack/react-table": "^8.21.3",
     "classnames": "^2.5.1",
-    "ol": "^10.6.1",
+    "ol": "^10.7.0",
     "react": "^19.2.0",
     "react-use": "^17.6.0",
     "react-icons": "^5.5.0",
-    "@open-pioneer/map": "^1.0.0"
+    "@open-pioneer/map": "^1.1.0"
   },
   "exports": {
     "./package.json": "./package.json",