@open-pioneer/map-ui-components 0.10.0 → 0.11.0-dev.20250515143825

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @open-pioneer/map-ui-components
 
+## 0.11.0-dev.20250515143825
+
+### Minor Changes
+
+- 738390e: **Breaking:** Rename `<ToolButton />` props for consistency with Chakra naming conventions:
+
+    - `isLoading` (old) --> `loading` (new)
+    - `isActive` (old) --> `active` (new)
+    - `isDisabled` (old) --> `disabled` (new)
+
+- 738390e: Update to Chakra v3
+
 ## 0.10.0
 
 ### Patch Changes

package/ToolButton.d.ts

@@ -1,6 +1,7 @@
-import { ButtonProps, TooltipProps } from "@open-pioneer/chakra-integration";
-import { FC, MouseEventHandler, ReactElement, RefAttributes } from "react";
+import { ButtonProps } from "@chakra-ui/react";
+import { TooltipProps } from "@open-pioneer/chakra-snippets/tooltip";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC, MouseEventHandler, ReactElement, RefAttributes } from "react";
 /**
  * Properties supported by {@link ToolButton}.
  */
@@ -20,7 +21,7 @@ export interface ToolButtonProps extends CommonComponentProps, RefAttributes<HTM
      * If `true`, the button will show a spinner.
      * Defaults to `false`.
      */
-    isLoading?: boolean;
+    loading?: boolean;
     /**
      * If `true`, indicates that the button is currently active with a different style.
      * Defaults to `undefined`.
@@ -29,12 +30,12 @@ export interface ToolButtonProps extends CommonComponentProps, RefAttributes<HTM
      * In that case the `aria-pressed` attribute will be configured automatically
      * (see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
      */
-    isActive?: boolean;
+    active?: boolean;
     /**
      * If `true`, the button will be disabled.
      * Defaults to `false`.
      */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /**
      * The callback that will be called when the user clicks the button.
      */

package/ToolButton.js

@@ -1,69 +1,69 @@
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip, Button } from '@open-pioneer/chakra-integration';
-import { forwardRef, useState } from 'react';
+import { Toggle, Button } from '@chakra-ui/react';
+import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
 import classNames from 'classnames';
+import { memo, useState } from 'react';
 
-const ToolButton = forwardRef(function ToolButton2(props, ref) {
+const ToolButton = memo(function ToolButton2(props) {
   const {
     label,
     icon,
     onClick: onClickProp,
-    isLoading,
-    isDisabled,
-    isActive,
+    loading,
+    disabled,
+    active,
     tooltipProps,
-    buttonProps
+    buttonProps,
+    ref
   } = props;
   const {
     containerProps: { className: baseClassName, ...containerProps }
   } = useCommonComponentProps("tool-button", props);
   const className = classNames(baseClassName, {
-    "tool-button--active": isActive,
-    "tool-button--loading": isLoading,
-    "tool-button--disabled": isDisabled
+    "tool-button--active": active,
+    "tool-button--loading": loading,
+    "tool-button--disabled": disabled
   });
-  const ariaPressed = typeof isActive === "boolean" ? isActive ? "true" : "false" : void 0;
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const onClick = (e) => {
     setTooltipOpen(false);
     onClickProp?.(e);
   };
+  let button = /* @__PURE__ */ jsx(
+    ButtonIgnoringAriaProps,
+    {
+      className,
+      ref,
+      "aria-label": label,
+      padding: 0,
+      disabled,
+      loading,
+      ...containerProps,
+      ...buttonProps,
+      onClick,
+      children: icon
+    }
+  );
+  if (active != null) {
+    button = /* @__PURE__ */ jsx(Toggle.Root, { pressed: active, asChild: true, children: button });
+  }
   return /* @__PURE__ */ jsx(
     Tooltip,
     {
-      label,
-      placement: "auto",
+      content: label,
       openDelay: 500,
       ...tooltipProps,
-      isOpen: tooltipOpen,
-      onOpen: () => setTooltipOpen(true),
-      onClose: () => setTooltipOpen(false),
-      children: /* @__PURE__ */ jsx(
-        ButtonIgnoringAriaProps,
-        {
-          className,
-          ref,
-          "aria-label": label,
-          leftIcon: icon,
-          iconSpacing: 0,
-          padding: 0,
-          isDisabled,
-          isLoading,
-          isActive,
-          "aria-pressed": ariaPressed,
-          ...containerProps,
-          ...buttonProps,
-          onClick
-        }
-      )
+      open: tooltipOpen,
+      onOpenChange: (e) => setTooltipOpen(e.open),
+      children: button
     }
   );
 });
-const ButtonIgnoringAriaProps = forwardRef(function ButtonIgnoringAriaProps2(props, ref) {
-  const { "aria-labelledby": _label, "aria-describedby": _describedBy, ...rest } = props;
+const ButtonIgnoringAriaProps = function ButtonIgnoringAriaProps2(props) {
+  const { "aria-labelledby": _label, "aria-describedby": _describedBy, ref, ...rest } = props;
   return /* @__PURE__ */ jsx(Button, { ref, ...rest });
-});
+};
 
 export { ToolButton };
 //# sourceMappingURL=ToolButton.js.map

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\nimport { Button, ButtonProps, Tooltip, TooltipProps } from \"@open-pioneer/chakra-integration\";\nimport {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    RefAttributes,\n    forwardRef,\n    useState\n} from \"react\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport classNames from \"classnames\";\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    icon: ReactElement;\n\n    /**\n     * If `true`, the button will show a spinner.\n     * Defaults to `false`.\n     */\n    isLoading?: 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    isActive?: boolean;\n\n    /**\n     * If `true`, the button will be disabled.\n     * Defaults to `false`.\n     */\n    isDisabled?: 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> = forwardRef(function ToolButton(\n    props: ToolButtonProps,\n    ref\n) {\n    const {\n        label,\n        icon,\n        onClick: onClickProp,\n        isLoading,\n        isDisabled,\n        isActive,\n        tooltipProps,\n        buttonProps\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\": isActive,\n        \"tool-button--loading\": isLoading,\n        \"tool-button--disabled\": isDisabled\n    });\n    const ariaPressed = typeof isActive === \"boolean\" ? (isActive ? \"true\" : \"false\") : undefined;\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    return (\n        <Tooltip\n            label={label}\n            placement=\"auto\"\n            openDelay={500}\n            {...tooltipProps}\n            /* don't allow overwrite because component would break */\n            isOpen={tooltipOpen}\n            onOpen={() => setTooltipOpen(true)}\n            onClose={() => setTooltipOpen(false)}\n        >\n            <ButtonIgnoringAriaProps\n                className={className}\n                ref={ref}\n                aria-label={label}\n                leftIcon={icon}\n                iconSpacing={0}\n                padding={0}\n                isDisabled={isDisabled}\n                isLoading={isLoading}\n                isActive={isActive}\n                aria-pressed={ariaPressed}\n                {...containerProps}\n                {...buttonProps}\n                /* don't allow overwrite because component would break */\n                onClick={onClick}\n            />\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 = forwardRef(function ButtonIgnoringAriaProps(\n    props: ButtonProps,\n    ref: React.ForwardedRef<HTMLButtonElement>\n) {\n    const { \"aria-labelledby\": _label, \"aria-describedby\": _describedBy, ...rest } = props;\n    return <Button ref={ref} {...rest} />;\n});\n"],"names":["ToolButton","ButtonIgnoringAriaProps"],"mappings":";;;;;;AA6EO,MAAM,UAAkC,GAAA,UAAA,CAAW,SAASA,WAAAA,CAC/D,OACA,GACF,EAAA;AACE,EAAM,MAAA;AAAA,IACF,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACA,GAAA,KAAA;AAEJ,EAAM,MAAA;AAAA,IACF,cAAgB,EAAA,EAAE,SAAW,EAAA,aAAA,EAAe,GAAG,cAAe;AAAA,GAClE,GAAI,uBAAwB,CAAA,aAAA,EAAe,KAAK,CAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,WAAW,aAAe,EAAA;AAAA,IACxC,qBAAuB,EAAA,QAAA;AAAA,IACvB,sBAAwB,EAAA,SAAA;AAAA,IACxB,uBAAyB,EAAA;AAAA,GAC5B,CAAA;AACD,EAAA,MAAM,cAAc,OAAO,QAAA,KAAa,SAAa,GAAA,QAAA,GAAW,SAAS,OAAW,GAAA,MAAA;AAEpF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAM,MAAA,OAAA,GAAU,CAAC,CAAqC,KAAA;AAGlD,IAAA,cAAA,CAAe,KAAK,CAAA;AACpB,IAAA,WAAA,GAAc,CAAC,CAAA;AAAA,GACnB;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,SAAU,EAAA,MAAA;AAAA,MACV,SAAW,EAAA,GAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,MAAQ,EAAA,WAAA;AAAA,MACR,MAAA,EAAQ,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,MACjC,OAAA,EAAS,MAAM,cAAA,CAAe,KAAK,CAAA;AAAA,MAEnC,QAAA,kBAAA,GAAA;AAAA,QAAC,uBAAA;AAAA,QAAA;AAAA,UACG,SAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,QAAU,EAAA,IAAA;AAAA,UACV,WAAa,EAAA,CAAA;AAAA,UACb,OAAS,EAAA,CAAA;AAAA,UACT,UAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAc,EAAA,WAAA;AAAA,UACb,GAAG,cAAA;AAAA,UACH,GAAG,WAAA;AAAA,UAEJ;AAAA;AAAA;AACJ;AAAA,GACJ;AAER,CAAC;AAOD,MAAM,uBAA0B,GAAA,UAAA,CAAW,SAASC,wBAAAA,CAChD,OACA,GACF,EAAA;AACE,EAAA,MAAM,EAAE,iBAAmB,EAAA,MAAA,EAAQ,oBAAoB,YAAc,EAAA,GAAG,MAAS,GAAA,KAAA;AACjF,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAO,GAAW,EAAA,GAAG,IAAM,EAAA,CAAA;AACvC,CAAC,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\nimport { Button, ButtonProps, Toggle } from \"@chakra-ui/react\";\nimport { Tooltip, TooltipProps } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport classNames from \"classnames\";\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    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    let button = (\n        <ButtonIgnoringAriaProps\n            className={className}\n            ref={ref}\n            aria-label={label}\n            padding={0}\n            disabled={disabled}\n            loading={loading}\n            {...containerProps}\n            {...buttonProps}\n            /* don't allow overwrite because component would break */\n            onClick={onClick}\n        >\n            {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":";;;;;;;AA8EO,MAAM,UAAkC,GAAA,IAAA,CAAK,SAASA,WAAAA,CAAW,KAAwB,EAAA;AAC5F,EAAM,MAAA;AAAA,IACF,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACA,GAAA,KAAA;AAEJ,EAAM,MAAA;AAAA,IACF,cAAgB,EAAA,EAAE,SAAW,EAAA,aAAA,EAAe,GAAG,cAAe;AAAA,GAClE,GAAI,uBAAwB,CAAA,aAAA,EAAe,KAAK,CAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,WAAW,aAAe,EAAA;AAAA,IACxC,qBAAuB,EAAA,MAAA;AAAA,IACvB,sBAAwB,EAAA,OAAA;AAAA,IACxB,uBAAyB,EAAA;AAAA,GAC5B,CAAA;AAED,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAM,MAAA,OAAA,GAAU,CAAC,CAAqC,KAAA;AAGlD,IAAA,cAAA,CAAe,KAAK,CAAA;AACpB,IAAA,WAAA,GAAc,CAAC,CAAA;AAAA,GACnB;AAEA,EAAA,IAAI,MACA,mBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACG,SAAA;AAAA,MACA,GAAA;AAAA,MACA,YAAY,EAAA,KAAA;AAAA,MACZ,OAAS,EAAA,CAAA;AAAA,MACT,QAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEJ,OAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAEJ,EAAA,IAAI,UAAU,IAAM,EAAA;AAEhB,IACI,MAAA,mBAAA,GAAA,CAAC,OAAO,IAAP,EAAA,EAAY,SAAS,MAAQ,EAAA,OAAA,EAAO,MAChC,QACL,EAAA,MAAA,EAAA,CAAA;AAAA;AAIR,EACI,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACG,OAAS,EAAA,KAAA;AAAA,MACT,SAAW,EAAA,GAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,IAAM,EAAA,WAAA;AAAA,MACN,YAAc,EAAA,CAAC,CAAM,KAAA,cAAA,CAAe,EAAE,IAAI,CAAA;AAAA,MAEzC,QAAA,EAAA;AAAA;AAAA,GACL;AAER,CAAC;AAOD,MAAM,uBAAA,GAA0B,SAASC,wBAAAA,CACrC,KACF,EAAA;AACE,EAAM,MAAA,EAAE,mBAAmB,MAAQ,EAAA,kBAAA,EAAoB,cAAc,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AACtF,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAO,GAAW,EAAA,GAAG,IAAM,EAAA,CAAA;AACvC,CAAA;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/map-ui-components",
-  "version": "0.10.0",
+  "version": "0.11.0-dev.20250515143825",
   "description": "Contains ui components that can used together with the map",
   "keywords": [
     "open-pioneer-trails"
@@ -14,10 +14,11 @@
     "directory": "src/packages/map-ui-components"
   },
   "dependencies": {
-    "@open-pioneer/chakra-integration": "^3.1.0",
-    "@open-pioneer/react-utils": "^3.1.0",
+    "@chakra-ui/react": "^3.17.0",
+    "@open-pioneer/react-utils": "4.0.0-dev.20250512105016",
     "classnames": "^2.3.2",
-    "react": "^19.1.0"
+    "react": "^19.1.0",
+    "@open-pioneer/chakra-snippets": "4.0.0-dev.20250512105016"
   },
   "exports": {
     "./package.json": "./package.json",