@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/map/components/features/settings/MapSettingsTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 10 },\n    transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n    <OverlayTrigger\n        placement={Tooltip.TOP}\n        delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n        overlay={\n            <Tooltip id='tooltip' width='auto'>\n                {tooltip}\n            </Tooltip>\n        }\n    >\n        {component}\n    </OverlayTrigger>\n);\n\nexport type MapSettingsTileProps = {\n    /**\n     * Callback fired when the settings tile opens or closes.\n     */\n    onToggle?: (newState: boolean) => void;\n\n    /**\n     * Tooltip shown while the settings tile is closed.\n     */\n    tooltip?: React.ReactNode;\n\n    /**\n     * Custom panel rendered below the settings tile when it is open.\n     */\n    panel?: React.ReactNode;\n\n    /**\n     * Dropdown menu items rendered when the settings tile is open.\n     */\n    items?: JSX.Element[] | undefined;\n\n    /**\n     * Icon shown when the tile is active.\n     */\n    activeIcon?: JSX.Element | undefined;\n\n    /**\n     * Icon shown when the tile is inactive.\n     */\n    inactiveIcon?: JSX.Element | undefined;\n\n    /**\n     * Controls whether the active or inactive icon is shown.\n     */\n    isActive?: boolean;\n\n    /**\n     * Additional class name for the clickable settings button.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional class name for the settings tile wrapper.\n     */\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [toggleRef, setToggleRef] = useState<HTMLDivElement | null>(null);\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n        placement: 'top-end',\n        modifiers:\n            isOpen && isMobileScreen()\n                ? [\n                      {\n                          name: 'offset',\n                          options: {\n                              offset: [-60, -60],\n                          },\n                      },\n                  ]\n                : [],\n    });\n\n    useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && toggleRef?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {activeIcon &&\n                React.cloneElement(activeIcon, {\n                    className: activeIconClassNames,\n                })}\n            {inactiveIcon &&\n                React.cloneElement(inactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        <AnimatePresence>\n                            {isOpen && panel && (\n                                <motion.div\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {panel}\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <AnimatePresence>\n                        {isOpen && items && (\n                            <motion.div\n                                className={classNames('dropdown', isOpen && 'open')}\n                                initial={tileAnimation.initial}\n                                animate={tileAnimation.animate}\n                                exit={tileAnimation.exit}\n                                transition={tileAnimation.transition}\n                            >\n                                <MenuItemList\n                                    className='margin-bottom-5 shadow-smooth border-none'\n                                    ref={setRefDropdownMenu}\n                                    style={{ ...styles.popper, minWidth: '180px' }}\n                                    {...attributes.popper}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (item.type.isMapSettingsDropdownHeader) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </MenuItemList>\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":"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"}
+{"version":3,"file":"MapSettingsTile.js","names":[],"sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState, type CSSProperties } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { useAnchorName, usePopover } from '../../../../../hooks/useAnchoredPopover';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 10 },\n    transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n    <OverlayTrigger\n        placement={Tooltip.TOP}\n        delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n        overlay={\n            <Tooltip id='tooltip' width='auto'>\n                {tooltip}\n            </Tooltip>\n        }\n    >\n        {component}\n    </OverlayTrigger>\n);\n\ntype MapSettingsIcon = React.ReactElement<{ className?: string }>;\n\nexport type MapSettingsTileProps = {\n    /**\n     * Callback fired when the settings tile opens or closes.\n     */\n    onToggle?: (newState: boolean) => void;\n\n    /**\n     * Tooltip shown while the settings tile is closed.\n     */\n    tooltip?: React.ReactNode;\n\n    /**\n     * Custom panel rendered below the settings tile when it is open.\n     */\n    panel?: React.ReactNode;\n\n    /**\n     * Dropdown menu items rendered when the settings tile is open.\n     */\n    items?: React.ReactElement[];\n\n    /**\n     * Icon shown when the tile is active.\n     */\n    activeIcon?: React.ReactElement;\n\n    /**\n     * Icon shown when the tile is inactive.\n     */\n    inactiveIcon?: React.ReactElement;\n\n    /**\n     * Controls whether the active or inactive icon is shown.\n     */\n    isActive?: boolean;\n\n    /**\n     * Additional class name for the clickable settings button.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional class name for the settings tile wrapper.\n     */\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n    const typedActiveIcon = activeIcon as MapSettingsIcon | undefined;\n    const typedInactiveIcon = inactiveIcon as MapSettingsIcon | undefined;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current?.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current?.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n    const anchorName = useAnchorName('map-settings-tile');\n\n    usePopover(refDropdownMenu, isOpen);\n\n    useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && buttonRef.current?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n    const dropdownMenuClasses = classNames('dropdown-menu', 'margin-bottom-5 shadow-smooth border-none');\n\n    const anchorStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const dropdownMenuStyle = {\n        positionAnchor: anchorName,\n    } as CSSProperties;\n\n    const dropdownMenuPopoverProps = {\n        popover: 'manual',\n    } as const;\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        typedActiveIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        typedInactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {typedActiveIcon &&\n                React.cloneElement(typedActiveIcon, {\n                    className: activeIconClassNames,\n                })}\n            {typedInactiveIcon &&\n                React.cloneElement(typedInactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        <AnimatePresence>\n                            {isOpen && panel && (\n                                <motion.div\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {panel}\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' style={anchorStyle}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <AnimatePresence>\n                        {isOpen && items && (\n                            <div className={classNames('dropdown', isOpen && 'open')}>\n                                <motion.ul\n                                    {...dropdownMenuPopoverProps}\n                                    className={dropdownMenuClasses}\n                                    role='menu'\n                                    ref={setRefDropdownMenu}\n                                    style={dropdownMenuStyle}\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (\n                                            (item.type as { isMapSettingsDropdownHeader?: boolean })\n                                                .isMapSettingsDropdownHeader\n                                        ) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </motion.ul>\n                            </div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"mappings":"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"}

package/components/map/components/features/settings/ZoomButtons.js

@@ -1,15 +1,34 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import o from "../../../../../utils/classNames.js";
-import { MapIcon as e, ZOOM_IN as c, ZOOM_OUT as m } from "../../../icons/MapIcon.js";
-const h = ({ onZoomIn: a, onZoomOut: i }) => {
-  const t = o("ZoomButtons");
-  return /* @__PURE__ */ l("div", { className: t, children: [
-    /* @__PURE__ */ s("div", { className: "MapSettingsTile", onClick: a, children: /* @__PURE__ */ s(e, { name: c, className: "display-block hover-scale-110", height: 16, width: 16 }) }),
-    /* @__PURE__ */ s("div", { className: "MapSettingsTileSpacer" }),
-    /* @__PURE__ */ s("div", { className: "MapSettingsTile", onClick: i, children: /* @__PURE__ */ s(e, { name: m, className: "display-block hover-scale-110", height: 16, width: 16 }) })
-  ] });
-};
-export {
-  h as default
-};
-//# sourceMappingURL=ZoomButtons.js.map
+import e from "../../../../../utils/classNames.js";
+import { MapIcon as t, ZOOM_IN as n, ZOOM_OUT as r } from "../../../icons/MapIcon.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/map/components/features/settings/ZoomButtons.tsx
+var o = ({ onZoomIn: o, onZoomOut: s }) => /* @__PURE__ */ a("div", {
+	className: e("ZoomButtons"),
+	children: [
+		/* @__PURE__ */ i("div", {
+			className: "MapSettingsTile",
+			onClick: o,
+			children: /* @__PURE__ */ i(t, {
+				name: n,
+				className: "display-block hover-scale-110",
+				height: 16,
+				width: 16
+			})
+		}),
+		/* @__PURE__ */ i("div", { className: "MapSettingsTileSpacer" }),
+		/* @__PURE__ */ i("div", {
+			className: "MapSettingsTile",
+			onClick: s,
+			children: /* @__PURE__ */ i(t, {
+				name: r,
+				className: "display-block hover-scale-110",
+				height: 16,
+				width: 16
+			})
+		})
+	]
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=ZoomButtons.js.map

package/components/map/components/features/settings/ZoomButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomButtons.js","sources":["../../../../../../src/components/map/components/features/settings/ZoomButtons.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../../../../utils/classNames';\nimport { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';\n\nexport type ZoomButtonsProps = {\n    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;\n    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst ZoomButtons = ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => {\n    const buttonClasses = classNames('ZoomButtons');\n\n    return (\n        <div className={buttonClasses}>\n            <div className='MapSettingsTile' onClick={onZoomIn}>\n                <MapIcon name={ZOOM_IN} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n            <div className='MapSettingsTileSpacer' />\n            <div className='MapSettingsTile' onClick={onZoomOut}>\n                <MapIcon name={ZOOM_OUT} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n        </div>\n    );\n};\n\nexport default ZoomButtons;\n"],"names":["ZoomButtons","onZoomIn","onZoomOut","buttonClasses","classNames","jsxs","jsx","MapIcon","ZOOM_IN","ZOOM_OUT"],"mappings":";;;AAUA,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,WAAAC,QAAkC;AAC/D,QAAMC,IAAgBC,EAAW,aAAa;AAE9C,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mBAAkB,SAASL,GACtC,UAAA,gBAAAK,EAACC,GAAA,EAAQ,MAAMC,GAAS,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,GAC7F;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,wBAAA,CAAwB;AAAA,sBACtC,OAAA,EAAI,WAAU,mBAAkB,SAASJ,GACtC,UAAA,gBAAAI,EAACC,GAAA,EAAQ,MAAME,GAAU,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,EAAA,CAC9F;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ZoomButtons.js","names":[],"sources":["../../../../../../src/components/map/components/features/settings/ZoomButtons.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../../../../utils/classNames';\nimport { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';\n\nexport type ZoomButtonsProps = {\n    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;\n    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst ZoomButtons = ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => {\n    const buttonClasses = classNames('ZoomButtons');\n\n    return (\n        <div className={buttonClasses}>\n            <div className='MapSettingsTile' onClick={onZoomIn}>\n                <MapIcon name={ZOOM_IN} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n            <div className='MapSettingsTileSpacer' />\n            <div className='MapSettingsTile' onClick={onZoomOut}>\n                <MapIcon name={ZOOM_OUT} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n        </div>\n    );\n};\n\nexport default ZoomButtons;\n"],"mappings":";;;;AAUA,IAAM,KAAe,EAAE,aAAU,mBAIzB,kBAAC,OAAD;CAAK,WAHa,EAAW,aAGb;WAAhB;EACI,kBAAC,OAAD;GAAK,WAAU;GAAkB,SAAS;aACtC,kBAAC,GAAD;IAAS,MAAM;IAAS,WAAU;IAAgC,QAAQ;IAAI,OAAO;GAAK,CAAA;EACzF,CAAA;EACL,kBAAC,OAAD,EAAK,WAAU,wBAAyB,CAAA;EACxC,kBAAC,OAAD;GAAK,WAAU;GAAkB,SAAS;aACtC,kBAAC,GAAD;IAAS,MAAM;IAAU,WAAU;IAAgC,QAAQ;IAAI,OAAO;GAAK,CAAA;EAC1F,CAAA;CACJ"}

package/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export type MapAdditionalLayerSettingsProps = {
     activeBuiltinLayers?: string[];
     activeLayers?: string[];
-    layers?: JSX.Element[];
+    layers?: React.ReactElement[];
     tooltip?: string | React.ReactNode;
 };
 declare const MapAdditionalLayerSettings: (props: MapAdditionalLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;

package/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.js

@@ -1,23 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import { isEmpty as o } from "es-toolkit/compat";
-import { union as m } from "es-toolkit/array";
-import p from "../MapSettingsTile.js";
 import { MapIcon as e } from "../../../../icons/MapIcon.js";
-const L = (r) => {
-  const { activeBuiltinLayers: n = [], activeLayers: s = [], layers: c = [], ...l } = r, a = m(n, s), t = !o(a);
-  return /* @__PURE__ */ i(
-    p,
-    {
-      className: "MapAdditionalLayerSettings",
-      isActive: !o(a),
-      activeIcon: t ? /* @__PURE__ */ i(e, { name: "rioglyph-layer-pois text-color-primary", className: "MapAdditionalLayerIcon" }) : void 0,
-      inactiveIcon: t ? void 0 : /* @__PURE__ */ i(e, { name: "rioglyph-layer-pois text-color-gray", className: "MapAdditionalLayerIconInactive" }),
-      items: c,
-      ...l
-    }
-  );
+import t from "../MapSettingsTile.js";
+import { isEmpty as n } from "es-toolkit/compat";
+import { jsx as r } from "react/jsx-runtime";
+import { union as i } from "es-toolkit/array";
+//#region src/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.tsx
+var a = (a) => {
+	let { activeBuiltinLayers: o = [], activeLayers: s = [], layers: c = [], ...l } = a, u = i(o, s), d = !n(u);
+	return /* @__PURE__ */ r(t, {
+		className: "MapAdditionalLayerSettings",
+		isActive: !n(u),
+		activeIcon: d ? /* @__PURE__ */ r(e, {
+			name: "icon-layer-pois text-color-primary",
+			className: "MapAdditionalLayerIcon"
+		}) : void 0,
+		inactiveIcon: d ? void 0 : /* @__PURE__ */ r(e, {
+			name: "icon-layer-pois text-color-gray",
+			className: "MapAdditionalLayerIconInactive"
+		}),
+		items: c,
+		...l
+	});
 };
-export {
-  L as default
-};
-//# sourceMappingURL=MapAdditionalLayerSettings.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=MapAdditionalLayerSettings.js.map

package/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapAdditionalLayerSettings.js","sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.tsx"],"sourcesContent":["import type React from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { union } from 'es-toolkit/array';\n\nimport MapSettingsTile from '../MapSettingsTile';\nimport { MapIcon } from '../../../../icons/MapIcon';\n\nexport type MapAdditionalLayerSettingsProps = {\n    activeBuiltinLayers?: string[];\n    activeLayers?: string[];\n    layers?: JSX.Element[];\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapAdditionalLayerSettings = (props: MapAdditionalLayerSettingsProps) => {\n    const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;\n\n    const allActiveLayer = union(activeBuiltinLayers, activeLayers);\n\n    const isActive = !isEmpty(allActiveLayer);\n\n    return (\n        <MapSettingsTile\n            className='MapAdditionalLayerSettings'\n            isActive={!isEmpty(allActiveLayer)}\n            activeIcon={\n                isActive ? (\n                    <MapIcon name='rioglyph-layer-pois text-color-primary' className='MapAdditionalLayerIcon' />\n                ) : undefined\n            }\n            inactiveIcon={\n                !isActive ? (\n                    <MapIcon name='rioglyph-layer-pois text-color-gray' className='MapAdditionalLayerIconInactive' />\n                ) : undefined\n            }\n            items={layers}\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapAdditionalLayerSettings;\n"],"names":["MapAdditionalLayerSettings","props","activeBuiltinLayers","activeLayers","layers","remainingProps","allActiveLayer","union","isActive","isEmpty","jsx","MapSettingsTile","MapIcon"],"mappings":";;;;;AAcA,MAAMA,IAA6B,CAACC,MAA2C;AAC3E,QAAM,EAAE,qBAAAC,IAAsB,CAAA,GAAI,cAAAC,IAAe,CAAA,GAAI,QAAAC,IAAS,CAAA,GAAI,GAAGC,EAAA,IAAmBJ,GAElFK,IAAiBC,EAAML,GAAqBC,CAAY,GAExDK,IAAW,CAACC,EAAQH,CAAc;AAExC,SACI,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,UAAU,CAACF,EAAQH,CAAc;AAAA,MACjC,YACIE,IACI,gBAAAE,EAACE,GAAA,EAAQ,MAAK,0CAAyC,WAAU,0BAAyB,IAC1F;AAAA,MAER,cACKJ,IAEG,SADA,gBAAAE,EAACE,KAAQ,MAAK,uCAAsC,WAAU,iCAAA,CAAiC;AAAA,MAGvG,OAAOR;AAAA,MACN,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"MapAdditionalLayerSettings.js","names":[],"sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.tsx"],"sourcesContent":["import type React from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { union } from 'es-toolkit/array';\n\nimport MapSettingsTile from '../MapSettingsTile';\nimport { MapIcon } from '../../../../icons/MapIcon';\n\nexport type MapAdditionalLayerSettingsProps = {\n    activeBuiltinLayers?: string[];\n    activeLayers?: string[];\n    layers?: React.ReactElement[];\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapAdditionalLayerSettings = (props: MapAdditionalLayerSettingsProps) => {\n    const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;\n\n    const allActiveLayer = union(activeBuiltinLayers, activeLayers);\n\n    const isActive = !isEmpty(allActiveLayer);\n\n    return (\n        <MapSettingsTile\n            className='MapAdditionalLayerSettings'\n            isActive={!isEmpty(allActiveLayer)}\n            activeIcon={\n                isActive ? (\n                    <MapIcon name='icon-layer-pois text-color-primary' className='MapAdditionalLayerIcon' />\n                ) : undefined\n            }\n            inactiveIcon={\n                !isActive ? (\n                    <MapIcon name='icon-layer-pois text-color-gray' className='MapAdditionalLayerIconInactive' />\n                ) : undefined\n            }\n            items={layers}\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapAdditionalLayerSettings;\n"],"mappings":";;;;;;AAcA,IAAM,KAA8B,MAA2C;CAC3E,IAAM,EAAE,yBAAsB,CAAC,GAAG,kBAAe,CAAC,GAAG,YAAS,CAAC,GAAG,GAAG,MAAmB,GAElF,IAAiB,EAAM,GAAqB,CAAY,GAExD,IAAW,CAAC,EAAQ,CAAc;CAExC,OACI,kBAAC,GAAD;EACI,WAAU;EACV,UAAU,CAAC,EAAQ,CAAc;EACjC,YACI,IACI,kBAAC,GAAD;GAAS,MAAK;GAAqC,WAAU;EAA0B,CAAA,IACvF,KAAA;EAER,cACK,IAEG,KAAA,IADA,kBAAC,GAAD;GAAS,MAAK;GAAkC,WAAU;EAAkC,CAAA;EAGpG,OAAO;EACP,GAAI;CACP,CAAA;AAET"}

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 export type MapClusterSettingsProps = {
     onToggle?: (setShowCluster: boolean) => void;
-    onShowClusterChange?: (setShowCluster: boolean) => boolean;
+    onShowClusterChange?: (setShowCluster: boolean) => void;
     showCluster?: boolean;
-    clusterEnabledLabel?: string | JSX.Element;
-    clusterDisabledLabel?: string | JSX.Element;
-    dropdownHeaderText?: string | JSX.Element;
+    clusterEnabledLabel?: string | React.ReactElement;
+    clusterDisabledLabel?: string | React.ReactElement;
+    dropdownHeaderText?: string | React.ReactElement;
     tooltip?: string | React.ReactNode;
 };
 declare const MapClusterSettings: (props: MapClusterSettingsProps) => import("react/jsx-runtime").JSX.Element;

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -1,60 +1,55 @@
-import { jsx as e, jsxs as S } from "react/jsx-runtime";
-import { noop as p } from "es-toolkit/function";
-import { compact as T } from "es-toolkit/compat";
-import f from "../MapSettingsPanel.js";
-import C from "../MapSettingsItem.js";
-import g from "../MapSettingsTile.js";
-import { MapIcon as t, NO_CLUSTER_INACTIVE as u, CLUSTER_INACTIVE as I, CLUSTER_ACTIVE as E, NO_CLUSTER_ACTIVE as A } from "../../../../icons/MapIcon.js";
-import L from "../items/MapSettingsDropdownHeader.js";
-const V = (d) => {
-  const {
-    showCluster: a = !0,
-    onShowClusterChange: b = p,
-    onToggle: v = p,
-    clusterEnabledLabel: o,
-    clusterDisabledLabel: n,
-    dropdownHeaderText: s,
-    ...M
-  } = d, r = (m) => {
-    b(m), v(m);
-  }, l = !!o || !!n, N = s && /* @__PURE__ */ e(L, { label: s }, "mapClusterDropdownHeader"), i = /* @__PURE__ */ e(
-    C,
-    {
-      onClick: () => r(!0),
-      isActive: a,
-      activeIcon: /* @__PURE__ */ e(t, { name: E, className: "MapClusterIcon" }),
-      inactiveIcon: /* @__PURE__ */ e(t, { name: I, className: "MapClusterIconInactive" }),
-      label: o
-    },
-    "enableClusterButtons"
-  ), c = /* @__PURE__ */ e(
-    C,
-    {
-      onClick: () => r(!1),
-      isActive: !a,
-      activeIcon: /* @__PURE__ */ e(t, { name: A, className: "MapNoClusterIcon" }),
-      inactiveIcon: /* @__PURE__ */ e(t, { name: u, className: "MapNoClusterIconInactive" }),
-      label: n
-    },
-    "disableClusterButton"
-  );
-  return /* @__PURE__ */ e(
-    g,
-    {
-      className: "MapClusterSettings",
-      isActive: a,
-      activeIcon: /* @__PURE__ */ e(t, { name: I }),
-      inactiveIcon: /* @__PURE__ */ e(t, { name: u }),
-      items: l ? T([N, i, c]) : void 0,
-      panel: !l && /* @__PURE__ */ S(f, { children: [
-        i,
-        c
-      ] }),
-      ...M
-    }
-  );
+import e from "../MapSettingsItem.js";
+import { CLUSTER_ACTIVE as t, CLUSTER_INACTIVE as n, MapIcon as r, NO_CLUSTER_ACTIVE as i, NO_CLUSTER_INACTIVE as a } from "../../../../icons/MapIcon.js";
+import o from "../MapSettingsPanel.js";
+import s from "../MapSettingsTile.js";
+import c from "../items/MapSettingsDropdownHeader.js";
+import { noop as l } from "es-toolkit/function";
+import { compact as u } from "es-toolkit/compat";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/map/components/features/settings/builtinSettings/MapClusterSettings.tsx
+var p = (p) => {
+	let { showCluster: m = !0, onShowClusterChange: h = l, onToggle: g = l, clusterEnabledLabel: _, clusterDisabledLabel: v, dropdownHeaderText: y, ...b } = p, x = (e) => {
+		h(e), g(e);
+	}, S = !!_ || !!v, C = y && /* @__PURE__ */ d(c, { label: y }, "mapClusterDropdownHeader"), w = /* @__PURE__ */ d(e, {
+		onClick: () => x(!0),
+		isActive: m,
+		activeIcon: /* @__PURE__ */ d(r, {
+			name: t,
+			className: "MapClusterIcon"
+		}),
+		inactiveIcon: /* @__PURE__ */ d(r, {
+			name: n,
+			className: "MapClusterIconInactive"
+		}),
+		label: _
+	}, "enableClusterButtons"), T = /* @__PURE__ */ d(e, {
+		onClick: () => x(!1),
+		isActive: !m,
+		activeIcon: /* @__PURE__ */ d(r, {
+			name: i,
+			className: "MapNoClusterIcon"
+		}),
+		inactiveIcon: /* @__PURE__ */ d(r, {
+			name: a,
+			className: "MapNoClusterIconInactive"
+		}),
+		label: v
+	}, "disableClusterButton");
+	return /* @__PURE__ */ d(s, {
+		className: "MapClusterSettings",
+		isActive: m,
+		activeIcon: /* @__PURE__ */ d(r, { name: n }),
+		inactiveIcon: /* @__PURE__ */ d(r, { name: a }),
+		items: S ? u([
+			C,
+			w,
+			T
+		]) : void 0,
+		panel: !S && /* @__PURE__ */ f(o, { children: [w, T] }),
+		...b
+	});
 };
-export {
-  V as default
-};
-//# sourceMappingURL=MapClusterSettings.js.map
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=MapClusterSettings.js.map

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapClusterSettings.js","sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapClusterSettings.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\nimport { compact } from 'es-toolkit/compat';\n\nimport MapSettingsPanel from '../MapSettingsPanel';\nimport MapSettingsItem from '../MapSettingsItem';\nimport MapSettingsTile from '../MapSettingsTile';\n\nimport {\n    MapIcon,\n    CLUSTER_ACTIVE,\n    CLUSTER_INACTIVE,\n    NO_CLUSTER_ACTIVE,\n    NO_CLUSTER_INACTIVE,\n} from '../../../../icons/MapIcon';\nimport MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';\n\nexport type MapClusterSettingsProps = {\n    onToggle?: (setShowCluster: boolean) => void;\n    onShowClusterChange?: (setShowCluster: boolean) => boolean;\n    showCluster?: boolean;\n    clusterEnabledLabel?: string | JSX.Element;\n    clusterDisabledLabel?: string | JSX.Element;\n    dropdownHeaderText?: string | JSX.Element;\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapClusterSettings = (props: MapClusterSettingsProps) => {\n    const {\n        showCluster = true,\n        onShowClusterChange = noop,\n        onToggle = noop,\n        clusterEnabledLabel,\n        clusterDisabledLabel,\n        dropdownHeaderText,\n        ...remainingProps\n    } = props;\n\n    const handleShowCluster = (setShowCluster: boolean) => {\n        onShowClusterChange(setShowCluster);\n        onToggle(setShowCluster);\n    };\n\n    const hasLabels = !!clusterEnabledLabel || !!clusterDisabledLabel;\n\n    const dropdownHeader = dropdownHeaderText && (\n        <MapSettingsDropdownHeader key='mapClusterDropdownHeader' label={dropdownHeaderText} />\n    );\n\n    const enableClusterButtons = (\n        <MapSettingsItem\n            key='enableClusterButtons'\n            onClick={() => handleShowCluster(true)}\n            isActive={showCluster}\n            activeIcon={<MapIcon name={CLUSTER_ACTIVE} className='MapClusterIcon' />}\n            inactiveIcon={<MapIcon name={CLUSTER_INACTIVE} className='MapClusterIconInactive' />}\n            label={clusterEnabledLabel}\n        />\n    );\n\n    const disableClusterButton = (\n        <MapSettingsItem\n            key='disableClusterButton'\n            onClick={() => handleShowCluster(false)}\n            isActive={!showCluster}\n            activeIcon={<MapIcon name={NO_CLUSTER_ACTIVE} className='MapNoClusterIcon' />}\n            inactiveIcon={<MapIcon name={NO_CLUSTER_INACTIVE} className='MapNoClusterIconInactive' />}\n            label={clusterDisabledLabel}\n        />\n    );\n\n    return (\n        <MapSettingsTile\n            className='MapClusterSettings'\n            isActive={showCluster}\n            activeIcon={<MapIcon name={CLUSTER_INACTIVE} />}\n            inactiveIcon={<MapIcon name={NO_CLUSTER_INACTIVE} />}\n            items={hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined}\n            panel={\n                !hasLabels && (\n                    <MapSettingsPanel>\n                        {enableClusterButtons}\n                        {disableClusterButton}\n                    </MapSettingsPanel>\n                )\n            }\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapClusterSettings;\n"],"names":["MapClusterSettings","props","showCluster","onShowClusterChange","noop","onToggle","clusterEnabledLabel","clusterDisabledLabel","dropdownHeaderText","remainingProps","handleShowCluster","setShowCluster","hasLabels","dropdownHeader","jsx","MapSettingsDropdownHeader","enableClusterButtons","MapSettingsItem","MapIcon","CLUSTER_ACTIVE","CLUSTER_INACTIVE","disableClusterButton","NO_CLUSTER_ACTIVE","NO_CLUSTER_INACTIVE","MapSettingsTile","compact","jsxs","MapSettingsPanel"],"mappings":";;;;;;;;AA2BA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,qBAAAC,IAAsBC;AAAA,IACtB,UAAAC,IAAWD;AAAA,IACX,qBAAAE;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEES,IAAoB,CAACC,MAA4B;AACnD,IAAAR,EAAoBQ,CAAc,GAClCN,EAASM,CAAc;AAAA,EAC3B,GAEMC,IAAY,CAAC,CAACN,KAAuB,CAAC,CAACC,GAEvCM,IAAiBL,KACnB,gBAAAM,EAACC,GAAA,EAAyD,OAAOP,KAAlC,0BAAsD,GAGnFQ,IACF,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEG,SAAS,MAAMP,EAAkB,EAAI;AAAA,MACrC,UAAUR;AAAA,MACV,YAAY,gBAAAY,EAACI,GAAA,EAAQ,MAAMC,GAAgB,WAAU,kBAAiB;AAAA,MACtE,cAAc,gBAAAL,EAACI,GAAA,EAAQ,MAAME,GAAkB,WAAU,0BAAyB;AAAA,MAClF,OAAOd;AAAA,IAAA;AAAA,IALH;AAAA,EAAA,GASNe,IACF,gBAAAP;AAAA,IAACG;AAAA,IAAA;AAAA,MAEG,SAAS,MAAMP,EAAkB,EAAK;AAAA,MACtC,UAAU,CAACR;AAAA,MACX,YAAY,gBAAAY,EAACI,GAAA,EAAQ,MAAMI,GAAmB,WAAU,oBAAmB;AAAA,MAC3E,cAAc,gBAAAR,EAACI,GAAA,EAAQ,MAAMK,GAAqB,WAAU,4BAA2B;AAAA,MACvF,OAAOhB;AAAA,IAAA;AAAA,IALH;AAAA,EAAA;AASZ,SACI,gBAAAO;AAAA,IAACU;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,UAAUtB;AAAA,MACV,YAAY,gBAAAY,EAACI,GAAA,EAAQ,MAAME,EAAA,CAAkB;AAAA,MAC7C,cAAc,gBAAAN,EAACI,GAAA,EAAQ,MAAMK,EAAA,CAAqB;AAAA,MAClD,OAAOX,IAAYa,EAAQ,CAACZ,GAAgBG,GAAsBK,CAAoB,CAAC,IAAI;AAAA,MAC3F,OACI,CAACT,KACG,gBAAAc,EAACC,GAAA,EACI,UAAA;AAAA,QAAAX;AAAA,QACAK;AAAA,MAAA,GACL;AAAA,MAGP,GAAGZ;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"MapClusterSettings.js","names":[],"sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapClusterSettings.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\nimport { compact } from 'es-toolkit/compat';\n\nimport MapSettingsPanel from '../MapSettingsPanel';\nimport MapSettingsItem from '../MapSettingsItem';\nimport MapSettingsTile from '../MapSettingsTile';\n\nimport {\n    MapIcon,\n    CLUSTER_ACTIVE,\n    CLUSTER_INACTIVE,\n    NO_CLUSTER_ACTIVE,\n    NO_CLUSTER_INACTIVE,\n} from '../../../../icons/MapIcon';\nimport MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';\n\nexport type MapClusterSettingsProps = {\n    onToggle?: (setShowCluster: boolean) => void;\n    onShowClusterChange?: (setShowCluster: boolean) => void;\n    showCluster?: boolean;\n    clusterEnabledLabel?: string | React.ReactElement;\n    clusterDisabledLabel?: string | React.ReactElement;\n    dropdownHeaderText?: string | React.ReactElement;\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapClusterSettings = (props: MapClusterSettingsProps) => {\n    const {\n        showCluster = true,\n        onShowClusterChange = noop,\n        onToggle = noop,\n        clusterEnabledLabel,\n        clusterDisabledLabel,\n        dropdownHeaderText,\n        ...remainingProps\n    } = props;\n\n    const handleShowCluster = (setShowCluster: boolean) => {\n        onShowClusterChange(setShowCluster);\n        onToggle(setShowCluster);\n    };\n\n    const hasLabels = !!clusterEnabledLabel || !!clusterDisabledLabel;\n\n    const dropdownHeader = dropdownHeaderText && (\n        <MapSettingsDropdownHeader key='mapClusterDropdownHeader' label={dropdownHeaderText} />\n    );\n\n    const enableClusterButtons = (\n        <MapSettingsItem\n            key='enableClusterButtons'\n            onClick={() => handleShowCluster(true)}\n            isActive={showCluster}\n            activeIcon={<MapIcon name={CLUSTER_ACTIVE} className='MapClusterIcon' />}\n            inactiveIcon={<MapIcon name={CLUSTER_INACTIVE} className='MapClusterIconInactive' />}\n            label={clusterEnabledLabel}\n        />\n    );\n\n    const disableClusterButton = (\n        <MapSettingsItem\n            key='disableClusterButton'\n            onClick={() => handleShowCluster(false)}\n            isActive={!showCluster}\n            activeIcon={<MapIcon name={NO_CLUSTER_ACTIVE} className='MapNoClusterIcon' />}\n            inactiveIcon={<MapIcon name={NO_CLUSTER_INACTIVE} className='MapNoClusterIconInactive' />}\n            label={clusterDisabledLabel}\n        />\n    );\n\n    return (\n        <MapSettingsTile\n            className='MapClusterSettings'\n            isActive={showCluster}\n            activeIcon={<MapIcon name={CLUSTER_INACTIVE} />}\n            inactiveIcon={<MapIcon name={NO_CLUSTER_INACTIVE} />}\n            items={hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined}\n            panel={\n                !hasLabels && (\n                    <MapSettingsPanel>\n                        {enableClusterButtons}\n                        {disableClusterButton}\n                    </MapSettingsPanel>\n                )\n            }\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapClusterSettings;\n"],"mappings":";;;;;;;;;AA2BA,IAAM,KAAsB,MAAmC;CAC3D,IAAM,EACF,iBAAc,IACd,yBAAsB,GACtB,cAAW,GACX,wBACA,yBACA,uBACA,GAAG,MACH,GAEE,KAAqB,MAA4B;EAEnD,AADA,EAAoB,CAAc,GAClC,EAAS,CAAc;CAC3B,GAEM,IAAY,CAAC,CAAC,KAAuB,CAAC,CAAC,GAEvC,IAAiB,KACnB,kBAAC,GAAD,EAA0D,OAAO,EAAqB,GAAvD,0BAAuD,GAGpF,IACF,kBAAC,GAAD;EAEI,eAAe,EAAkB,EAAI;EACrC,UAAU;EACV,YAAY,kBAAC,GAAD;GAAS,MAAM;GAAgB,WAAU;EAAkB,CAAA;EACvE,cAAc,kBAAC,GAAD;GAAS,MAAM;GAAkB,WAAU;EAA0B,CAAA;EACnF,OAAO;CACV,GANO,sBAMP,GAGC,IACF,kBAAC,GAAD;EAEI,eAAe,EAAkB,EAAK;EACtC,UAAU,CAAC;EACX,YAAY,kBAAC,GAAD;GAAS,MAAM;GAAmB,WAAU;EAAoB,CAAA;EAC5E,cAAc,kBAAC,GAAD;GAAS,MAAM;GAAqB,WAAU;EAA4B,CAAA;EACxF,OAAO;CACV,GANO,sBAMP;CAGL,OACI,kBAAC,GAAD;EACI,WAAU;EACV,UAAU;EACV,YAAY,kBAAC,GAAD,EAAS,MAAM,EAAmB,CAAA;EAC9C,cAAc,kBAAC,GAAD,EAAS,MAAM,EAAsB,CAAA;EACnD,OAAO,IAAY,EAAQ;GAAC;GAAgB;GAAsB;EAAoB,CAAC,IAAI,KAAA;EAC3F,OACI,CAAC,KACG,kBAAC,GAAD,EAAA,UAAA,CACK,GACA,CACa,EAAA,CAAA;EAG1B,GAAI;CACP,CAAA;AAET"}

package/components/map/components/features/settings/builtinSettings/MapLayerSettings.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
+import { MapLayer } from '../../../../utils/mapTypes';
 export type MapLayerSettingsProps = {
     activeBuiltinLayers?: string[];
     activeLayers?: string[];
-    onMapLayerChange?: () => string;
-    layers?: JSX.Element[];
+    onMapLayerChange?: (layer: MapLayer) => void;
+    layers?: React.ReactElement[];
     tooltip?: string | React.ReactNode;
 };
 declare const MapLayerSettings: (props: MapLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;

package/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -1,39 +1,34 @@
-import { jsx as e } from "react/jsx-runtime";
-import L from "react";
-import { union as g, isEmpty as v, map as M } from "es-toolkit/compat";
-import { noop as f } from "es-toolkit/function";
-import d from "../MapSettingsPanel.js";
-import I from "../MapSettingsTile.js";
-import { MapIcon as c } from "../../../../icons/MapIcon.js";
-const A = (s) => {
-  const {
-    activeBuiltinLayers: o = [],
-    activeLayers: p = [],
-    layers: t = [],
-    onMapLayerChange: m = f,
-    ...l
-  } = s, y = g(o, p), r = !!t.at(0)?.props.label, a = !v(y), n = M(
-    t,
-    (i) => L.cloneElement(i, {
-      key: i?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,
-      activeBuiltinLayers: o,
-      onMapLayerChange: m
-    })
-  );
-  return /* @__PURE__ */ e(
-    I,
-    {
-      className: "MapLayerSettings",
-      isActive: a,
-      activeIcon: a ? /* @__PURE__ */ e(c, { name: "rioglyph-construction text-color-primary", className: "MapLayerIcon" }) : void 0,
-      inactiveIcon: a ? void 0 : /* @__PURE__ */ e(c, { name: "rioglyph-construction text-color-gray", className: "MapLayerIconInactive" }),
-      items: r ? n : void 0,
-      panel: !r && /* @__PURE__ */ e(d, { children: n }),
-      ...l
-    }
-  );
+import { MapIcon as e } from "../../../../icons/MapIcon.js";
+import t from "../MapSettingsPanel.js";
+import n from "../MapSettingsTile.js";
+import r from "react";
+import { noop as i } from "es-toolkit/function";
+import { isEmpty as a, map as o, union as s } from "es-toolkit/compat";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/map/components/features/settings/builtinSettings/MapLayerSettings.tsx
+var l = (l) => {
+	let { activeBuiltinLayers: u = [], activeLayers: d = [], layers: f = [], onMapLayerChange: p = i, ...m } = l, h = f, g = s(u, d), _ = !!h.at(0)?.props.label, v = !a(g), y = o(h, (e) => r.cloneElement(e, {
+		key: e?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,
+		activeBuiltinLayers: u,
+		onMapLayerChange: p
+	}));
+	return /* @__PURE__ */ c(n, {
+		className: "MapLayerSettings",
+		isActive: v,
+		activeIcon: v ? /* @__PURE__ */ c(e, {
+			name: "icon-construction text-color-primary",
+			className: "MapLayerIcon"
+		}) : void 0,
+		inactiveIcon: v ? void 0 : /* @__PURE__ */ c(e, {
+			name: "icon-construction text-color-gray",
+			className: "MapLayerIconInactive"
+		}),
+		items: _ ? y : void 0,
+		panel: !_ && /* @__PURE__ */ c(t, { children: y }),
+		...m
+	});
 };
-export {
-  A as default
-};
-//# sourceMappingURL=MapLayerSettings.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=MapLayerSettings.js.map

package/components/map/components/features/settings/builtinSettings/MapLayerSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerSettings.js","sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapLayerSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { isEmpty, map, union } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport MapSettingsPanel from '../MapSettingsPanel';\nimport MapSettingsTile from '../MapSettingsTile';\n\nimport { MapIcon } from '../../../../icons/MapIcon';\n\nexport type MapLayerSettingsProps = {\n    activeBuiltinLayers?: string[];\n    activeLayers?: string[];\n    onMapLayerChange?: () => string;\n    layers?: JSX.Element[];\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapLayerSettings = (props: MapLayerSettingsProps) => {\n    const {\n        activeBuiltinLayers = [],\n        activeLayers = [],\n        layers = [],\n        onMapLayerChange = noop,\n        ...remainingProps\n    } = props;\n\n    const allActiveLayer = union(activeBuiltinLayers, activeLayers);\n\n    const hasLabels = !!layers.at(0)?.props.label;\n\n    const isActive = !isEmpty(allActiveLayer);\n\n    // Inject onMapLayerChange from the MapContext which will be handled\n    // in the main Map component.\n    const enrichedLayers = map(layers, layer =>\n        React.cloneElement(layer, {\n            key: layer?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,\n            activeBuiltinLayers,\n            onMapLayerChange,\n        })\n    );\n\n    return (\n        <MapSettingsTile\n            className='MapLayerSettings'\n            isActive={isActive}\n            activeIcon={\n                isActive ? (\n                    <MapIcon name='rioglyph-construction text-color-primary' className='MapLayerIcon' />\n                ) : undefined\n            }\n            inactiveIcon={\n                !isActive ? (\n                    <MapIcon name='rioglyph-construction text-color-gray' className='MapLayerIconInactive' />\n                ) : undefined\n            }\n            items={hasLabels ? enrichedLayers : undefined}\n            panel={!hasLabels && <MapSettingsPanel>{enrichedLayers}</MapSettingsPanel>}\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapLayerSettings;\n"],"names":["MapLayerSettings","props","activeBuiltinLayers","activeLayers","layers","onMapLayerChange","noop","remainingProps","allActiveLayer","union","hasLabels","isActive","isEmpty","enrichedLayers","map","layer","React","jsx","MapSettingsTile","MapIcon","MapSettingsPanel"],"mappings":";;;;;;;AAiBA,MAAMA,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,qBAAAC,IAAsB,CAAA;AAAA,IACtB,cAAAC,IAAe,CAAA;AAAA,IACf,QAAAC,IAAS,CAAA;AAAA,IACT,kBAAAC,IAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,IACHN,GAEEO,IAAiBC,EAAMP,GAAqBC,CAAY,GAExDO,IAAY,CAAC,CAACN,EAAO,GAAG,CAAC,GAAG,MAAM,OAElCO,IAAW,CAACC,EAAQJ,CAAc,GAIlCK,IAAiBC;AAAA,IAAIV;AAAA,IAAQ,CAAAW,MAC/BC,EAAM,aAAaD,GAAO;AAAA,MACtB,KAAKA,GAAO,OAAO,oBAAoB,OAAO,YAAY;AAAA,MAC1D,qBAAAb;AAAA,MACA,kBAAAG;AAAA,IAAA,CACH;AAAA,EAAA;AAGL,SACI,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,UAAAP;AAAA,MACA,YACIA,IACI,gBAAAM,EAACE,GAAA,EAAQ,MAAK,4CAA2C,WAAU,gBAAe,IAClF;AAAA,MAER,cACKR,IAEG,SADA,gBAAAM,EAACE,KAAQ,MAAK,yCAAwC,WAAU,uBAAA,CAAuB;AAAA,MAG/F,OAAOT,IAAYG,IAAiB;AAAA,MACpC,OAAO,CAACH,KAAa,gBAAAO,EAACG,KAAkB,UAAAP,GAAe;AAAA,MACtD,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"MapLayerSettings.js","names":[],"sources":["../../../../../../../src/components/map/components/features/settings/builtinSettings/MapLayerSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { isEmpty, map, union } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport MapSettingsPanel from '../MapSettingsPanel';\nimport MapSettingsTile from '../MapSettingsTile';\n\nimport { MapIcon } from '../../../../icons/MapIcon';\nimport type { MapLayer } from '../../../../utils/mapTypes';\n\ntype MapLayerElementProps = {\n    label?: React.ReactNode;\n    activeBuiltinLayers?: string[];\n    onMapLayerChange?: (layer: MapLayer) => void;\n    [key: string]: unknown;\n};\n\nexport type MapLayerSettingsProps = {\n    activeBuiltinLayers?: string[];\n    activeLayers?: string[];\n    onMapLayerChange?: (layer: MapLayer) => void;\n    layers?: React.ReactElement[];\n    tooltip?: string | React.ReactNode;\n};\n\nconst MapLayerSettings = (props: MapLayerSettingsProps) => {\n    const {\n        activeBuiltinLayers = [],\n        activeLayers = [],\n        layers = [],\n        onMapLayerChange = noop,\n        ...remainingProps\n    } = props;\n    const typedLayers = layers as React.ReactElement<MapLayerElementProps>[];\n\n    const allActiveLayer = union(activeBuiltinLayers, activeLayers);\n\n    const hasLabels = !!typedLayers.at(0)?.props.label;\n\n    const isActive = !isEmpty(allActiveLayer);\n\n    // Inject onMapLayerChange from the MapContext which will be handled\n    // in the main Map component.\n    const enrichedLayers = map(typedLayers, layer =>\n        React.cloneElement(layer, {\n            key: layer?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,\n            activeBuiltinLayers,\n            onMapLayerChange,\n        })\n    );\n\n    return (\n        <MapSettingsTile\n            className='MapLayerSettings'\n            isActive={isActive}\n            activeIcon={\n                isActive ? <MapIcon name='icon-construction text-color-primary' className='MapLayerIcon' /> : undefined\n            }\n            inactiveIcon={\n                !isActive ? (\n                    <MapIcon name='icon-construction text-color-gray' className='MapLayerIconInactive' />\n                ) : undefined\n            }\n            items={hasLabels ? enrichedLayers : undefined}\n            panel={!hasLabels && <MapSettingsPanel>{enrichedLayers}</MapSettingsPanel>}\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapLayerSettings;\n"],"mappings":";;;;;;;;AAyBA,IAAM,KAAoB,MAAiC;CACvD,IAAM,EACF,yBAAsB,CAAC,GACvB,kBAAe,CAAC,GAChB,YAAS,CAAC,GACV,sBAAmB,GACnB,GAAG,MACH,GACE,IAAc,GAEd,IAAiB,EAAM,GAAqB,CAAY,GAExD,IAAY,CAAC,CAAC,EAAY,GAAG,CAAC,CAAC,EAAE,MAAM,OAEvC,IAAW,CAAC,EAAQ,CAAc,GAIlC,IAAiB,EAAI,IAAa,MACpC,EAAM,aAAa,GAAO;EACtB,KAAK,GAAO,OAAO,oBAAoB,OAAO,WAAW;EACzD;EACA;CACJ,CAAC,CACL;CAEA,OACI,kBAAC,GAAD;EACI,WAAU;EACA;EACV,YACI,IAAW,kBAAC,GAAD;GAAS,MAAK;GAAuC,WAAU;EAAgB,CAAA,IAAI,KAAA;EAElG,cACK,IAEG,KAAA,IADA,kBAAC,GAAD;GAAS,MAAK;GAAoC,WAAU;EAAwB,CAAA;EAG5F,OAAO,IAAY,IAAiB,KAAA;EACpC,OAAO,CAAC,KAAa,kBAAC,GAAD,EAAA,UAAmB,EAAiC,CAAA;EACzE,GAAI;CACP,CAAA;AAET"}

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -23,23 +23,23 @@ export type MapTypeSettingsProps = {
     /**
      * Custom label for the default map type entry.
      */
-    defaultTypeLabel?: string | JSX.Element;
+    defaultTypeLabel?: string | React.ReactElement;
     /**
      * Custom label for the truck/fleet-style map type entry.
      */
-    truckTypeLabel?: string | JSX.Element;
+    truckTypeLabel?: string | React.ReactElement;
     /**
      * Custom label for the terrain map type entry.
      */
-    terrainTypeLabel?: string | JSX.Element;
+    terrainTypeLabel?: string | React.ReactElement;
     /**
      * Custom label for the satellite map type entry.
      */
-    satelliteTypeLabel?: string | JSX.Element;
+    satelliteTypeLabel?: string | React.ReactElement;
     /**
      * Custom label for the night map type entry.
      */
-    nightTypeLabel?: string | JSX.Element;
+    nightTypeLabel?: string | React.ReactElement;
     /**
      * Tooltip content shown for the map type settings trigger.
      */
@@ -47,7 +47,7 @@ export type MapTypeSettingsProps = {
     /**
      * Optional dropdown header text shown above labeled map type entries.
      */
-    dropdownHeaderText?: string | JSX.Element;
+    dropdownHeaderText?: string | React.ReactElement;
 };
 declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapTypeSettings;