@open-pioneer/result-list 1.3.0-dev-map-loading.20260202144650 → 1.3.0-dev-css-prop.20260210130215

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # @open-pioneer/result-list
 
-## 1.3.0-dev-map-loading.20260202144650
+## 1.3.0-dev-css-prop.20260210130215
+
+### Minor Changes
+
+- 911fda5: Support for new common container props (role, aria-_, data-_ and css)
+- d54ccfd: Update to Chakra UI 3.32.0
 
 ### Patch Changes
 
-- Updated dependencies [f5030cc]
-- Updated dependencies [f5030cc]
-    - @open-pioneer/map@1.3.0-dev-map-loading.20260202144650
+- Updated dependencies [911fda5]
+- Updated dependencies [2ceb1ca]
+- Updated dependencies [d54ccfd]
+- Updated dependencies [4bcc8ce]
+- Updated dependencies [2ceb1ca]
+    - @open-pioneer/map@1.3.0-dev-css-prop.20260210130215
 
 ## 1.2.0
 

package/ResultList.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Box } from '@chakra-ui/react';
 import { useMapModelValue } from '@open-pioneer/map';
-import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useCommonComponentProps, mergeChakraProps } from '@open-pioneer/react-utils';
 import { useIntl } from './_virtual/hooks.js';
 import { useRef, useMemo, useEffect, useState } from 'react';
 import { DataTable } from './DataTable/DataTable.js';
@@ -51,7 +51,11 @@ const ResultList = (props) => {
       return () => highlight.destroy();
     }
   }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);
-  return /* @__PURE__ */ jsx(Box, { ...containerProps, height: "100%", overflowY: "auto", ref: containerRef, children: /* @__PURE__ */ jsx(
+  const mergedBoxProps = useMemo(
+    () => mergeChakraProps({ height: "100%", overflowY: "auto" }, containerProps),
+    [containerProps]
+  );
+  return /* @__PURE__ */ jsx(Box, { ref: containerRef, ...mergedBoxProps, children: /* @__PURE__ */ jsx(
     DataTable,
     {
       columns: dataTableColumns,

package/ResultList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@chakra-ui/react\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\nimport {\n    BaseFeature,\n    HighlightOptions,\n    MapModelProps,\n    useMapModelValue,\n    ZoomOptions\n} from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataTable } from \"./DataTable/DataTable\";\nimport { createColumns } from \"./DataTable/createColumns\";\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     * Property of the features in the result list that is used to enrich aria labels with context.\n     *\n     * The feature's id is used by default or as fallback if this option is not configured or the\n     * property does not exist on the feature.\n     */\n    labelProperty?: string;\n\n    /**\n     * The data shown by the result list component.\n     * Every feature will be rendered as an individual row.\n     */\n    data: BaseFeature[];\n\n    /**\n     * Optional formatOptions to specify the `numberOptions` for number type values and\n     * `dateOptions` to specify the format of date type values\n     */\n    formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n    features: BaseFeature[];\n    getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Describes the data rendered by the component.\n     */\n    input: ResultListInput;\n\n    /**\n     * The selection mode used by the result list. Defaults to `\"multi\"`.\n     */\n    selectionMode?: SelectionMode;\n\n    /**\n     * The style used for the selection controls in a row.\n     * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n     *\n     * Note: `\"radio\"` can not be used together with multi selection.\n     */\n    selectionStyle?: \"radio\" | \"checkbox\";\n\n    /**\n     * This handler is called whenever the user has changed the selected features in the result-list.\n     */\n    onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n    /**\n     * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n     */\n    enableZoom?: boolean;\n\n    /**\n     * Should data be highlighted in the map. Default true.\n     */\n    enableHighlight?: boolean;\n\n    /**\n     * Optional styling option\n     */\n    highlightOptions?: HighlightOptions;\n\n    /**\n     * Optional zooming options\n     */\n    zoomOptions?: ZoomOptions;\n\n    /**\n     * Should each row be memoized to improve render performance. Default `false`.\n     */\n    memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n    const { containerProps } = useCommonComponentProps(\"result-list\", props);\n    const intl = useIntl();\n    const map = useMapModelValue(props);\n    const {\n        input: { data, columns, labelProperty, 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    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                labelProperty\n            }),\n        [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle, labelProperty]\n    );\n\n    useEffect(() => {\n        if (enableZoom) {\n            map.zoom(data, zoomOptions);\n        }\n\n        if (enableHighlight) {\n            const highlight = map.highlight(data, highlightOptions);\n            return () => highlight.destroy();\n        }\n    }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n    return (\n        <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n            <DataTable\n                columns={dataTableColumns}\n                data={data}\n                memoizeRows={memoizeRows}\n                selectionMode={selectionMode}\n                onSelectionChange={onSelectionChange}\n            />\n        </Box>\n    );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement | null>) {\n    const [tableWidth, setTableWidth] = useState<number>();\n\n    useEffect(() => {\n        if (!tableRef?.current) return;\n        const resizeObserver = new ResizeObserver((event) => {\n            // Depending on the layout, you may need to swap inlineSize with blockSize\n            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n            const width = event[0]?.contentBoxSize[0]?.inlineSize;\n            if (width != null) {\n                setTableWidth(width);\n            }\n        });\n        resizeObserver.observe(tableRef.current);\n        return () => resizeObserver.disconnect();\n    }, [tableRef]);\n    return tableWidth;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, BoxProps } from \"@chakra-ui/react\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\nimport {\n    BaseFeature,\n    HighlightOptions,\n    MapModelProps,\n    useMapModelValue,\n    ZoomOptions\n} from \"@open-pioneer/map\";\nimport {\n    CommonComponentProps,\n    mergeChakraProps,\n    useCommonComponentProps\n} 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\";\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     * Property of the features in the result list that is used to enrich aria labels with context.\n     *\n     * The feature's id is used by default or as fallback if this option is not configured or the\n     * property does not exist on the feature.\n     */\n    labelProperty?: string;\n\n    /**\n     * The data shown by the result list component.\n     * Every feature will be rendered as an individual row.\n     */\n    data: BaseFeature[];\n\n    /**\n     * Optional formatOptions to specify the `numberOptions` for number type values and\n     * `dateOptions` to specify the format of date type values\n     */\n    formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n    features: BaseFeature[];\n    getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Describes the data rendered by the component.\n     */\n    input: ResultListInput;\n\n    /**\n     * The selection mode used by the result list. Defaults to `\"multi\"`.\n     */\n    selectionMode?: SelectionMode;\n\n    /**\n     * The style used for the selection controls in a row.\n     * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n     *\n     * Note: `\"radio\"` can not be used together with multi selection.\n     */\n    selectionStyle?: \"radio\" | \"checkbox\";\n\n    /**\n     * This handler is called whenever the user has changed the selected features in the result-list.\n     */\n    onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n    /**\n     * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n     */\n    enableZoom?: boolean;\n\n    /**\n     * Should data be highlighted in the map. Default true.\n     */\n    enableHighlight?: boolean;\n\n    /**\n     * Optional styling option\n     */\n    highlightOptions?: HighlightOptions;\n\n    /**\n     * Optional zooming options\n     */\n    zoomOptions?: ZoomOptions;\n\n    /**\n     * Should each row be memoized to improve render performance. Default `false`.\n     */\n    memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n    const { containerProps } = useCommonComponentProps(\"result-list\", props);\n    const intl = useIntl();\n    const map = useMapModelValue(props);\n    const {\n        input: { data, columns, labelProperty, 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    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                labelProperty\n            }),\n        [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle, labelProperty]\n    );\n\n    useEffect(() => {\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    const mergedBoxProps = useMemo(\n        () => mergeChakraProps<BoxProps>({ height: \"100%\", overflowY: \"auto\" }, containerProps),\n        [containerProps]\n    );\n    return (\n        <Box ref={containerRef} {...mergedBoxProps}>\n            <DataTable\n                columns={dataTableColumns}\n                data={data}\n                memoizeRows={memoizeRows}\n                selectionMode={selectionMode}\n                onSelectionChange={onSelectionChange}\n            />\n        </Box>\n    );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement | null>) {\n    const [tableWidth, setTableWidth] = useState<number>();\n\n    useEffect(() => {\n        if (!tableRef?.current) return;\n        const resizeObserver = new ResizeObserver((event) => {\n            // Depending on the layout, you may need to swap inlineSize with blockSize\n            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n            const width = event[0]?.contentBoxSize[0]?.inlineSize;\n            if (width != null) {\n                setTableWidth(width);\n            }\n        });\n        resizeObserver.observe(tableRef.current);\n        return () => resizeObserver.disconnect();\n    }, [tableRef]);\n    return tableWidth;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/result-list",
-  "version": "1.3.0-dev-map-loading.20260202144650",
+  "version": "1.3.0-dev-css-prop.20260210130215",
   "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.31.0",
+    "@chakra-ui/react": "^3.32.0",
     "@conterra/reactivity-core": "^0.8.1",
-    "@open-pioneer/reactivity": "^4.4.0",
-    "@open-pioneer/core": "^4.4.0",
-    "@open-pioneer/chakra-snippets": "^4.4.0",
-    "@open-pioneer/react-utils": "^4.4.0",
-    "@open-pioneer/runtime": "^4.4.0",
+    "@open-pioneer/reactivity": "4.5.0-dev-css-prop.20260210120105",
+    "@open-pioneer/core": "4.5.0-dev-css-prop.20260210120105",
+    "@open-pioneer/chakra-snippets": "4.5.0-dev-css-prop.20260210120105",
+    "@open-pioneer/react-utils": "4.5.0-dev-css-prop.20260210120105",
+    "@open-pioneer/runtime": "4.5.0-dev-css-prop.20260210120105",
     "@tanstack/react-table": "^8.21.3",
     "classnames": "^2.5.1",
     "ol": "^10.7.0",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "react-use": "^17.6.0",
     "react-icons": "^5.5.0",
-    "@open-pioneer/map": "1.3.0-dev-map-loading.20260202144650"
+    "@open-pioneer/map": "1.3.0-dev-css-prop.20260210130215"
   },
   "exports": {
     "./package.json": "./package.json",