@open-pioneer/map-ui-components 0.11.0 → 0.12.0-dev.20250905090001
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 +7 -2
- package/ToolButton.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
# @open-pioneer/map-ui-components
|
|
2
2
|
|
|
3
|
+
## 0.12.0-dev.20250905090001
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 10d2fe7: Update dependencies
|
|
8
|
+
- da6a410: Update dependencies
|
|
9
|
+
|
|
3
10
|
## 0.11.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
6
13
|
|
|
7
14
|
- 66179bc: Update to core-packages v4.0.0
|
|
8
15
|
- 738390e: **Breaking:** Rename `<ToolButton />` props for consistency with Chakra naming conventions:
|
|
9
|
-
|
|
10
16
|
- `isLoading` (old) --> `loading` (new)
|
|
11
17
|
- `isActive` (old) --> `active` (new)
|
|
12
18
|
- `isDisabled` (old) --> `disabled` (new)
|
|
@@ -47,7 +53,6 @@
|
|
|
47
53
|
### Minor Changes
|
|
48
54
|
|
|
49
55
|
- 2fa8020: Update trails core package dependencies.
|
|
50
|
-
|
|
51
56
|
- Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
|
|
52
57
|
- Removes any obsolete references to `@chakra-ui/system`.
|
|
53
58
|
This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
|
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 { 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 * 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 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 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>{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":";;;;;;;AAkFO,MAAM,
|
|
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 { 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 * 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 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 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>{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":";;;;;;;AAkFO,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,WAAA;AAAA,IACA;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,IAAI,MAAA,mBACA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACG,SAAA;AAAA,MACA,GAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAA,EAAS,CAAA;AAAA,MACT,QAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEJ,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,QAAM,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAChB;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": "0.
|
|
4
|
+
"version": "0.12.0-dev.20250905090001",
|
|
5
5
|
"description": "Contains ui components that can used together with the map",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"open-pioneer-trails"
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"directory": "src/packages/map-ui-components"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@chakra-ui/react": "^3.
|
|
17
|
+
"@chakra-ui/react": "^3.24.2",
|
|
18
18
|
"@open-pioneer/react-utils": "^4.0.0",
|
|
19
19
|
"classnames": "^2.5.1",
|
|
20
|
-
"react": "^19.1.
|
|
20
|
+
"react": "^19.1.1",
|
|
21
21
|
"@open-pioneer/chakra-snippets": "^4.0.0"
|
|
22
22
|
},
|
|
23
23
|
"exports": {
|