orcs-design-system 3.3.13 → 3.3.15

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

@@ -12,10 +12,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 library.add(far);
 export default {
   title: "Components/FloatingPanels",
-  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
-    minHeight: "600px",
-    children: storyFn()
-  })],
   component: FloatingPanels
 };
 const Properties = () => {
@@ -45,36 +41,68 @@ const Properties = () => {
     }, "textInput1")]
   });
 };
-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, {})
-}];
+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
+      }
+    })
+  });
+};
+defaultFloatingPanels.storyName = "Default Floating Panels";
+export const floatingActionsPanel = () => {
   return /*#__PURE__*/_jsx(FloatingPanels, {
-    panels: panels,
-    containerHeight: 500,
+    panels: createPanels(false),
     position: {
-      right: 20,
-      top: 20
-    }
+      bottom: 10
+    },
+    centered: true,
+    onClick: panelId => alert(`Panel ${panelId} clicked`)
   });
 };
-defaultFloatingPanels.storyName = "Default Floating Panels";
+floatingActionsPanel.storyName = "Floating Panels as Controls";
 defaultFloatingPanels.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultFloatingPanels"
+};
+floatingActionsPanel.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "floatingActionsPanel"
 };

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

@@ -4,7 +4,7 @@ const panelWidth = "300px";
 export const ComponentContainer = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__ComponentContainer",
   componentId: "sc-1by914f-0"
-})(["z-index:2;position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", ""], _ref => {
+})(["z-index:2;position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", " ", ""], _ref => {
   let {
     containerHeight
   } = _ref;
@@ -20,23 +20,32 @@ export const ComponentContainer = styled.div.withConfig({
     let [key, value] = _ref4;
     return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
   }).join("\n");
+}, _ref5 => {
+  let {
+    centered
+  } = _ref5;
+  return centered ? `
+      margin-left: 50%;
+      transform: translateX(-50%);
+      right: auto;
+    ` : "";
 });
 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, _ref5 => {
+})(["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, _ref6 => {
   let {
     containerHeight
-  } = _ref5;
+  } = _ref6;
   return containerHeight ? `${containerHeight}px` : "100%";
 });
 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;"], _ref6 => {
+})(["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;"], _ref7 => {
   let {
     isExpanded
-  } = _ref6;
+  } = _ref7;
   return isExpanded ? "block" : "none";
 }, panelWidth, themeGet("colors.greyLighter"));
 export const PanelHeader = styled.button.withConfig({
@@ -58,28 +67,28 @@ export const PanelBar = styled.div.withConfig({
 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"), _ref7 => {
+})(["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"), _ref8 => {
   let {
     isExpanded
-  } = _ref7;
+  } = _ref8;
   return isExpanded ? 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:", ";"], _ref8 => {
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref9 => {
   let {
     isExpanded
-  } = _ref8;
+  } = _ref9;
   return isExpanded ? "block" : "none";
-}, _ref9 => {
+}, _ref10 => {
   let {
     isExpanded
-  } = _ref9;
+  } = _ref10;
   return isExpanded ? "100%" : "0";
-}, _ref10 => {
+}, _ref11 => {
   let {
     isExpanded
-  } = _ref10;
+  } = _ref11;
   return isExpanded ? "1" : "0";
 });

package/es/components/FloatingPanels/Panel.js

@@ -14,6 +14,9 @@ export const Panel = _ref => {
     toggleExpanded
   } = _ref;
   const [isHovered, setIsHovered] = useState(false);
+  if (!content) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(PanelWrapper, {
     containerHeight: containerHeight,
     isExpanded: isExpanded,

package/es/components/FloatingPanels/index.js

@@ -11,21 +11,30 @@ const FloatingPanels = _ref => {
       right: 20,
       top: 20
     },
+    centered = false,
     onClick = () => {}
   } = _ref;
   const [expandedPanelId, setExpandedPanelId] = useState(null);
   useEffect(() => {
     const expandedPanel = panels.find(panel => panel.expanded);
-    if (expandedPanel?.id) {
+    if (expandedPanel?.id && !expandedPanel.noActiveState) {
       setExpandedPanelId(expandedPanel.id);
     }
   }, [panels]);
   const togglePanel = panelId => {
+    const selectedPanel = panels.find(panel => panel.id === panelId);
+    if (selectedPanel?.stopToggling && expandedPanelId === panelId) {
+      return;
+    }
+    onClick(panelId);
     const selectedPanelId = expandedPanelId === panelId ? null : panelId;
-    onClick(selectedPanelId);
-    setExpandedPanelId(selectedPanelId);
+    if (!selectedPanel.noActiveState) {
+      setExpandedPanelId(selectedPanelId);
+    }
   };
+  const shouldDisplayPanelContainer = panels?.some(panel => panel?.content);
   return /*#__PURE__*/_jsxs(ComponentContainer, {
+    centered: centered,
     containerHeight: containerHeight,
     position: position,
     children: [/*#__PURE__*/_jsx(PanelBar, {
@@ -35,7 +44,7 @@ const FloatingPanels = _ref => {
         isExpanded: expandedPanelId === panel.id,
         toggleExpanded: () => togglePanel(panel.id)
       }, panel?.id))
-    }), /*#__PURE__*/_jsx(PanelContainer, {
+    }), shouldDisplayPanelContainer && /*#__PURE__*/_jsx(PanelContainer, {
       containerHeight: containerHeight,
       children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
         ...panel,
@@ -61,7 +70,8 @@ FloatingPanels.propTypes = {
     bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     left: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  centered: PropTypes.bool
 };
 FloatingPanels.defaultProps = {
   position: {
@@ -123,6 +133,17 @@ FloatingPanels.__docgenInfo = {
       },
       "required": false
     },
+    "centered": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "onClick": {
       "defaultValue": {
         "value": "() => {}",

package/package.json

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