@open-pioneer/map-ui-components 1.3.0-dev-map-loading.20260202141334 → 1.3.0-dev-css-prop.20260210130215
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -1
- package/ToolButton.js +7 -16
- package/ToolButton.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# @open-pioneer/map-ui-components
|
|
2
2
|
|
|
3
|
-
## 1.3.0-dev-
|
|
3
|
+
## 1.3.0-dev-css-prop.20260210130215
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 911fda5: Support for new common container props (role, aria-_, data-_ and css)
|
|
8
|
+
- d54ccfd: Update to Chakra UI 3.32.0
|
|
4
9
|
|
|
5
10
|
## 1.2.0
|
|
6
11
|
|
package/ToolButton.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { Icon, Toggle, Button } from '@chakra-ui/react';
|
|
3
3
|
import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
|
|
4
|
-
import { useCommonComponentProps } from '@open-pioneer/react-utils';
|
|
4
|
+
import { useCommonComponentProps, mergeChakraProps } from '@open-pioneer/react-utils';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import { memo, useState } from 'react';
|
|
7
7
|
|
|
@@ -14,7 +14,7 @@ const ToolButton = memo(function ToolButton2(props) {
|
|
|
14
14
|
disabled,
|
|
15
15
|
active,
|
|
16
16
|
tooltipProps,
|
|
17
|
-
buttonProps,
|
|
17
|
+
buttonProps = {},
|
|
18
18
|
ref
|
|
19
19
|
} = props;
|
|
20
20
|
const {
|
|
@@ -30,21 +30,12 @@ const ToolButton = memo(function ToolButton2(props) {
|
|
|
30
30
|
setTooltipOpen(false);
|
|
31
31
|
onClickProp?.(e);
|
|
32
32
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
ref,
|
|
38
|
-
"aria-label": label,
|
|
39
|
-
padding: 0,
|
|
40
|
-
disabled,
|
|
41
|
-
loading,
|
|
42
|
-
...containerProps,
|
|
43
|
-
...buttonProps,
|
|
44
|
-
onClick,
|
|
45
|
-
children: /* @__PURE__ */ jsx(Icon, { children: icon })
|
|
46
|
-
}
|
|
33
|
+
const mergedButtonProps = mergeChakraProps(
|
|
34
|
+
{ className, onClick, "aria-label": label, padding: 0, disabled, loading },
|
|
35
|
+
containerProps,
|
|
36
|
+
buttonProps
|
|
47
37
|
);
|
|
38
|
+
let button = /* @__PURE__ */ jsx(ButtonIgnoringAriaProps, { ref, ...mergedButtonProps, children: /* @__PURE__ */ jsx(Icon, { children: icon }) });
|
|
48
39
|
if (active != null) {
|
|
49
40
|
button = /* @__PURE__ */ jsx(Toggle.Root, { pressed: active, asChild: true, children: button });
|
|
50
41
|
}
|
package/ToolButton.js.map
CHANGED
|
@@ -1 +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, Icon, Toggle } from \"@chakra-ui/react\";\nimport { Tooltip, TooltipProps } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport {
|
|
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, Icon, Toggle } from \"@chakra-ui/react\";\nimport { Tooltip, TooltipProps } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport {\n CommonComponentProps,\n mergeChakraProps,\n useCommonComponentProps\n} 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 * 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":";;;;;;;AAsFO,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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "module",
|
|
3
3
|
"name": "@open-pioneer/map-ui-components",
|
|
4
|
-
"version": "1.3.0-dev-
|
|
4
|
+
"version": "1.3.0-dev-css-prop.20260210130215",
|
|
5
5
|
"description": "Contains ui components that can used together with the map",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"open-pioneer-trails"
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"directory": "src/packages/map-ui-components"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@chakra-ui/react": "^3.
|
|
18
|
-
"@open-pioneer/react-utils": "
|
|
17
|
+
"@chakra-ui/react": "^3.32.0",
|
|
18
|
+
"@open-pioneer/react-utils": "4.5.0-dev-css-prop.20260210120105",
|
|
19
19
|
"classnames": "^2.5.1",
|
|
20
|
-
"react": "^19.2.
|
|
21
|
-
"@open-pioneer/chakra-snippets": "
|
|
20
|
+
"react": "^19.2.4",
|
|
21
|
+
"@open-pioneer/chakra-snippets": "4.5.0-dev-css-prop.20260210120105"
|
|
22
22
|
},
|
|
23
23
|
"exports": {
|
|
24
24
|
"./package.json": "./package.json",
|