@open-pioneer/map-ui-components 1.5.0-dev.20260910103330 → 1.5.0-dev.20260917081843

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @open-pioneer/map-ui-components
 
-## 1.5.0-dev.20260910103330
+## 1.5.0-dev.20260917081843
 
 ### Minor Changes
 
 - f790fda: Update to Chakra 3.37.0
+- a9c1213: Add `TooltipBox` component, a small helper component that is styled like a chakra Tooltip.
 
 ### Patch Changes
 

package/README.md

@@ -12,6 +12,20 @@ To create a simple icon button with a tooltip and an `aria-label`, use the `Tool
 
 This component is used to add an icon button to the map.
 
+## Tooltip box
+
+The `TooltipBox` component is a simple `Box` that is styled like a chakra tooltip.
+Its styles are derived from the current chakra theme (the `tooltip` recipe).
+It is useful to place tooltip-like messages at a custom location, for example on the map:
+
+```jsx
+<TooltipBox>Click on the map to start drawing.</TooltipBox>
+```
+
+`TooltipBox` accepts all `Box` props.
+Additional styles can be applied via the `css` prop (or any other chakra style prop).
+The rendered element always has the css class `tooltip-box`.
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.js","sources":["ToolButton.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Button, ButtonProps, Icon, Toggle } from \"@chakra-ui/react\";\nimport { Tooltip, TooltipProps } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport {\n    CommonComponentProps,\n    mergeChakraProps,\n    useCommonComponentProps,\n    classNames\n} from \"@open-pioneer/react-utils\";\nimport {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    RefAttributes,\n    memo,\n    useState\n} from \"react\";\n\n/**\n * Properties supported by {@link ToolButton}.\n */\nexport interface ToolButtonProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {\n    /**\n     * The label for the ToolButton.\n     * This value services as the tooltip text and the aria-label.\n     *\n     * This property is required for a11y reasons because a ToolButton usually only displays an icon.\n     */\n    label: string;\n\n    /**\n     * The icon displayed by the button.\n     *\n     * NOTE: You can use raw icons here (e.g. svgs from react-icons).\n     * The ToolButton will surround the icon with chakra's `<Icon />` component.\n     * This will apply the `aria-hidden` attribute, among other things.\n     */\n    icon: ReactElement;\n\n    /**\n     * If `true`, the button will show a spinner.\n     * Defaults to `false`.\n     */\n    loading?: boolean;\n\n    /**\n     * If `true`, indicates that the button is currently active with a different style.\n     * Defaults to `undefined`.\n     *\n     * A value of `true` or `false` indicates that the button supports being active (i.e. pressed).\n     * In that case the `aria-pressed` attribute will be configured automatically\n     * (see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).\n     */\n    active?: boolean;\n\n    /**\n     * If `true`, the button will be disabled.\n     * Defaults to `false`.\n     */\n    disabled?: boolean;\n\n    /**\n     * The callback that will be called when the user clicks the button.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n\n    /**\n     * Additional properties for the `Tooltip` element.\n     *\n     * Note that the ToolButton also defines some of these props.\n     */\n    tooltipProps?: Partial<TooltipProps>;\n\n    /**\n     * Additional properties for the `Button` element.\n     *\n     * Note that the ToolButton also defines some of these props.\n     */\n    buttonProps?: Partial<ButtonProps>;\n}\n\n/**\n * An button with a tooltip, used for tool buttons on a map.\n */\nexport const ToolButton: FC<ToolButtonProps> = memo(function ToolButton(props: ToolButtonProps) {\n    const {\n        label,\n        icon,\n        onClick: onClickProp,\n        loading,\n        disabled,\n        active,\n        tooltipProps,\n        buttonProps = {},\n        ref\n    } = props;\n\n    const {\n        containerProps: { className: baseClassName, ...containerProps }\n    } = useCommonComponentProps(\"tool-button\", props);\n\n    const className = classNames(baseClassName, {\n        \"tool-button--active\": active,\n        \"tool-button--loading\": loading,\n        \"tool-button--disabled\": disabled\n    });\n\n    const [tooltipOpen, setTooltipOpen] = useState(false);\n    const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n        // Immediately hide the tooltip. When the label switches in reaction to the click,\n        // the tooltip would flicker briefly with the new label.\n        setTooltipOpen(false);\n        onClickProp?.(e);\n    };\n\n    const mergedButtonProps = mergeChakraProps<ButtonProps>(\n        { className, onClick, \"aria-label\": label, padding: 0, disabled, loading },\n        containerProps,\n        buttonProps\n    );\n    let button = (\n        <ButtonIgnoringAriaProps ref={ref} {...mergedButtonProps}>\n            <Icon>{icon}</Icon>\n        </ButtonIgnoringAriaProps>\n    );\n    if (active != null) {\n        // Make sure that only \"pressable\" buttons receive the aria-pressed attribute.\n        button = (\n            <Toggle.Root pressed={active} asChild>\n                {button}\n            </Toggle.Root>\n        );\n    }\n\n    return (\n        <Tooltip\n            content={label}\n            openDelay={500}\n            {...tooltipProps}\n            /* don't allow overwrite because component would break */\n            open={tooltipOpen}\n            onOpenChange={(e) => setTooltipOpen(e.open)}\n        >\n            {button}\n        </Tooltip>\n    );\n});\n\n/**\n * The tooltip will automatically set 'aria-describedby' when it is being shown.\n * This is redundant because the aria-label already has the same content as the tooltip.\n * This component wraps chakra's button to ignore the *-by attributes.\n */\nconst ButtonIgnoringAriaProps = function ButtonIgnoringAriaProps(\n    props: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }\n) {\n    const { \"aria-labelledby\": _label, \"aria-describedby\": _describedBy, ref, ...rest } = props;\n    return <Button ref={ref} {...rest} />;\n};\n"],"names":["ToolButton","ButtonIgnoringAriaProps"],"mappings":";;;;;;AAuFO,MAAM,UAAA,GAAkC,IAAA,CAAK,SAASA,WAAAA,CAAW,KAAA,EAAwB;AAC5F,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,EAAS,WAAA;AAAA,IACT,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAc,EAAC;AAAA,IACf;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACF,cAAA,EAAgB,EAAE,SAAA,EAAW,aAAA,EAAe,GAAG,cAAA;AAAe,GAClE,GAAI,uBAAA,CAAwB,aAAA,EAAe,KAAK,CAAA;AAEhD,EAAA,MAAM,SAAA,GAAY,WAAW,aAAA,EAAe;AAAA,IACxC,qBAAA,EAAuB,MAAA;AAAA,IACvB,sBAAA,EAAwB,OAAA;AAAA,IACxB,uBAAA,EAAyB;AAAA,GAC5B,CAAA;AAED,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAAqC;AAGlD,IAAA,cAAA,CAAe,KAAK,CAAA;AACpB,IAAA,WAAA,GAAc,CAAC,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,gBAAA;AAAA,IACtB,EAAE,WAAW,OAAA,EAAS,YAAA,EAAc,OAAO,OAAA,EAAS,CAAA,EAAG,UAAU,OAAA,EAAQ;AAAA,IACzE,cAAA;AAAA,IACA;AAAA,GACJ;AACA,EAAA,IAAI,MAAA,uBACC,uBAAA,EAAA,EAAwB,GAAA,EAAW,GAAG,iBAAA,EACnC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,EAChB,CAAA;AAEJ,EAAA,IAAI,UAAU,IAAA,EAAM;AAEhB,IAAA,MAAA,mBACI,GAAA,CAAC,OAAO,IAAA,EAAP,EAAY,SAAS,MAAA,EAAQ,OAAA,EAAO,MAChC,QAAA,EAAA,MAAA,EACL,CAAA;AAAA,EAER;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAS,KAAA;AAAA,MACT,SAAA,EAAW,GAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,IAAA,EAAM,WAAA;AAAA,MACN,YAAA,EAAc,CAAC,CAAA,KAAM,cAAA,CAAe,EAAE,IAAI,CAAA;AAAA,MAEzC,QAAA,EAAA;AAAA;AAAA,GACL;AAER,CAAC;AAOD,MAAM,uBAAA,GAA0B,SAASC,wBAAAA,CACrC,KAAA,EACF;AACE,EAAA,MAAM,EAAE,mBAAmB,MAAA,EAAQ,kBAAA,EAAoB,cAAc,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AACtF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAO,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AACvC,CAAA;;;;"}
+{"version":3,"file":"ToolButton.js","sources":["ToolButton.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Button, ButtonProps, Icon, Toggle } from \"@chakra-ui/react\";\nimport { Tooltip, TooltipProps } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport {\n    CommonComponentProps,\n    mergeChakraProps,\n    useCommonComponentProps,\n    classNames\n} from \"@open-pioneer/react-utils\";\nimport {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    RefAttributes,\n    memo,\n    useState\n} from \"react\";\n\n/**\n * Properties supported by {@link ToolButton}.\n */\nexport interface ToolButtonProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {\n    /**\n     * The label for the ToolButton.\n     * This value services as the tooltip text and the aria-label.\n     *\n     * This property is required for a11y reasons because a ToolButton usually only displays an icon.\n     */\n    label: string;\n\n    /**\n     * The icon displayed by the button.\n     *\n     * NOTE: You can use raw icons here (e.g. svgs from react-icons).\n     * The ToolButton will surround the icon with chakra's `<Icon />` component.\n     * This will apply the `aria-hidden` attribute, among other things.\n     */\n    icon: ReactElement;\n\n    /**\n     * If `true`, the button will show a spinner.\n     * Defaults to `false`.\n     */\n    loading?: boolean;\n\n    /**\n     * If `true`, indicates that the button is currently active with a different style.\n     * Defaults to `undefined`.\n     *\n     * A value of `true` or `false` indicates that the button supports being active (i.e. pressed).\n     * In that case the `aria-pressed` attribute will be configured automatically\n     * (see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).\n     */\n    active?: boolean;\n\n    /**\n     * If `true`, the button will be disabled.\n     * Defaults to `false`.\n     */\n    disabled?: boolean;\n\n    /**\n     * The callback that will be called when the user clicks the button.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n\n    /**\n     * Additional properties for the `Tooltip` element.\n     *\n     * Note that the ToolButton also defines some of these props.\n     */\n    tooltipProps?: Partial<TooltipProps>;\n\n    /**\n     * Additional properties for the `Button` element.\n     *\n     * Note that the ToolButton also defines some of these props.\n     */\n    buttonProps?: Partial<ButtonProps>;\n}\n\n/**\n * An button with a tooltip, used for tool buttons on a map.\n */\nexport const ToolButton: FC<ToolButtonProps> = memo(function ToolButton(props: ToolButtonProps) {\n    const {\n        label,\n        icon,\n        onClick: onClickProp,\n        loading,\n        disabled,\n        active,\n        tooltipProps,\n        buttonProps = {},\n        ref\n    } = props;\n\n    const {\n        containerProps: { className: baseClassName, ...containerProps }\n    } = useCommonComponentProps(\"tool-button\", props);\n\n    const className = classNames(baseClassName, {\n        \"tool-button--active\": active,\n        \"tool-button--loading\": loading,\n        \"tool-button--disabled\": disabled\n    });\n\n    const [tooltipOpen, setTooltipOpen] = useState(false);\n    const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n        // Immediately hide the tooltip. When the label switches in reaction to the click,\n        // the tooltip would flicker briefly with the new label.\n        setTooltipOpen(false);\n        onClickProp?.(e);\n    };\n\n    const mergedButtonProps = mergeChakraProps<ButtonProps>(\n        { className, onClick, \"aria-label\": label, padding: 0, disabled, loading },\n        containerProps,\n        buttonProps\n    );\n    let button = (\n        <ButtonIgnoringAriaProps ref={ref} {...mergedButtonProps}>\n            <Icon>{icon}</Icon>\n        </ButtonIgnoringAriaProps>\n    );\n    if (active != null) {\n        // Make sure that only \"pressable\" buttons receive the aria-pressed attribute.\n        button = (\n            <Toggle.Root pressed={active} asChild>\n                {button}\n            </Toggle.Root>\n        );\n    }\n\n    return (\n        <Tooltip\n            content={label}\n            openDelay={500}\n            {...tooltipProps}\n            /* don't allow overwrite because component would break */\n            open={tooltipOpen}\n            onOpenChange={(e) => setTooltipOpen(e.open)}\n        >\n            {button}\n        </Tooltip>\n    );\n});\n\n/**\n * The tooltip will automatically set 'aria-describedby' when it is being shown.\n * This is redundant because the aria-label already has the same content as the tooltip.\n * This component wraps chakra's button to ignore the *-by attributes.\n */\nconst ButtonIgnoringAriaProps = function ButtonIgnoringAriaProps(\n    props: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }\n) {\n    const { \"aria-labelledby\": _label, \"aria-describedby\": _describedBy, ref, ...rest } = props;\n    return <Button ref={ref} {...rest} />;\n};\n"],"names":["ToolButton","ButtonIgnoringAriaProps"],"mappings":";;;;;;AAuFO,MAAM,UAAA,GAAkC,IAAA,CAAK,SAASA,WAAAA,CAAW,KAAA,EAAwB;AAC5F,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,EAAS,WAAA;AAAA,IACT,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAc,EAAC;AAAA,IACf;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACF,cAAA,EAAgB,EAAE,SAAA,EAAW,aAAA,EAAe,GAAG,cAAA;AAAe,GAClE,GAAI,uBAAA,CAAwB,aAAA,EAAe,KAAK,CAAA;AAEhD,EAAA,MAAM,SAAA,GAAY,WAAW,aAAA,EAAe;AAAA,IACxC,qBAAA,EAAuB,MAAA;AAAA,IACvB,sBAAA,EAAwB,OAAA;AAAA,IACxB,uBAAA,EAAyB;AAAA,GAC5B,CAAA;AAED,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAAqC;AAGlD,IAAA,cAAA,CAAe,KAAK,CAAA;AACpB,IAAA,WAAA,GAAc,CAAC,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,gBAAA;AAAA,IACtB,EAAE,WAAW,OAAA,EAAS,YAAA,EAAc,OAAO,OAAA,EAAS,CAAA,EAAG,UAAU,OAAA,EAAQ;AAAA,IACzE,cAAA;AAAA,IACA;AAAA,GACJ;AACA,EAAA,IAAI,MAAA,uBACC,uBAAA,EAAA,EAAwB,GAAA,EAAW,GAAG,iBAAA,EACnC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,EAChB,CAAA;AAEJ,EAAA,IAAI,UAAU,IAAA,EAAM;AAEhB,IAAA,MAAA,mBACI,GAAA,CAAC,OAAO,IAAA,EAAP,EAAY,SAAS,MAAA,EAAQ,OAAA,EAAO,MAChC,QAAA,EAAA,MAAA,EACL,CAAA;AAAA,EAER;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAS,KAAA;AAAA,MACT,SAAA,EAAW,GAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,IAAA,EAAM,WAAA;AAAA,MACN,YAAA,EAAc,CAAC,CAAA,KAAM,cAAA,CAAe,EAAE,IAAI,CAAA;AAAA,MAEzC,QAAA,EAAA;AAAA;AAAA,GACL;AAER,CAAC;AAOD,MAAM,uBAAA,GAA0B,SAASC,wBAAAA,CACrC,KAAA,EACF;AACE,EAAA,MAAM,EAAE,mBAAmB,MAAA,EAAQ,kBAAA,EAAoB,cAAc,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AACtF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAO,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AACvC,CAAA;;"}

package/TooltipBox.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps } from "@chakra-ui/react";
+export type TooltipBoxProps = BoxProps;
+/**
+ * A box that looks like a chakra tooltip.
+ *
+ * Useful for placing a tooltip-like element at a custom location, for example on the map.
+ *
+ * Styles are derived from chakra's current theme.
+ * Additional styles can be applied via the `css` prop (or any other chakra style props).
+ */
+export declare function TooltipBox(props: TooltipBoxProps): import("react").JSX.Element;

package/TooltipBox.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSlotRecipe, Box } from '@chakra-ui/react';
+import { classNames } from '@open-pioneer/react-utils';
+import { useMemo } from 'react';
+
+function TooltipBox(props) {
+  const { className, css, ...restProps } = props;
+  const tooltipStyles = useSlotRecipe({ key: "tooltip" })();
+  const finalCss = useMemo(() => {
+    return [tooltipStyles.content, css];
+  }, [tooltipStyles.content, css]);
+  return /* @__PURE__ */ jsx(Box, { className: classNames("tooltip-box", className), css: finalCss, ...restProps });
+}
+
+export { TooltipBox };
+//# sourceMappingURL=TooltipBox.js.map

package/TooltipBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBox.js","sources":["TooltipBox.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Box, BoxProps, useSlotRecipe } from \"@chakra-ui/react\";\nimport { classNames } from \"@open-pioneer/react-utils\";\nimport { useMemo } from \"react\";\n\nexport type TooltipBoxProps = BoxProps;\n\n/**\n * A box that looks like a chakra tooltip.\n *\n * Useful for placing a tooltip-like element at a custom location, for example on the map.\n *\n * Styles are derived from chakra's current theme.\n * Additional styles can be applied via the `css` prop (or any other chakra style props).\n */\nexport function TooltipBox(props: TooltipBoxProps) {\n    const { className, css, ...restProps } = props;\n    const tooltipStyles = useSlotRecipe({ key: \"tooltip\" })();\n    const finalCss = useMemo(() => {\n        return [tooltipStyles.content, css];\n    }, [tooltipStyles.content, css]);\n\n    return <Box className={classNames(\"tooltip-box\", className)} css={finalCss} {...restProps} />;\n}\n"],"names":[],"mappings":";;;;;AAiBO,SAAS,WAAW,KAAA,EAAwB;AAC/C,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,GAAG,WAAU,GAAI,KAAA;AACzC,EAAA,MAAM,gBAAgB,aAAA,CAAc,EAAE,GAAA,EAAK,SAAA,EAAW,CAAA,EAAE;AACxD,EAAA,MAAM,QAAA,GAAW,QAAQ,MAAM;AAC3B,IAAA,OAAO,CAAC,aAAA,CAAc,OAAA,EAAS,GAAG,CAAA;AAAA,EACtC,CAAA,EAAG,CAAC,aAAA,CAAc,OAAA,EAAS,GAAG,CAAC,CAAA;AAE/B,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,aAAA,EAAe,SAAS,CAAA,EAAG,GAAA,EAAK,QAAA,EAAW,GAAG,SAAA,EAAW,CAAA;AAC/F;;"}

package/index.d.ts

@@ -1 +1,2 @@
 export { type ToolButtonProps, ToolButton } from "./ToolButton";
+export { TooltipBox, type TooltipBoxProps } from "./TooltipBox";

package/index.js

@@ -1,2 +1,3 @@
 export { ToolButton } from './ToolButton.js';
+export { TooltipBox } from './TooltipBox.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/map-ui-components",
-  "version": "1.5.0-dev.20260910103330",
+  "version": "1.5.0-dev.20260917081843",
   "description": "Contains ui components that can used together with the map",
   "keywords": [
     "open-pioneer-trails"
@@ -17,7 +17,7 @@
     "@chakra-ui/react": "^3.37.0",
     "@open-pioneer/chakra-snippets": "4.8.0-dev.20260910101405",
     "@open-pioneer/react-utils": "4.8.0-dev.20260910101405",
-    "react": "^19.2.8"
+    "react": "^19.3.0"
   },
   "publishConfig": {
     "directory": "dist",