orcs-design-system 3.3.35 → 3.3.37

package/es/components/Avatar/index.js

@@ -363,28 +363,41 @@ const HeaderAvatarShape = styled("div").withConfig({
 const HeaderAvatarAction = styled("button").withConfig({
   displayName: "Avatar__HeaderAvatarAction",
   componentId: "sc-1wtet2j-11"
-})(() => ({
-  cursor: "pointer",
-  padding: "0",
-  background: "none",
-  border: "none",
-  outline: "none",
-  appearance: "none",
-  position: "relative",
-  "&:hover": {
-    "& > .icon-container": {
-      opacity: "1"
+})(_ref6 => {
+  let {
+    $shape
+  } = _ref6;
+  return {
+    cursor: "pointer",
+    padding: "0",
+    background: "none",
+    border: "none",
+    outline: "none",
+    appearance: "none",
+    position: "relative",
+    zIndex: "5",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "6px",
+    ...($shape === "hexagon" && {
+      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
+    }),
+    ...($shape === "tag" && {
+      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
+    }),
+    "&:hover, &:focus": {
+      "& > .icon-container": {
+        opacity: "1"
+      }
     }
-  }
-}));
+  };
+});
 const IconContainer = styled("div").withConfig({
   displayName: "Avatar__IconContainer",
   componentId: "sc-1wtet2j-12"
-})(_ref6 => {
+})(_ref7 => {
   let {
     $shape,
     $sizing
-  } = _ref6;
+  } = _ref7;
   return {
     opacity: "0",
     transition: "opacity 0.2s ease-in-out",
@@ -392,7 +405,7 @@ const IconContainer = styled("div").withConfig({
     top: $sizing === "large" ? "6px" : "4px",
     left: $sizing === "large" ? "6px" : "4px",
     width: $sizing === "large" ? "calc(100% - 12px)" : "calc(100% - 8px)",
-    height: $sizing === "large" ? "calc(100% - 18px)" : "calc(100% - 12px)",
+    height: $sizing === "large" ? "calc(100% - 17px)" : "calc(100% - 12px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -407,7 +420,7 @@ const IconContainer = styled("div").withConfig({
     })
   };
 });
-const Avatar = _ref7 => {
+const Avatar = _ref8 => {
   let {
     sizing,
     image,
@@ -426,7 +439,7 @@ const Avatar = _ref7 => {
     headerAvatar = false,
     onClick,
     ...props
-  } = _ref7;
+  } = _ref8;
   const hasTitle = !!title;
   const hasSubtitle = !!subtitle;
   const hasSubtitleContent = !!subtitleContent;
@@ -485,9 +498,12 @@ const Avatar = _ref7 => {
         $shape: shape,
         text: shape === "circle" ? "Upload profile picture" : "Change image",
         headerAvatarSizing: sizing,
+        tabIndex: "-1",
         children: /*#__PURE__*/_jsxs(HeaderAvatarAction, {
           onClick: onClick,
           "aria-label": "Edit avatar",
+          $shape: shape,
+          $sizing: sizing,
           children: [/*#__PURE__*/_jsx(IconContainer, {
             $shape: shape,
             $sizing: sizing,

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

@@ -89,29 +89,29 @@ export const PanelBarDivider = styled.div.withConfig({
 export const IconButton = styled.button.withConfig({
   displayName: "FloatingPanelsstyles__IconButton",
   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 => {
+})(["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"), _ref0 => {
   let {
     isExpanded,
     forceHighlight
-  } = _ref10;
+  } = _ref0;
   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-9"
-})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref11 => {
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref1 => {
   let {
     isExpanded
-  } = _ref11;
+  } = _ref1;
   return isExpanded ? "block" : "none";
-}, _ref12 => {
+}, _ref10 => {
   let {
     isExpanded
-  } = _ref12;
+  } = _ref10;
   return isExpanded ? "100%" : "0";
-}, _ref13 => {
+}, _ref11 => {
   let {
     isExpanded
-  } = _ref13;
+  } = _ref11;
   return isExpanded ? "1" : "0";
 });

package/es/components/Popover/index.js

@@ -149,8 +149,8 @@ export default function Popover(_ref) {
     ...getReferenceProps({
       ref: refs.setReference
     }),
-    tabIndex: "0"
-  }), [getReferenceProps, refs.setReference]);
+    tabIndex: props.tabIndex !== undefined ? props.tabIndex : "0"
+  }), [getReferenceProps, refs.setReference, props.tabIndex]);
   const directionClass = useMemo(() => context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement, [context.placement, direction]);
   const style = useMemo(() => {
     const baseStyle = {
@@ -256,7 +256,7 @@ Popover.propTypes = {
   /** Provide an aria-label if text is not a string */
   ariaLabel: PropTypes.string,
   /** Provide a tab index for accessibilty, defaults to 0 */
-  tabIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   className: PropTypes.string,
   /** Render tooltip with focus control when there is link inside, defaults to true */
   withFocusControl: PropTypes.bool,
@@ -379,7 +379,12 @@ Popover.__docgenInfo = {
     "tabIndex": {
       "description": "Provide a tab index for accessibilty, defaults to 0",
       "type": {
-        "name": "number"
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
       },
       "required": false
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.35",
+  "version": "3.3.37",
   "engines": {
     "node": "20.12.2"
   },
@@ -172,7 +172,8 @@
     },
     "@rollup/plugin-replace": {
       "rollup": ">=3.29.5"
-    }
+    },
+    "webpack-dev-server": "5.2.2"
   },
   "browserslist": [
     ">0.2%",