@agregio-solutions/design-system 1.48.2 → 1.50.0

package/dist/design-system.cjs

@@ -229,9 +229,13 @@ See https://s-c.sh/2BAXzed for more info.`),window[qu]+=1);const b8=l.createCont
     outline-color: var(--hover-border-color);
   }
 
-  // Manage keyboard focus state (and temporary active state as well)
-  &:not([data-disabled])[data-pressed],
-  &:not([data-disabled])[data-force-pressed],
+  // Manage pressed state
+  &[data-pressed],
+  &[data-force-pressed] {
+    transform: scale(0.96);
+  }
+
+  // Manage keyboard focus state
   &:not([data-disabled])[data-focus-visible],
   &:not([data-disabled])[data-force-focus-visible] {
     color: var(--hover-color);
@@ -248,6 +252,10 @@ See https://s-c.sh/2BAXzed for more info.`),window[qu]+=1);const b8=l.createCont
   &:not([data-disabled])[data-force-focused] {
     outline: var(--border-color) solid 1px;
   }
+  &:not([data-disabled])[data-focused][data-hovered],
+  &:not([data-disabled])[data-force-focused][data-hovered] {
+    outline: var(--hover-border-color) solid 1px;
+  }
 
   // Manage the size variations
   &[data-size="small"] {
@@ -1884,7 +1892,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[qu]+=1);const b8=l.createCont
   ${Nu};
   z-index: var(--z-index-dropdown);
   outline: none;
-`;function fE({children:e,buttonProps:t,isOpen:n,onOpenChange:r,defaultOpen:u,placement:a="bottom"}){return m.jsxs(sE,{isOpen:n,onOpenChange:r,defaultOpen:u,children:[m.jsx(ke,{...t}),m.jsx(dE,{offset:8,placement:a,children:m.jsx(cE,{children:e})})]})}function pE({text:e,iconRight:t,iconLeft:n,href:r,routerOptions:u,onClick:a,isDisabled:i,...o}){return m.jsx(yy,{...o,textValue:e,style:{outline:"none",textDecoration:"none"},href:r,routerOptions:u,onAction:a,isDisabled:i,children:s=>m.jsx(Ys,{text:e,"data-hovered":s.isHovered,"data-pressed":s.isPressed,"data-focused":s.isFocused,"data-focus-visible":s.isFocusVisible,iconLeft:n,iconRight:t,disabled:i})})}const mE=R.div`
+`;function fE({children:e,buttonProps:t,isOpen:n,onOpenChange:r,defaultOpen:u,placement:a="bottom"}){return m.jsxs(sE,{isOpen:n,onOpenChange:r,defaultOpen:u,children:[m.jsx(ke,{...t}),m.jsx(dE,{offset:8,placement:a,children:m.jsx(cE,{children:e})})]})}function pE({text:e,iconRight:t,iconLeft:n,href:r,routerOptions:u,onClick:a,isDisabled:i,style:o,className:s,...d}){return m.jsx(yy,{...d,textValue:e,style:{outline:"none",textDecoration:"none"},href:r,routerOptions:u,onAction:a,isDisabled:i,children:c=>m.jsx(Ys,{text:e,"data-hovered":c.isHovered,"data-pressed":c.isPressed,"data-focused":c.isFocused,"data-focus-visible":c.isFocusVisible,iconLeft:n,iconRight:t,disabled:i,style:o,className:s})})}const mE=R.div`
   display: flex;
   flex: 1;
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm)

package/dist/design-system.js

@@ -21980,9 +21980,13 @@ const F7 = I.span`
     outline-color: var(--hover-border-color);
   }
 
-  // Manage keyboard focus state (and temporary active state as well)
-  &:not([data-disabled])[data-pressed],
-  &:not([data-disabled])[data-force-pressed],
+  // Manage pressed state
+  &[data-pressed],
+  &[data-force-pressed] {
+    transform: scale(0.96);
+  }
+
+  // Manage keyboard focus state
   &:not([data-disabled])[data-focus-visible],
   &:not([data-disabled])[data-force-focus-visible] {
     color: var(--hover-color);
@@ -21999,6 +22003,10 @@ const F7 = I.span`
   &:not([data-disabled])[data-force-focused] {
     outline: var(--border-color) solid 1px;
   }
+  &:not([data-disabled])[data-focused][data-hovered],
+  &:not([data-disabled])[data-force-focused][data-hovered] {
+    outline: var(--hover-border-color) solid 1px;
+  }
 
   // Manage the size variations
   &[data-size="small"] {
@@ -25823,29 +25831,33 @@ function hk({
   routerOptions: a,
   onClick: u,
   isDisabled: i,
-  ...o
+  style: o,
+  className: l,
+  ...s
 }) {
   return /* @__PURE__ */ h(
     By,
     {
-      ...o,
+      ...s,
       textValue: e,
       style: { outline: "none", textDecoration: "none" },
       href: r,
       routerOptions: a,
       onAction: u,
       isDisabled: i,
-      children: (l) => /* @__PURE__ */ h(
+      children: (d) => /* @__PURE__ */ h(
         ud,
         {
           text: e,
-          "data-hovered": l.isHovered,
-          "data-pressed": l.isPressed,
-          "data-focused": l.isFocused,
-          "data-focus-visible": l.isFocusVisible,
+          "data-hovered": d.isHovered,
+          "data-pressed": d.isPressed,
+          "data-focused": d.isFocused,
+          "data-focus-visible": d.isFocusVisible,
           iconLeft: n,
           iconRight: t,
-          disabled: i
+          disabled: i,
+          style: o,
+          className: l
         }
       )
     }

package/dist/packages/components/MenuItem/index.d.ts

@@ -30,5 +30,13 @@ export type Props = {
      * Example : `{ replace: true }`
      */
     routerOptions?: any;
+    /**
+     * Additional style to apply to the menu item
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional class name to apply to the menu item
+     */
+    className?: string;
 };
-export default function MenuItem({ text, iconRight, iconLeft, href, routerOptions, onClick, isDisabled, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function MenuItem({ text, iconRight, iconLeft, href, routerOptions, onClick, isDisabled, style, className, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.48.2",
+  "version": "1.50.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",