orcs-design-system 3.3.21 → 3.3.23

package/es/components/ActionsMenu/index.js

@@ -144,7 +144,6 @@ export const ActionsMenuBody = _ref2 => {
   const triggerRef = useMergeRefs([actionMenu.refs.setReference, childrenRef]);
   const ref = useMergeRefs([actionMenu.refs.setFloating]);
   const triggerProps = useMemo(() => ({
-    ariaLabel,
     "aria-label": ariaLabel,
     onFocus: onTriggerFocus,
     id,
@@ -289,7 +288,7 @@ ActionsMenu.propTypes = {
   /** Specifies the colour theme */
   theme: PropTypes.object,
   /** Specifies the aria-label for the button */
-  ariaLabel: PropTypes.object
+  ariaLabel: PropTypes.string
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -393,7 +392,7 @@ ActionsMenu.__docgenInfo = {
     "ariaLabel": {
       "description": "Specifies the aria-label for the button",
       "type": {
-        "name": "object"
+        "name": "string"
       },
       "required": false
     }

package/es/components/FloatingPanels/FloatingPanels.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
 import FloatingPanels from ".";
-import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
+import Box from "../Box";
 import TextInput from "../TextInput";
 import Toggle from "../Toggle";
 import Spacer from "../Spacer";
@@ -14,95 +14,263 @@ export default {
   title: "Components/FloatingPanels",
   component: FloatingPanels
 };
-const Properties = () => {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Spacer, {
-      mb: "r",
-      children: [/*#__PURE__*/_jsx(Badge, {
-        variant: "secondary",
-        children: "Blah"
-      }), /*#__PURE__*/_jsx(P, {
-        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      }), /*#__PURE__*/_jsx(Toggle, {
-        id: "toggle1",
-        label: "Group items",
-        small: true
-      }), /*#__PURE__*/_jsx(Toggle, {
-        id: "toggle2",
-        label: "Show teams",
-        small: true
-      })]
-    }), /*#__PURE__*/_jsx(TextInput, {
-      id: "textInput1",
-      type: "text",
-      label: "Full name",
-      placeholder: "E.g. John Smith",
-      my: "20px"
-    }, "textInput1")]
-  });
-};
-const createPanels = function () {
-  let shouldUseAsControl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-  const panels = [{
-    id: "view-options",
-    iconName: "eye",
-    title: "View Options",
-    expanded: true,
-    content: /*#__PURE__*/_jsx(Properties, {})
-  }, {
-    id: "properties",
-    iconName: "sun",
-    title: "Properties",
-    content: /*#__PURE__*/_jsx(Properties, {})
-  }, {
-    id: "person-details",
-    iconName: "user",
-    title: "Person Details",
-    content: /*#__PURE__*/_jsx(Properties, {})
-  }];
-  if (shouldUseAsControl) {
-    return panels;
-  }
-  return panels.map(panel => ({
-    ...panel,
-    expanded: panel.id === "person-details" ? true : false,
-    content: null,
-    stopToggling: panel.id === "view-options" ? false : true,
-    noActiveState: panel.id === "view-options" ? true : false
-  }));
-};
-export const defaultFloatingPanels = () => {
-  return /*#__PURE__*/_jsx(Box, {
-    minHeight: "600px",
-    children: /*#__PURE__*/_jsx(FloatingPanels, {
-      panels: createPanels(),
-      containerHeight: 500,
-      position: {
-        right: 20,
-        top: 20
-      }
-    })
-  });
-};
+const PanelContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsxs(Spacer, {
+    mb: "r",
+    children: [/*#__PURE__*/_jsx(Badge, {
+      variant: "secondary",
+      children: "Blah"
+    }), /*#__PURE__*/_jsx(P, {
+      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }), /*#__PURE__*/_jsx(Toggle, {
+      id: "toggle1",
+      label: "Group items",
+      small: true
+    }), /*#__PURE__*/_jsx(Toggle, {
+      id: "toggle2",
+      label: "Show teams",
+      small: true
+    })]
+  }), /*#__PURE__*/_jsx(TextInput, {
+    id: "textInput1",
+    type: "text",
+    label: "Full name",
+    placeholder: "E.g. John Smith",
+    my: "20px"
+  }, "textInput1")]
+});
+export const defaultFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
+  minHeight: "600px",
+  children: /*#__PURE__*/_jsx(FloatingPanels, {
+    containerHeight: "500px",
+    defaultSelectedPanelId: "view-options",
+    panels: [{
+      id: "view-options",
+      title: "View Options",
+      iconName: "eye",
+      content: /*#__PURE__*/_jsx(PanelContent, {})
+    }, {
+      id: "properties",
+      title: "Properties",
+      iconName: "sun",
+      content: /*#__PURE__*/_jsx(PanelContent, {})
+    }, {
+      id: "person-details",
+      title: "Person Details",
+      iconName: "user",
+      content: /*#__PURE__*/_jsx(PanelContent, {})
+    }]
+  })
+});
 defaultFloatingPanels.storyName = "Default Floating Panels";
-export const floatingActionsPanel = () => {
-  return /*#__PURE__*/_jsx(FloatingPanels, {
-    panels: createPanels(false),
+export const alignedFloatingPanels = () => /*#__PURE__*/_jsxs(Box, {
+  minHeight: "160px",
+  children: [/*#__PURE__*/_jsx(FloatingPanels, {
+    alignPanels: "left",
     position: {
-      bottom: 10
+      top: 0,
+      left: 0
     },
+    defaultSelectedPanelId: "view-options",
+    panels: [{
+      id: "view-options",
+      title: "View Options",
+      iconName: "eye",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "left"
+      })
+    }, {
+      id: "properties",
+      title: "Properties",
+      iconName: "sun",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "center"
+      })
+    }, {
+      id: "person-details",
+      title: "Person Details",
+      iconName: "user",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "right"
+      })
+    }]
+  }), /*#__PURE__*/_jsx(FloatingPanels, {
+    alignPanels: "center",
     centered: true,
-    onClick: panelId => alert(`Panel ${panelId} clicked`)
-  });
-};
-floatingActionsPanel.storyName = "Floating Panels as Controls";
+    defaultSelectedPanelId: "properties",
+    panels: [{
+      id: "view-options",
+      title: "View Options",
+      iconName: "eye",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "left"
+      })
+    }, {
+      id: "properties",
+      title: "Properties",
+      iconName: "sun",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "center"
+      })
+    }, {
+      id: "person-details",
+      title: "Person Details",
+      iconName: "user",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "right"
+      })
+    }]
+  }), /*#__PURE__*/_jsx(FloatingPanels, {
+    alignPanels: "right",
+    position: {
+      top: 0,
+      right: 0
+    },
+    defaultSelectedPanelId: "person-details",
+    panels: [{
+      id: "view-options",
+      title: "View Options",
+      iconName: "eye",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "left"
+      })
+    }, {
+      id: "properties",
+      title: "Properties",
+      iconName: "sun",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "center"
+      })
+    }, {
+      id: "person-details",
+      title: "Person Details",
+      iconName: "user",
+      content: /*#__PURE__*/_jsx("p", {
+        children: "right"
+      })
+    }]
+  })]
+});
+alignedFloatingPanels.storyName = "Aligned Floating Panels";
+export const buttonFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
+  minHeight: "60px",
+  children: /*#__PURE__*/_jsx(FloatingPanels, {
+    onClick: panelId => alert(`Panel ${panelId} clicked`),
+    panels: [{
+      id: "view-options",
+      title: "View Options",
+      iconName: "eye"
+    }, {
+      id: "properties",
+      title: "Properties",
+      iconName: "sun"
+    }, {
+      id: "person-details",
+      title: "Person Details",
+      iconName: "user"
+    }]
+  })
+});
+buttonFloatingPanels.storyName = "Button Floating Panels";
+export const unselectableFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
+  minHeight: "160px",
+  children: /*#__PURE__*/_jsx(FloatingPanels, {
+    disablePanelSelect: true,
+    defaultSelectedPanelId: "selected",
+    panels: [{
+      id: "selected",
+      title: "Selected",
+      iconName: "smile",
+      content: /*#__PURE__*/_jsxs("span", {
+        children: ["You cannot change this selection due to", " ", /*#__PURE__*/_jsx("code", {
+          children: "disablePanelSelect"
+        })]
+      })
+    }, {
+      id: "unselectable",
+      title: "Unselectable",
+      iconName: "frown",
+      content: "You cannot select this panel due to disablePanelSelect"
+    }]
+  })
+});
+unselectableFloatingPanels.storyName = "Unselectable Floating Panels";
+export const highlightedFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
+  minHeight: "60px",
+  children: /*#__PURE__*/_jsx(FloatingPanels, {
+    panels: [{
+      id: "1",
+      title: "Smiling",
+      iconName: "smile",
+      forceHighlight: true
+    }, {
+      id: "2",
+      title: "Frowning",
+      iconName: "frown",
+      forceHighlight: true
+    }, {
+      id: "3",
+      title: "Laughing",
+      iconName: "laugh",
+      forceHighlight: true
+    }]
+  })
+});
+highlightedFloatingPanels.storyName = "Highlighted Floating Panels";
+export const groupedFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
+  minHeight: "60px",
+  children: /*#__PURE__*/_jsx(FloatingPanels, {
+    panels: [{
+      id: "1",
+      title: "Laughing",
+      iconName: "user",
+      grouping: undefined
+    }, {
+      id: "1",
+      title: "Laughing",
+      iconName: "laugh",
+      grouping: "happy"
+    }, {
+      id: "2",
+      title: "Smiling",
+      iconName: "smile",
+      grouping: "happy"
+    }, {
+      id: "3",
+      title: "Frowning",
+      iconName: "frown",
+      grouping: "sad"
+    }]
+  })
+});
+groupedFloatingPanels.storyName = "Grouped Floating Panels";
 defaultFloatingPanels.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultFloatingPanels"
 };
-floatingActionsPanel.__docgenInfo = {
+alignedFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "alignedFloatingPanels"
+};
+buttonFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "buttonFloatingPanels"
+};
+unselectableFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "unselectableFloatingPanels"
+};
+highlightedFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "highlightedFloatingPanels"
+};
+groupedFloatingPanels.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "floatingActionsPanel"
+  "displayName": "groupedFloatingPanels"
 };

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -4,31 +4,44 @@ const panelWidth = "300px";
 export const ComponentContainer = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__ComponentContainer",
   componentId: "sc-1by914f-0"
-})(["z-index:", ";position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", " ", ""], _ref => {
+})(["z-index:", ";position:absolute;display:flex;flex-direction:column;align-items:", ";gap:8px;max-height:", ";", " ", ""], _ref => {
   let {
     zIndex
   } = _ref;
   return zIndex;
 }, _ref2 => {
   let {
-    containerHeight
+    alignPanels
   } = _ref2;
-  return containerHeight ? `${containerHeight}px` : "100%";
+  switch (alignPanels) {
+    case "left":
+      return "flex-start;";
+    case "center":
+      return "center;";
+    case "right":
+    default:
+      return "flex-end;";
+  }
 }, _ref3 => {
   let {
-    position
+    containerHeight
   } = _ref3;
-  return Object.entries(position).filter(_ref4 => {
-    let [, value] = _ref4;
+  return containerHeight;
+}, _ref4 => {
+  let {
+    position
+  } = _ref4;
+  return Object.entries(position).filter(_ref5 => {
+    let [, value] = _ref5;
     return value !== undefined;
-  }).map(_ref5 => {
-    let [key, value] = _ref5;
+  }).map(_ref6 => {
+    let [key, value] = _ref6;
     return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
   }).join("\n");
-}, _ref6 => {
+}, _ref7 => {
   let {
     centered
-  } = _ref6;
+  } = _ref7;
   return centered ? `
       margin-left: 50%;
       transform: translateX(-50%);
@@ -38,19 +51,19 @@ export const ComponentContainer = styled.div.withConfig({
 export const PanelContainer = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContainer",
   componentId: "sc-1by914f-1"
-})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref7 => {
+})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref8 => {
   let {
     containerHeight
-  } = _ref7;
-  return containerHeight ? `${containerHeight}px` : "100%";
+  } = _ref8;
+  return containerHeight;
 });
 export const PanelWrapper = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelWrapper",
   componentId: "sc-1by914f-2"
-})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _ref8 => {
+})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _ref9 => {
   let {
     isExpanded
-  } = _ref8;
+  } = _ref9;
   return isExpanded ? "block" : "none";
 }, panelWidth, themeGet("colors.greyLighter"));
 export const PanelHeader = styled.button.withConfig({
@@ -69,31 +82,36 @@ export const PanelBar = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelBar",
   componentId: "sc-1by914f-6"
 })(["display:flex;background:white;border:1px solid ", ";border-radius:", ";padding:2px;gap:2px;height:fit-content;box-shadow:0 0 1px 2px rgba(255,255,255,1);"], themeGet("colors.greyLighter"), themeGet("radii.2"));
+export const PanelBarDivider = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelBarDivider",
+  componentId: "sc-1by914f-7"
+})(["flex-grow:1;border-right:1px solid ", ";cursor:pointer;display:flex;margin:4px 2px;"], themeGet("colors.greyLighter"));
 export const IconButton = styled.button.withConfig({
   displayName: "FloatingPanelsstyles__IconButton",
-  componentId: "sc-1by914f-7"
-})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref9 => {
+  componentId: "sc-1by914f-8"
+})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref10 => {
   let {
-    isExpanded
-  } = _ref9;
-  return isExpanded ? themeGet("colors.primaryLightest") : themeGet("colors.white");
+    isExpanded,
+    forceHighlight
+  } = _ref10;
+  return isExpanded || forceHighlight ? themeGet("colors.primaryLightest") : themeGet("colors.white");
 }, themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"));
 export const PanelContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContent",
-  componentId: "sc-1by914f-8"
-})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref10 => {
+  componentId: "sc-1by914f-9"
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref11 => {
   let {
     isExpanded
-  } = _ref10;
+  } = _ref11;
   return isExpanded ? "block" : "none";
-}, _ref11 => {
+}, _ref12 => {
   let {
     isExpanded
-  } = _ref11;
+  } = _ref12;
   return isExpanded ? "100%" : "0";
-}, _ref12 => {
+}, _ref13 => {
   let {
     isExpanded
-  } = _ref12;
+  } = _ref13;
   return isExpanded ? "1" : "0";
 });

package/es/components/FloatingPanels/Panel.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
-import { PanelWrapper, PanelHeader, HeaderContent, Title, IconButton, PanelContent } from "./FloatingPanels.styles";
+import { PanelWrapper, PanelHeader, HeaderContent, Title, PanelContent, IconButton } from "./FloatingPanels.styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Panel = _ref => {
   let {
@@ -51,23 +51,20 @@ export const Panel = _ref => {
   });
 };
 Panel.propTypes = {
-  iconName: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  iconName: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
-  defaultExpanded: PropTypes.bool,
-  containerHeight: PropTypes.number,
+  containerHeight: PropTypes.string,
   isExpanded: PropTypes.bool.isRequired,
   toggleExpanded: PropTypes.func.isRequired
 };
-Panel.defaultProps = {
-  defaultExpanded: false
-};
 export const PanelBarIcon = _ref2 => {
   let {
     iconName,
     title,
     toggleExpanded,
-    isExpanded
+    isExpanded,
+    forceHighlight
   } = _ref2;
   return /*#__PURE__*/_jsx(Popover, {
     direction: "top",
@@ -77,6 +74,7 @@ export const PanelBarIcon = _ref2 => {
       "aria-label": title,
       onClick: toggleExpanded,
       isExpanded: isExpanded,
+      forceHighlight: forceHighlight,
       children: /*#__PURE__*/_jsx(Icon, {
         size: "s",
         color: "greyDarker",
@@ -89,32 +87,22 @@ PanelBarIcon.propTypes = {
   iconName: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   toggleExpanded: PropTypes.func.isRequired,
-  isExpanded: PropTypes.bool.isRequired
+  isExpanded: PropTypes.bool.isRequired,
+  forceHighlight: PropTypes.bool.isRequired
 };
 Panel.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Panel",
   "props": {
-    "defaultExpanded": {
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "iconName": {
+    "title": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": true
     },
-    "title": {
+    "iconName": {
       "description": "",
       "type": {
         "name": "string"
@@ -131,7 +119,7 @@ Panel.__docgenInfo = {
     "containerHeight": {
       "description": "",
       "type": {
-        "name": "number"
+        "name": "string"
       },
       "required": false
     },
@@ -183,6 +171,13 @@ PanelBarIcon.__docgenInfo = {
         "name": "bool"
       },
       "required": true
+    },
+    "forceHighlight": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
     }
   }
 };

package/es/components/FloatingPanels/index.js

@@ -1,57 +1,97 @@
-import React, { useState, useEffect } from "react";
-import { ComponentContainer, PanelContainer, PanelBar } from "./FloatingPanels.styles";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { ComponentContainer, PanelBar, PanelBarDivider, PanelContainer } from "./FloatingPanels.styles";
 import { Panel, PanelBarIcon } from "./Panel";
 import PropTypes from "prop-types";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FloatingPanels = _ref => {
   let {
     panels,
-    containerHeight,
+    containerHeight = "100%",
     position = {
-      right: 20,
-      top: 20
+      right: 0,
+      top: 0
     },
     centered = false,
+    alignPanels = "right",
     zIndex = 2,
+    disablePanelSelect = false,
+    defaultSelectedPanelId = null,
     onClick = () => {}
   } = _ref;
-  const [expandedPanelId, setExpandedPanelId] = useState(null);
+  const [selectedPanelId, setSelectedPanelId] = useState(defaultSelectedPanelId);
   useEffect(() => {
-    const expandedPanel = panels.find(panel => panel.expanded);
-    if (expandedPanel?.id && !expandedPanel.noActiveState) {
-      setExpandedPanelId(expandedPanel.id);
+    if (disablePanelSelect) {
+      return;
+    }
+    const selectedPanel = panels.find(panel => panel.selected);
+    if (selectedPanel?.id && !selectedPanel.noActiveState) {
+      setSelectedPanelId(selectedPanel.id);
     }
-  }, [panels]);
-  const togglePanel = panelId => {
+  }, [disablePanelSelect, panels]);
+  const togglePanel = useCallback(panelId => {
     const selectedPanel = panels.find(panel => panel.id === panelId);
-    if (selectedPanel?.stopToggling && expandedPanelId === panelId) {
+
+    // no panel?
+    if (!selectedPanel) {
       return;
     }
     onClick(panelId);
-    const selectedPanelId = expandedPanelId === panelId ? null : panelId;
-    if (!selectedPanel.noActiveState) {
-      setExpandedPanelId(selectedPanelId);
+    if (!disablePanelSelect) {
+      // panel not already selected?
+      if (panelId !== selectedPanelId) {
+        // has content (selectable)?
+        if (selectedPanel.content) {
+          // select panel
+          setSelectedPanelId(panelId);
+        }
+      }
+      // already selected?
+      else {
+        // toggle off
+        setSelectedPanelId(null);
+      }
+    }
+  }, [selectedPanelId, disablePanelSelect, onClick, panels]);
+  const panelBarItems = useMemo(() => {
+    const items = [];
+    let prevPanel = null;
+    for (const panel of panels) {
+      // grouping has changed?
+      if (prevPanel !== null && panel.grouping !== prevPanel.grouping) {
+        // add divider first
+        items.push(/*#__PURE__*/_jsx(PanelBarDivider, {}, `${panel.grouping}_${panel.id}`));
+      }
+
+      // add bar item
+      items.push(/*#__PURE__*/_jsx(PanelBarIcon, {
+        iconName: panel.iconName,
+        title: panel.title,
+        isExpanded: selectedPanelId === panel.id,
+        forceHighlight: panel.forceHighlight ?? false,
+        toggleExpanded: () => togglePanel(panel.id)
+      }, panel?.id));
+
+      // update prevPanel
+      prevPanel = panel;
     }
-  };
-  const shouldDisplayPanelContainer = panels?.some(panel => panel?.content);
+    return items;
+  }, [panels, selectedPanelId, togglePanel]);
   return /*#__PURE__*/_jsxs(ComponentContainer, {
     centered: centered,
+    alignPanels: alignPanels,
     containerHeight: containerHeight,
     position: position,
     zIndex: zIndex,
     children: [/*#__PURE__*/_jsx(PanelBar, {
-      children: panels.map(panel => /*#__PURE__*/_jsx(PanelBarIcon, {
-        iconName: panel.iconName,
-        title: panel.title,
-        isExpanded: expandedPanelId === panel.id,
-        toggleExpanded: () => togglePanel(panel.id)
-      }, panel?.id))
-    }), shouldDisplayPanelContainer && /*#__PURE__*/_jsx(PanelContainer, {
+      children: panelBarItems
+    }), /*#__PURE__*/_jsx(PanelContainer, {
       containerHeight: containerHeight,
       children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
-        ...panel,
+        title: panel.title,
+        iconName: panel.iconName,
+        content: panel.content,
         containerHeight: containerHeight,
-        isExpanded: expandedPanelId === panel.id,
+        isExpanded: selectedPanelId === panel.id,
         toggleExpanded: () => togglePanel(panel.id)
       }, panel?.id))
     })]
@@ -63,9 +103,10 @@ FloatingPanels.propTypes = {
     iconName: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     content: PropTypes.node.isRequired,
-    defaultExpanded: PropTypes.bool
+    grouping: PropTypes.string,
+    forceHighlight: PropTypes.bool
   })).isRequired,
-  containerHeight: PropTypes.number,
+  containerHeight: PropTypes.string,
   position: PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -74,22 +115,30 @@ FloatingPanels.propTypes = {
   }),
   onClick: PropTypes.func,
   centered: PropTypes.bool,
-  zIndex: PropTypes.number
-};
-FloatingPanels.defaultProps = {
-  position: {
-    right: 20,
-    top: 20
-  }
+  alignPanels: PropTypes.oneOf(["left", "center", "right"]),
+  zIndex: PropTypes.number,
+  defaultSelectedPanelId: PropTypes.string,
+  disablePanelSelect: PropTypes.bool
 };
 FloatingPanels.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "FloatingPanels",
   "props": {
+    "containerHeight": {
+      "defaultValue": {
+        "value": "\"100%\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "position": {
       "defaultValue": {
-        "value": "{ right: 20, top: 20 }",
+        "value": "{ right: 0, top: 0 }",
         "computed": false
       },
       "description": "",
@@ -147,6 +196,27 @@ FloatingPanels.__docgenInfo = {
       },
       "required": false
     },
+    "alignPanels": {
+      "defaultValue": {
+        "value": "\"right\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"left\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"right\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
     "zIndex": {
       "defaultValue": {
         "value": "2",
@@ -158,6 +228,28 @@ FloatingPanels.__docgenInfo = {
       },
       "required": false
     },
+    "disablePanelSelect": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "defaultSelectedPanelId": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "onClick": {
       "defaultValue": {
         "value": "() => {}",
@@ -192,7 +284,11 @@ FloatingPanels.__docgenInfo = {
               "name": "node",
               "required": true
             },
-            "defaultExpanded": {
+            "grouping": {
+              "name": "string",
+              "required": false
+            },
+            "forceHighlight": {
               "name": "bool",
               "required": false
             }
@@ -200,13 +296,6 @@ FloatingPanels.__docgenInfo = {
         }
       },
       "required": true
-    },
-    "containerHeight": {
-      "description": "",
-      "type": {
-        "name": "number"
-      },
-      "required": false
     }
   }
 };

package/es/components/ProgressBar/index.js

@@ -76,7 +76,7 @@ ProgressBar.propTypes = {
   /** Specifies the system design theme. */
   theme: PropTypes.object,
   /** Specifies the aria-label for the progress bar */
-  ariaLabel: PropTypes.object
+  ariaLabel: PropTypes.string
 };
 ProgressBar.__docgenInfo = {
   "description": "Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.\n\nA percentage width of the container (grey background) can be specified using the containerWidth prop, in most cases this should be 100. If not set the container is rendered without a CSS width property.\n\nA percentage width of the fill (coloured element) can be specified using the fillWidth prop. On page load the fill will animate from 0 to set value, and on change of the fillWidth prop value the fill will automatically animate to the new width value.",
@@ -101,7 +101,7 @@ ProgressBar.__docgenInfo = {
       },
       "description": "Specifies the aria-label for the progress bar",
       "type": {
-        "name": "object"
+        "name": "string"
       },
       "required": false
     },

package/es/components/Tag/index.js

@@ -20,7 +20,7 @@ const TagValue = styled.button.attrs(props => ({
 const TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-decoration:", ";white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
+})(["text-decoration:", ";white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
 const TagActionIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagActionIconWrapper",
   componentId: "sc-1dh2aa8-3"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.21",
+  "version": "3.3.23",
   "engines": {
     "node": "20.12.2"
   },