orcs-design-system 3.3.14 → 3.3.16

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

@@ -4,28 +4,33 @@ 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:", ";position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", " ", ""], _ref => {
   let {
-    containerHeight
+    zIndex
   } = _ref;
-  return containerHeight ? `${containerHeight}px` : "100%";
+  return zIndex;
 }, _ref2 => {
   let {
-    position
+    containerHeight
   } = _ref2;
-  return Object.entries(position).filter(_ref3 => {
-    let [, value] = _ref3;
+  return containerHeight ? `${containerHeight}px` : "100%";
+}, _ref3 => {
+  let {
+    position
+  } = _ref3;
+  return Object.entries(position).filter(_ref4 => {
+    let [, value] = _ref4;
     return value !== undefined;
-  }).map(_ref4 => {
-    let [key, value] = _ref4;
+  }).map(_ref5 => {
+    let [key, value] = _ref5;
     return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
   }).join("\n");
-}, _ref5 => {
+}, _ref6 => {
   let {
     centered
-  } = _ref5;
+  } = _ref6;
   return centered ? `
-      left: 50%;
+      margin-left: 50%;
       transform: translateX(-50%);
       right: auto;
     ` : "";
@@ -33,19 +38,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, _ref6 => {
+})(["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 => {
   let {
     containerHeight
-  } = _ref6;
+  } = _ref7;
   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;"], _ref7 => {
+})(["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 => {
   let {
     isExpanded
-  } = _ref7;
+  } = _ref8;
   return isExpanded ? "block" : "none";
 }, panelWidth, themeGet("colors.greyLighter"));
 export const PanelHeader = styled.button.withConfig({
@@ -67,28 +72,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"), _ref8 => {
+})(["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 => {
   let {
     isExpanded
-  } = _ref8;
+  } = _ref9;
   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:", ";"], _ref9 => {
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref10 => {
   let {
     isExpanded
-  } = _ref9;
+  } = _ref10;
   return isExpanded ? "block" : "none";
-}, _ref10 => {
+}, _ref11 => {
   let {
     isExpanded
-  } = _ref10;
+  } = _ref11;
   return isExpanded ? "100%" : "0";
-}, _ref11 => {
+}, _ref12 => {
   let {
     isExpanded
-  } = _ref11;
+  } = _ref12;
   return isExpanded ? "1" : "0";
 });

package/es/components/FloatingPanels/index.js

@@ -12,6 +12,7 @@ const FloatingPanels = _ref => {
       top: 20
     },
     centered = false,
+    zIndex = 2,
     onClick = () => {}
   } = _ref;
   const [expandedPanelId, setExpandedPanelId] = useState(null);
@@ -37,6 +38,7 @@ const FloatingPanels = _ref => {
     centered: centered,
     containerHeight: containerHeight,
     position: position,
+    zIndex: zIndex,
     children: [/*#__PURE__*/_jsx(PanelBar, {
       children: panels.map(panel => /*#__PURE__*/_jsx(PanelBarIcon, {
         iconName: panel.iconName,
@@ -71,7 +73,8 @@ FloatingPanels.propTypes = {
     left: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
   onClick: PropTypes.func,
-  centered: PropTypes.bool
+  centered: PropTypes.bool,
+  zIndex: PropTypes.number
 };
 FloatingPanels.defaultProps = {
   position: {
@@ -144,6 +147,17 @@ FloatingPanels.__docgenInfo = {
       },
       "required": false
     },
+    "zIndex": {
+      "defaultValue": {
+        "value": "2",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
     "onClick": {
       "defaultValue": {
         "value": "() => {}",

package/package.json

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