@open-pioneer/experimental-layout-sidebar 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @open-pioneer/experimental-layout-sidebar
 
+## 0.2.0
+
+### Minor Changes
+
+-   ee7c2d4: Update runtime version.
+
+## 0.1.3
+
+### Patch Changes
+
+-   23564f3: Use released versions of core packages and build tools
+
 ## 0.1.2
 
 ### Patch Changes

package/README.md

@@ -39,4 +39,4 @@ const items: SidebarItem[] = [
 
 ## License
 
-[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)
+Apache-2.0 (see `LICENSE` file)

package/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["Sidebar.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: con terra GmbH and contributors\n// SPDX-License-Identifier: Apache-2.0\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@chakra-ui/icons\";\nimport {\n    Box,\n    Button,\n    CloseButton,\n    Flex,\n    IconButton,\n    Spacer,\n    Tooltip,\n    useDisclosure\n} from \"@open-pioneer/chakra-integration\";\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 corrensponding 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 { isOpen: isMainToggled, onToggle: toggleMain } = useDisclosure({\n        defaultIsOpen: 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 { isOpen: 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                        leftIcon={item.icon}\n                        variant={variant}\n                        colorScheme={color}\n                        onClick={() => toggleItem(item)}\n                    >\n                        {item.label}\n                    </Button>\n                ) : (\n                    <Tooltip key={item.id} hasArrow label={item.label} placement=\"right\">\n                        <IconButton\n                            aria-label={item.label}\n                            variant={variant}\n                            colorScheme={color}\n                            icon={item.icon}\n                            onClick={() => toggleItem(item)}\n                        />\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 label={toggleButtonLabel} hasArrow placement=\"right\">\n                    <IconButton\n                        aria-label={toggleButtonLabel}\n                        variant=\"ghost\"\n                        icon={!isMainToggled ? <ArrowRightIcon /> : <ArrowLeftIcon />}\n                        onClick={toggleMain}\n                    />\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 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@chakra-ui/icons\";\nimport {\n    Box,\n    Button,\n    CloseButton,\n    Flex,\n    IconButton,\n    Spacer,\n    Tooltip,\n    useDisclosure\n} from \"@open-pioneer/chakra-integration\";\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 corrensponding 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 { isOpen: isMainToggled, onToggle: toggleMain } = useDisclosure({\n        defaultIsOpen: 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 { isOpen: 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                        leftIcon={item.icon}\n                        variant={variant}\n                        colorScheme={color}\n                        onClick={() => toggleItem(item)}\n                    >\n                        {item.label}\n                    </Button>\n                ) : (\n                    <Tooltip key={item.id} hasArrow label={item.label} placement=\"right\">\n                        <IconButton\n                            aria-label={item.label}\n                            variant={variant}\n                            colorScheme={color}\n                            icon={item.icon}\n                            onClick={() => toggleItem(item)}\n                        />\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 label={toggleButtonLabel} hasArrow placement=\"right\">\n                    <IconButton\n                        aria-label={toggleButtonLabel}\n                        variant=\"ghost\"\n                        icon={!isMainToggled ? <ArrowRightIcon /> : <ArrowLeftIcon />}\n                        onClick={toggleMain}\n                    />\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,15 +1,15 @@
 {
   "type": "module",
   "name": "@open-pioneer/experimental-layout-sidebar",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@chakra-ui/icons": "^2.0.19",
-    "@chakra-ui/system": "^2.5.7",
-    "@emotion/react": "^11.11.0",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/system": "^2.6.2",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@open-pioneer/chakra-integration": "^0.1.3",
-    "@open-pioneer/runtime": "^0.1.4",
+    "@open-pioneer/chakra-integration": "^1.1.1",
+    "@open-pioneer/runtime": "^2.1.0",
     "react": "^18.2.0"
   },
   "exports": {