@open-pioneer/experimental-layout-sidebar 0.11.0 → 0.12.0-dev.20250725080856

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @open-pioneer/experimental-layout-sidebar
 
+## 0.12.0-dev.20250725080856
+
+### Minor Changes
+
+- 2732052: Icons have been changed to unify the appearance of the components. Preferably, Lucide react-icons are used.
+
+### Patch Changes
+
+- 10d2fe7: Update dependencies
+- da6a410: Update dependencies
+
 ## 0.11.0
 
 ### Minor Changes
@@ -26,7 +37,6 @@
 ### Minor Changes
 
 - 2fa8020: Update trails core package dependencies.
-
     - Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
     - Removes any obsolete references to `@chakra-ui/system`.
       This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.

package/Sidebar.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { FiChevronsRight, FiChevronsLeft } from 'react-icons/fi';
+import { LuChevronsRight, LuChevronsLeft } from 'react-icons/lu';
 import { useDisclosure, Button, IconButton, Flex, Box, Spacer, CloseButton } from '@chakra-ui/react';
 import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
@@ -114,7 +114,7 @@ function Sidebar({
               content: toggleButtonLabel,
               showArrow: true,
               positioning: { placement: "right" },
-              children: /* @__PURE__ */ jsx(IconButton, { "aria-label": toggleButtonLabel, variant: "ghost", onClick: toggleMain, children: !isMainToggled ? /* @__PURE__ */ jsx(FiChevronsRight, {}) : /* @__PURE__ */ jsx(FiChevronsLeft, {}) })
+              children: /* @__PURE__ */ jsx(IconButton, { "aria-label": toggleButtonLabel, variant: "ghost", onClick: toggleMain, children: !isMainToggled ? /* @__PURE__ */ jsx(LuChevronsRight, {}) : /* @__PURE__ */ jsx(LuChevronsLeft, {}) })
             }
           )
         ]

package/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["Sidebar.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { FiChevronsLeft, FiChevronsRight } from \"react-icons/fi\";\nimport {\n    Box,\n    Button,\n    CloseButton,\n    Flex,\n    IconButton,\n    Spacer,\n    useDisclosure\n} from \"@chakra-ui/react\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback } from \"react\";\nimport { ReactElement, ReactNode, useEffect, useReducer } from \"react\";\n\nexport interface SidebarItem {\n    /**\n     * Unique identifier\n     */\n    id: string;\n    /**\n     * Element which is shown in the sidebar menu as icon\n     */\n    icon: ReactElement;\n    /**\n     * Label in the menu entry\n     */\n    label: string;\n    /**\n     * Corresponding content to the sidebar entry\n     */\n    content: ReactNode;\n}\n\n/**\n * Sidebar configuration\n */\nexport interface SidebarProperties {\n    /**\n     * Defines if the sidebar initially is expanded\n     */\n    defaultExpanded?: boolean;\n    /**\n     * Event which is triggered when the main section is expanded/collapsed.\n     */\n    expandedChanged?: (expanded: boolean) => void;\n    /**\n     * Event which is triggered when sidebar width is changed and returns the new width.\n     */\n    sidebarWidthChanged?: (width: number) => void;\n    /**\n     * The visible menu entries and their corresponding content.\n     */\n    items?: SidebarItem[];\n}\n\nconst mainSidebarWidthCollapsed = 60;\nconst mainSidebarWidthExpanded = 180;\nconst contentSidebarWidth = 300;\n\nexport function Sidebar({\n    defaultExpanded,\n    expandedChanged,\n    sidebarWidthChanged,\n    items\n}: SidebarProperties) {\n    const intl = useIntl();\n    const [selectedItems, { toggle: toggleItem }] = useSelection(items);\n\n    // Handles the main section (buttons to open widgets).\n    const { open: isMainToggled, onToggle: toggleMain } = useDisclosure({\n        defaultOpen: defaultExpanded,\n        onOpen() {\n            expandedChanged?.(true);\n        },\n        onClose() {\n            expandedChanged?.(false);\n        }\n    });\n\n    // Handles the content section (contents of open widgets).\n    const { open: isContentToggled, onToggle: toggleContent } = useDisclosure();\n    const hasSelectedItems = selectedItems.size > 0;\n    useEffect(() => {\n        if (hasSelectedItems && !isContentToggled) {\n            toggleContent();\n        }\n        if (!hasSelectedItems && isContentToggled) {\n            toggleContent();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [hasSelectedItems]);\n\n    // Handle sidebar width and propagate changes\n    useEffect(() => {\n        if (sidebarWidthChanged) {\n            let width = mainSidebarWidthCollapsed;\n            if (isMainToggled) {\n                width = mainSidebarWidthExpanded;\n            }\n            if (isContentToggled) {\n                width += contentSidebarWidth;\n            }\n            sidebarWidthChanged(width);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMainToggled, isContentToggled]);\n\n    // Render one button for every sidebar item.\n    const sidebarButtons = items?.map((item, idx) => {\n        const color = \"white\";\n        const variant = selectedItems.has(item.id) ? \"outline\" : \"ghost\";\n        return (\n            <div key={idx}>\n                {isMainToggled ? (\n                    <Button\n                        key={item.id}\n                        variant={variant}\n                        colorScheme={color}\n                        onClick={() => toggleItem(item)}\n                    >\n                        {item.icon}\n                        {item.label}\n                    </Button>\n                ) : (\n                    <Tooltip\n                        key={item.id}\n                        showArrow={true}\n                        content={item.label}\n                        positioning={{ placement: \"right\" }}\n                    >\n                        <IconButton\n                            aria-label={item.label}\n                            variant={variant}\n                            colorScheme={color}\n                            onClick={() => toggleItem(item)}\n                        >\n                            {item.icon}\n                        </IconButton>\n                    </Tooltip>\n                )}\n            </div>\n        );\n    });\n\n    // Render the content of selected items in the same order as their buttons.\n    const content = items\n        ?.filter((item) => selectedItems.has(item.id))\n        .map((item) => {\n            return (\n                <div className=\"content-section\" key={item.id}>\n                    <Flex className=\"content-header\" alignItems=\"center\">\n                        <Box>{item.label}</Box>\n                        <Spacer></Spacer>\n                        <CloseButton onClick={() => toggleItem(item)} />\n                    </Flex>\n                    <div className=\"content-body\">{item.content}</div>\n                </div>\n            );\n        });\n\n    const toggleButtonLabel = intl.formatMessage({\n        id: isMainToggled ? \"toggle.collapse\" : \"toggle.expand\"\n    });\n    return (\n        <Flex className=\"layout-sidebar\">\n            <Box\n                className=\"layout-sidebar-main\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                width={\n                    !isMainToggled\n                        ? `${mainSidebarWidthCollapsed}px`\n                        : `${mainSidebarWidthExpanded}px`\n                }\n                padding=\"10px\"\n                gap=\"10px\"\n            >\n                {sidebarButtons}\n                <Spacer></Spacer>\n                <Tooltip\n                    content={toggleButtonLabel}\n                    showArrow={true}\n                    positioning={{ placement: \"right\" }}\n                >\n                    <IconButton aria-label={toggleButtonLabel} variant=\"ghost\" onClick={toggleMain}>\n                        {!isMainToggled ? <FiChevronsRight /> : <FiChevronsLeft />}\n                    </IconButton>\n                </Tooltip>\n            </Box>\n            <Box\n                className=\"layout-sidebar-content\"\n                width={!isContentToggled ? `${0}px` : `${contentSidebarWidth}px`}\n            >\n                {content}\n            </Box>\n        </Flex>\n    );\n}\n\n/**\n * React hook that keeps track of a selection by storing the `id` of selected items.\n */\nfunction useSelection<Item extends { id: string }>(\n    items: Item[] | undefined\n): [ReadonlySet<string>, { toggle(item: Item): void }] {\n    type Action = { type: \"toggle\"; id: string } | { type: \"retain\"; ids: string[] };\n\n    const [selected, dispatch] = useReducer(\n        (state: Set<string>, action: Action) => {\n            switch (action.type) {\n                case \"toggle\": {\n                    const newState = new Set(state);\n                    if (newState.has(action.id)) {\n                        newState.delete(action.id);\n                    } else {\n                        newState.add(action.id);\n                    }\n                    return newState;\n                }\n                case \"retain\": {\n                    const allIds = new Set(action.ids);\n                    const newState = new Set(state);\n                    for (const id of newState) {\n                        if (!allIds.has(id)) {\n                            newState.delete(id);\n                        }\n                    }\n                    return newState;\n                }\n            }\n        },\n        undefined,\n        () => new Set<string>()\n    );\n    const toggle = useCallback(\n        (item: Item) => {\n            dispatch({ type: \"toggle\", id: item.id });\n        },\n        [dispatch]\n    );\n\n    // Reset outdated ids if items change.\n    useEffect(() => {\n        dispatch({ type: \"retain\", ids: items?.map((item) => item.id) ?? [] });\n    }, [items, dispatch]);\n\n    return [selected, { toggle }];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["Sidebar.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { LuChevronsLeft, LuChevronsRight } from \"react-icons/lu\";\nimport {\n    Box,\n    Button,\n    CloseButton,\n    Flex,\n    IconButton,\n    Spacer,\n    useDisclosure\n} from \"@chakra-ui/react\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback } from \"react\";\nimport { ReactElement, ReactNode, useEffect, useReducer } from \"react\";\n\nexport interface SidebarItem {\n    /**\n     * Unique identifier\n     */\n    id: string;\n    /**\n     * Element which is shown in the sidebar menu as icon\n     */\n    icon: ReactElement;\n    /**\n     * Label in the menu entry\n     */\n    label: string;\n    /**\n     * Corresponding content to the sidebar entry\n     */\n    content: ReactNode;\n}\n\n/**\n * Sidebar configuration\n */\nexport interface SidebarProperties {\n    /**\n     * Defines if the sidebar initially is expanded\n     */\n    defaultExpanded?: boolean;\n    /**\n     * Event which is triggered when the main section is expanded/collapsed.\n     */\n    expandedChanged?: (expanded: boolean) => void;\n    /**\n     * Event which is triggered when sidebar width is changed and returns the new width.\n     */\n    sidebarWidthChanged?: (width: number) => void;\n    /**\n     * The visible menu entries and their corresponding content.\n     */\n    items?: SidebarItem[];\n}\n\nconst mainSidebarWidthCollapsed = 60;\nconst mainSidebarWidthExpanded = 180;\nconst contentSidebarWidth = 300;\n\nexport function Sidebar({\n    defaultExpanded,\n    expandedChanged,\n    sidebarWidthChanged,\n    items\n}: SidebarProperties) {\n    const intl = useIntl();\n    const [selectedItems, { toggle: toggleItem }] = useSelection(items);\n\n    // Handles the main section (buttons to open widgets).\n    const { open: isMainToggled, onToggle: toggleMain } = useDisclosure({\n        defaultOpen: defaultExpanded,\n        onOpen() {\n            expandedChanged?.(true);\n        },\n        onClose() {\n            expandedChanged?.(false);\n        }\n    });\n\n    // Handles the content section (contents of open widgets).\n    const { open: isContentToggled, onToggle: toggleContent } = useDisclosure();\n    const hasSelectedItems = selectedItems.size > 0;\n    useEffect(() => {\n        if (hasSelectedItems && !isContentToggled) {\n            toggleContent();\n        }\n        if (!hasSelectedItems && isContentToggled) {\n            toggleContent();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [hasSelectedItems]);\n\n    // Handle sidebar width and propagate changes\n    useEffect(() => {\n        if (sidebarWidthChanged) {\n            let width = mainSidebarWidthCollapsed;\n            if (isMainToggled) {\n                width = mainSidebarWidthExpanded;\n            }\n            if (isContentToggled) {\n                width += contentSidebarWidth;\n            }\n            sidebarWidthChanged(width);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMainToggled, isContentToggled]);\n\n    // Render one button for every sidebar item.\n    const sidebarButtons = items?.map((item, idx) => {\n        const color = \"white\";\n        const variant = selectedItems.has(item.id) ? \"outline\" : \"ghost\";\n        return (\n            <div key={idx}>\n                {isMainToggled ? (\n                    <Button\n                        key={item.id}\n                        variant={variant}\n                        colorScheme={color}\n                        onClick={() => toggleItem(item)}\n                    >\n                        {item.icon}\n                        {item.label}\n                    </Button>\n                ) : (\n                    <Tooltip\n                        key={item.id}\n                        showArrow={true}\n                        content={item.label}\n                        positioning={{ placement: \"right\" }}\n                    >\n                        <IconButton\n                            aria-label={item.label}\n                            variant={variant}\n                            colorScheme={color}\n                            onClick={() => toggleItem(item)}\n                        >\n                            {item.icon}\n                        </IconButton>\n                    </Tooltip>\n                )}\n            </div>\n        );\n    });\n\n    // Render the content of selected items in the same order as their buttons.\n    const content = items\n        ?.filter((item) => selectedItems.has(item.id))\n        .map((item) => {\n            return (\n                <div className=\"content-section\" key={item.id}>\n                    <Flex className=\"content-header\" alignItems=\"center\">\n                        <Box>{item.label}</Box>\n                        <Spacer></Spacer>\n                        <CloseButton onClick={() => toggleItem(item)} />\n                    </Flex>\n                    <div className=\"content-body\">{item.content}</div>\n                </div>\n            );\n        });\n\n    const toggleButtonLabel = intl.formatMessage({\n        id: isMainToggled ? \"toggle.collapse\" : \"toggle.expand\"\n    });\n    return (\n        <Flex className=\"layout-sidebar\">\n            <Box\n                className=\"layout-sidebar-main\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                width={\n                    !isMainToggled\n                        ? `${mainSidebarWidthCollapsed}px`\n                        : `${mainSidebarWidthExpanded}px`\n                }\n                padding=\"10px\"\n                gap=\"10px\"\n            >\n                {sidebarButtons}\n                <Spacer></Spacer>\n                <Tooltip\n                    content={toggleButtonLabel}\n                    showArrow={true}\n                    positioning={{ placement: \"right\" }}\n                >\n                    <IconButton aria-label={toggleButtonLabel} variant=\"ghost\" onClick={toggleMain}>\n                        {!isMainToggled ? <LuChevronsRight /> : <LuChevronsLeft />}\n                    </IconButton>\n                </Tooltip>\n            </Box>\n            <Box\n                className=\"layout-sidebar-content\"\n                width={!isContentToggled ? `${0}px` : `${contentSidebarWidth}px`}\n            >\n                {content}\n            </Box>\n        </Flex>\n    );\n}\n\n/**\n * React hook that keeps track of a selection by storing the `id` of selected items.\n */\nfunction useSelection<Item extends { id: string }>(\n    items: Item[] | undefined\n): [ReadonlySet<string>, { toggle(item: Item): void }] {\n    type Action = { type: \"toggle\"; id: string } | { type: \"retain\"; ids: string[] };\n\n    const [selected, dispatch] = useReducer(\n        (state: Set<string>, action: Action) => {\n            switch (action.type) {\n                case \"toggle\": {\n                    const newState = new Set(state);\n                    if (newState.has(action.id)) {\n                        newState.delete(action.id);\n                    } else {\n                        newState.add(action.id);\n                    }\n                    return newState;\n                }\n                case \"retain\": {\n                    const allIds = new Set(action.ids);\n                    const newState = new Set(state);\n                    for (const id of newState) {\n                        if (!allIds.has(id)) {\n                            newState.delete(id);\n                        }\n                    }\n                    return newState;\n                }\n            }\n        },\n        undefined,\n        () => new Set<string>()\n    );\n    const toggle = useCallback(\n        (item: Item) => {\n            dispatch({ type: \"toggle\", id: item.id });\n        },\n        [dispatch]\n    );\n\n    // Reset outdated ids if items change.\n    useEffect(() => {\n        dispatch({ type: \"retain\", ids: items?.map((item) => item.id) ?? [] });\n    }, [items, dispatch]);\n\n    return [selected, { toggle }];\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/experimental-layout-sidebar",
-  "version": "0.11.0",
+  "version": "0.12.0-dev.20250725080856",
   "keywords": [
     "open-pioneer-trails"
   ],
@@ -13,9 +13,9 @@
     "directory": "src/experimental-packages/layout-sidebar"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.19.2",
+    "@chakra-ui/react": "^3.21.1",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@open-pioneer/runtime": "^4.0.0",
     "@open-pioneer/chakra-snippets": "^4.0.0",
     "react": "^19.1.0",