npm - @open-pioneer/experimental-layout-sidebar - Versions diffs - 0.10.0 → 0.11.0-dev.20250515143825 - Mend

@open-pioneer/experimental-layout-sidebar 0.10.0 → 0.11.0-dev.20250515143825

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @open-pioneer/experimental-layout-sidebar
+## 0.11.0-dev.20250515143825
+### Minor Changes
+- 738390e: Update to Chakra v3
 ## 0.10.0
 ### Patch Changes

package/Sidebar.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ArrowRightIcon, ArrowLeftIcon } from '@chakra-ui/icons';
-import { useDisclosure, Button, Tooltip, IconButton, Flex, Box, Spacer, CloseButton } from '@open-pioneer/chakra-integration';
+import { FiChevronsRight, FiChevronsLeft } from 'react-icons/fi';
+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';
 import { useEffect, useReducer, useCallback } from 'react';
@@ -15,8 +16,8 @@ function Sidebar({
 }) {
   const intl = useIntl();
   const [selectedItems, { toggle: toggleItem }] = useSelection(items);
-  const { isOpen: isMainToggled, onToggle: toggleMain } = useDisclosure({
-    defaultIsOpen: defaultExpanded,
+  const { open: isMainToggled, onToggle: toggleMain } = useDisclosure({
+    defaultOpen: defaultExpanded,
     onOpen() {
       expandedChanged?.(true);
     },
@@ -24,7 +25,7 @@ function Sidebar({
       expandedChanged?.(false);
     }
   });
-  const { isOpen: isContentToggled, onToggle: toggleContent } = useDisclosure();
+  const { open: isContentToggled, onToggle: toggleContent } = useDisclosure();
   const hasSelectedItems = selectedItems.size > 0;
   useEffect(() => {
     if (hasSelectedItems && !isContentToggled) {
@@ -49,26 +50,37 @@ function Sidebar({
   const sidebarButtons = items?.map((item, idx) => {
     const color = "white";
     const variant = selectedItems.has(item.id) ? "outline" : "ghost";
-    return /* @__PURE__ */ jsx("div", { children: isMainToggled ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { children: isMainToggled ? /* @__PURE__ */ jsxs(
       Button,
       {
-        leftIcon: item.icon,
         variant,
         colorScheme: color,
         onClick: () => toggleItem(item),
-        children: item.label
+        children: [
+          item.icon,
+          item.label
+        ]
       },
       item.id
-    ) : /* @__PURE__ */ jsx(Tooltip, { hasArrow: true, label: item.label, placement: "right", children: /* @__PURE__ */ jsx(
-      IconButton,
+    ) : /* @__PURE__ */ jsx(
+      Tooltip,
       {
-        "aria-label": item.label,
-        variant,
-        colorScheme: color,
-        icon: item.icon,
-        onClick: () => toggleItem(item)
-      }
-    ) }, item.id) }, idx);
+        showArrow: true,
+        content: item.label,
+        positioning: { placement: "right" },
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": item.label,
+            variant,
+            colorScheme: color,
+            onClick: () => toggleItem(item),
+            children: item.icon
+          }
+        )
+      },
+      item.id
+    ) }, idx);
   });
   const content = items?.filter((item) => selectedItems.has(item.id)).map((item) => {
     return /* @__PURE__ */ jsxs("div", { className: "content-section", children: [
@@ -96,15 +108,15 @@ function Sidebar({
         children: [
           sidebarButtons,
           /* @__PURE__ */ jsx(Spacer, {}),
-          /* @__PURE__ */ jsx(Tooltip, { label: toggleButtonLabel, hasArrow: true, placement: "right", children: /* @__PURE__ */ jsx(
-            IconButton,
+          /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              "aria-label": toggleButtonLabel,
-              variant: "ghost",
-              icon: !isMainToggled ? /* @__PURE__ */ jsx(ArrowRightIcon, {}) : /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
-              onClick: toggleMain
+              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, {}) })
             }
-          ) })
+          )
         ]
       }
     ),

package/Sidebar.js.map CHANGED Viewed

	@@ -1 +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 { 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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"}
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 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 { 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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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/experimental-layout-sidebar",
-  "version": "0.10.0",
+  "version": "0.11.0-dev.20250515143825",
   "keywords": [
     "open-pioneer-trails"
   ],
@@ -13,12 +13,13 @@
     "directory": "src/experimental-packages/layout-sidebar"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.2.4",
-    "@emotion/react": "^11.13.3",
+    "@chakra-ui/react": "^3.17.0",
+    "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@open-pioneer/chakra-integration": "^3.1.0",
-    "@open-pioneer/runtime": "^3.1.0",
-    "react": "^19.1.0"
+    "@open-pioneer/runtime": "4.0.0-dev.20250512105016",
+    "@open-pioneer/chakra-snippets": "4.0.0-dev.20250512105016",
+    "react": "^19.1.0",
+    "react-icons": "^5.3.0"
   },
   "exports": {
     "./package.json": "./package.json",

package/styles.css CHANGED Viewed

@@ -2,16 +2,11 @@
   height: 100%;
   position: absolute;
   top: 0;
-}
-.layout-sidebar[data-theme=light] {
-  background-color: var(--chakra-colors-whiteAlpha-700);
-}
-.layout-sidebar[data-theme=dark] {
-  background-color: var(--chakra-colors-blackAlpha-700);
+  background-color: rgba(255, 255, 255, 0.7);
 }
 .layout-sidebar .layout-sidebar-main {
   transition: width 300ms ease-out 0s;
-  border-right: 1px solid var(--chakra-colors-chakra-border-color);
+  border-right: 1px solid var(--chakra-colors-border-emphasized);
 }
 .layout-sidebar .layout-sidebar-content {
   overflow: auto;
@@ -19,7 +14,7 @@
 }
 .layout-sidebar .layout-sidebar-content .content-section .content-header {
   font-size: 1.5em;
-  background-color: var(--chakra-colors-blackAlpha-500);
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 0.5rem 1rem;
 }
 .layout-sidebar .layout-sidebar-content .content-section .content-body {

package/styles.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["styles.scss"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,MAAA;~~AACJ;AACI;EACI~~,~~qDAAA~~;~~AACR~~;~~AACI;EACI,qDAAA;AACR;~~AAEI;EACI,mCAAA;EACA,~~gEAAA~~;AAAR;AAGI;EACI,cAAA;EACA,mCAAA;AADR;AAIY;EACI,gBAAA;EACA,~~qDAAA~~;EACA,oBAAA;AAFhB;AAKY;EACI,aAAA;AAHhB","file":"styles.css","sourcesContent":[".layout-sidebar {\n height: 100%;\n position: absolute;\n top: 0;\n\n ~~&[data-theme=\"light\"] {\n~~ background-color: ~~var~~(~~--chakra-colors-whiteAlpha-700);\n }\n &[data-theme=\"dark\"]~~ ~~{\n background-color:~~ ~~var(--chakra-colors-blackAlpha-700~~);\n }\n\n .layout-sidebar-main {\n transition: width 300ms ease-out 0s;\n border-right: 1px solid var(--chakra-colors-~~chakra-~~border-~~color~~);\n }\n\n .layout-sidebar-content {\n overflow: auto;\n transition: width 300ms ease-out 0s;\n\n .content-section {\n .content-header {\n font-size: 1.5em;\n background-color: ~~var~~(~~--chakra-colors-blackAlpha-500~~);\n padding: 0.5rem 1rem;\n }\n\n .content-body {\n padding: 1rem;\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sources":["styles.scss"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,MAAA;EAEA,0CAAA;AAAJ;AAEI;EACI,mCAAA;EACA,8DAAA;AAAR;AAGI;EACI,cAAA;EACA,mCAAA;AADR;AAIY;EACI,gBAAA;EACA,oCAAA;EACA,oBAAA;AAFhB;AAKY;EACI,aAAA;AAHhB","file":"styles.css","sourcesContent":[".layout-sidebar {\n height: 100%;\n position: absolute;\n top: 0;\n\n background-color: rgba(255, 255, 255, 0.7);\n\n .layout-sidebar-main {\n transition: width 300ms ease-out 0s;\n border-right: 1px solid var(--chakra-colors-border-emphasized);\n }\n\n .layout-sidebar-content {\n overflow: auto;\n transition: width 300ms ease-out 0s;\n\n .content-section {\n .content-header {\n font-size: 1.5em;\n background-color: rgba(0, 0, 0, 0.4);\n padding: 0.5rem 1rem;\n }\n\n .content-body {\n padding: 1rem;\n }\n }\n }\n}\n"]}