@devopness/ui-react 2.153.2 → 2.154.0

package/dist/src/components/Primitives/Dropdown/Dropdown.d.ts

@@ -4,6 +4,7 @@ import { InjectedProps as PopupStateProps } from 'material-ui-popup-state';
 import { Color } from '../../../colors';
 import { ButtonProps } from '../../Buttons';
 import { IconProps } from '../Icon';
+import { LinkProps } from '../Link';
 import { TooltipProps } from '../Tooltip';
 import { Unwrap } from '../../types';
 type DropdownOptionIcon = Unwrap<Partial<Pick<IconProps, 'name' | 'size'>> & Pick<React.CSSProperties, 'backgroundColor' | 'color'>> & {
@@ -14,9 +15,9 @@ type DropdownOptionLetter = Unwrap<Pick<React.CSSProperties, 'backgroundColor' |
 };
 type DropdownOption = {
     /**
-     * Add separator from previous options
+     * Background Color to use when option is active
      */
-    brokenSequence?: boolean;
+    activeBackgroundColor?: Color;
     /**
      * Option Badge configuration
      *
@@ -24,31 +25,37 @@ type DropdownOption = {
      */
     badge?: DropdownOptionIcon | DropdownOptionLetter;
     /**
-     * Option description
+     * Add separator from previous options
      */
-    label?: string;
+    brokenSequence?: boolean;
+    /**
+     * Label text color
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
+     */
+    color?: Color;
     /**
      * Highlight option
      */
     isActive?: boolean;
     /**
-     * Background Color to use when option is active
+     * Disables option
      */
-    activeBackgroundColor?: Color;
+    isDisabled?: boolean;
     /**
-     * Event handler called when this option is clicked.
+     * Option description
      */
-    onClick?: () => null;
+    label?: string;
     /**
-     * Transforms label to a Link and point user to this url
+     * Link properties
      *
      * @see {Link}
      */
-    url?: string;
+    linkProps?: LinkProps;
     /**
-     * Disables option
+     * Event handler called when this option is clicked.
      */
-    isDisabled?: boolean;
+    onClick?: () => null;
     /**
      * Tooltip's title
      *
@@ -56,11 +63,11 @@ type DropdownOption = {
      */
     tooltip?: TooltipProps['title'];
     /**
-     * Label text color
+     * Transforms label to a Link and point user to this url
      *
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
+     * @see {Link}
      */
-    color?: Color;
+    url?: string;
 };
 type DropdownSharedProps = {
     /**
@@ -75,45 +82,45 @@ type DropdownSharedProps = {
      * help: https://mui.com/material-ui/react-popover/#anchor-playground
      */
     anchorOrigin?: PopoverOrigin;
-    /**
-     * This is the point on the popover which
-     * will attach to the anchor's origin.
-     *
-     * Options:
-     * vertical: [top, center, bottom, x(px)];
-     * horizontal: [left, center, right, x(px)].
-     *
-     * help: https://mui.com/material-ui/react-popover/#anchor-playground
-     */
-    transformOrigin?: PopoverOrigin;
     /**
      * The unique id to identify the dropdown anchor element.
      */
     id: string;
     /**
-     * Options listed in the Dropdown menu popup.
+     * Event handler called when a dropdown option is selected.
+     *
+     * This prop can be overriden using option.onClick
      *
      * @see {DropdownOption}
      */
-    options: DropdownOption[] | undefined;
+    onSelect?: (itemClicked: DropdownOption) => void;
     /**
      * Event handler called when the dropdown is opened or closed.
      */
     onToggle?: (popupState: PopupStateProps) => void;
     /**
-     * Event handler called when a dropdown option is selected.
-     *
-     * This prop can be overriden using option.onClick
+     * Options listed in the Dropdown menu popup.
      *
      * @see {DropdownOption}
      */
-    onSelect?: (itemClicked: DropdownOption) => void;
+    options: DropdownOption[] | undefined;
     /**
      * Tooltip's title
      *
      * @see {Tooltip}
      */
     tooltip?: TooltipProps['title'];
+    /**
+     * This is the point on the popover which
+     * will attach to the anchor's origin.
+     *
+     * Options:
+     * vertical: [top, center, bottom, x(px)];
+     * horizontal: [left, center, right, x(px)].
+     *
+     * @see {@link https://mui.com/material-ui/react-popover/#anchor-playground}
+     */
+    transformOrigin?: PopoverOrigin;
 };
 type DropdownVariationButtonProps = DropdownSharedProps & {
     /**
@@ -122,6 +129,13 @@ type DropdownVariationButtonProps = DropdownSharedProps & {
      * @see {Button}
      */
     anchorType: 'button';
+    /**
+     * Button properties
+     *
+     * @see {Button}
+     */
+    buttonProps?: ButtonProps;
+    content?: never;
     /**
      * Hide dropdown arrow icon
      */
@@ -130,19 +144,12 @@ type DropdownVariationButtonProps = DropdownSharedProps & {
      * Hide dropdown label text
      */
     hideLabel?: boolean;
-    /**
-     * Button properties
-     *
-     * @see {Button}
-     */
-    buttonProps?: ButtonProps;
     /**
      * Button label
      *
      * Default value: 'Open Popover'
      */
     label?: string | React.JSX.Element;
-    content?: never;
 };
 type DropdownVariationContainerProps = DropdownSharedProps & {
     /**
@@ -160,6 +167,6 @@ type DropdownProps = DropdownVariationContainerProps | DropdownVariationButtonPr
 /**
  * Display a menu with a list of options
  */
-declare const Dropdown: ({ onToggle, onSelect, content, anchorType, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: ({ anchorType, content, onSelect, onToggle, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export type { DropdownOption, DropdownProps };
 export { Dropdown };

package/dist/src/components/Primitives/Dropdown/Dropdown.styled.d.ts

@@ -1,17 +1,17 @@
 import { DropdownOption } from './Dropdown';
-import { Color } from '../../../colors';
 type StyledProps = {
-    brokenSequence?: boolean;
-    backgroundColor?: string;
-    isActive?: boolean;
-    disabled?: boolean | undefined;
-    color?: Color;
-} & Partial<Pick<DropdownOption, 'activeBackgroundColor'>>;
-declare const MenuContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const MenuOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledProps>> & string;
-declare const ContentBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledProps>> & string;
-declare const ClickableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Grid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+    [Key in keyof Pick<DropdownOption, 'activeBackgroundColor' | 'brokenSequence' | 'isActive' | 'color'> as `$${Key}`]: DropdownOption[Key];
+} & {
+    disabled: DropdownOption['isDisabled'];
+};
+declare const MenuContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const MenuOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<StyledProps, "disabled" | "$activeBackgroundColor" | "$brokenSequence" | "$isActive">>> & string;
+declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<StyledProps, "$color">>> & string;
+type ContentBadgeProps = {
+    [Key in keyof Pick<NonNullable<DropdownOption['badge']>, 'backgroundColor'> as `$${Key}`]: NonNullable<DropdownOption['badge']>[Key];
+};
+declare const ContentBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<ContentBadgeProps, "$backgroundColor">>> & string;
+declare const ClickableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Grid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export { MenuContainer, MenuOption, Text, ContentBadge, ClickableContainer, Grid, Wrapper, };

package/dist/ui-react.cjs

@@ -264,8 +264,8 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   height: 42px;
   padding: 0 15px;
   opacity: ${({disabled:e})=>e?.3:1};
-  ${e=>e.brokenSequence&&T2}
-  ${e=>e.isActive&&!e.disabled&&R2(e.activeBackgroundColor)}
+  ${e=>e.$brokenSequence&&T2}
+  ${e=>e.$isActive&&!e.disabled&&R2(e.$activeBackgroundColor)}
   &:hover {
     border-radius: 0;
     background-color: ${ce("purple.250")};
@@ -277,7 +277,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   text-overflow: ellipsis;
   font-weight: 500;
   font-size: 14px;
-  color: ${({color:e})=>ce(e??"blue.800")};
+  color: ${({$color:e})=>ce(e??"blue.800")};
 `,M2=At`
   > svg {
     color: #fff;
@@ -291,7 +291,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   align-items: center;
   width: 20px;
   height: 20px;
-  background-color: ${({backgroundColor:e})=>e};
+  background-color: ${({$backgroundColor:e})=>e};
   border-radius: 5px;
   text-transform: uppercase;
   font-family: ${$t("roboto")};
@@ -299,7 +299,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   font-size: 14px;
   color: ${ce("blue.800")};
 
-  ${({backgroundColor:e})=>!!e&&M2}
+  ${({$backgroundColor:e})=>!!e&&M2}
 `,$2=ge.div`
   cursor: pointer;
   display: flex;
@@ -338,7 +338,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-`,ry=()=>{const[e,t]=ae.useState([0,0]),r=()=>{t([window.innerWidth,window.innerHeight])};return ae.useEffect(()=>(window.addEventListener("resize",r),r(),()=>{window.removeEventListener("resize",r)}),[]),e},ny=ce("blue.950"),oy=({styles:e,...t})=>{const r=Fe(({className:n,...o})=>$.jsx(yf,{...o,classes:{popper:n}}))(()=>({[`& .${Be.tooltip}`]:{color:e==null?void 0:e.color,backgroundColor:(e==null?void 0:e.backgroundColor)??ny,fontSize:"11px",fontFamily:$t("roboto")}}));return $.jsx(r,{...t})},En=({disableHover:e=!1,enableOnlyWithEllipsisPoints:t=!1,title:r="",children:n,...o})=>{const[i,a]=ae.useState(!1),[c,l]=ry(),f=o.open!==void 0,d=ae.useRef(null),h=t&&!i;return ae.useEffect(()=>{if(d.current){const m=d.current.clientWidth,g=d.current.scrollWidth;a(g>m)}},[c,l]),$.jsx(oy,{placement:"bottom-start",disableHoverListener:e||h||f,disableFocusListener:!0,disableTouchListener:!0,title:r,...o,children:$.jsx(ty,{ref:d,className:"translate",children:n})})},iy=10,ay=10,sy=({popupTrigger:e,popupState:t,buttonProps:r,content:n,tooltip:o,...i})=>{if(i.anchorType==="content")return $.jsx($2,{...e,children:n});const a=t.isOpen?"upArrow":"downArrow";return $.jsx(af,{condition:!!o,wrapper:c=>$.jsx(En,{title:o,children:c}),children:$.jsx(hr,{noMargin:!0,noIconMargin:!!(r!=null&&r.icon),typeSize:"medium",...r,icon:i.hideDropdownIcon?void 0:a,...e,children:$.jsxs("div",{style:{display:"flex",alignItems:"center",gap:ay},children:[$.jsx(Bo,{name:r==null?void 0:r.icon,size:(r==null?void 0:r.iconSize)??iy}),i.hideLabel?null:i.label??"Open Popover"]})})})},cy=({onToggle:e,onSelect:t,content:r,anchorType:n,...o})=>$.jsx(of,{variant:"popover",popupId:"demo-popup-popover",children:i=>(i.anchorEl&&(e==null||e(i)),$.jsxs(ae.Fragment,{children:[$.jsx(sy,{...o,popupTrigger:{...S2(i)},popupState:i,content:r,anchorType:n}),$.jsx(nf,{slotProps:{paper:{style:{marginTop:"10px",backgroundColor:"#FFF",width:"200px",borderRadius:"8px",boxShadow:"0 0 30px 0px rgba(0,0,0,0.15)"}}},...x2(i),...o,children:o.options&&$.jsx(O2,{id:o.id,children:o.options.map((a,c)=>{var l;return $.jsx(En,{title:a.tooltip??"",children:$.jsx(af,{condition:!!a.url,wrapper:f=>$.jsx(sf,{to:a.url,style:{display:"block",marginRight:"auto"},hideUnderline:!0,children:f}),children:$.jsxs(_2,{id:`option_${c.toString()}`,disabled:a.isDisabled,isActive:a.isActive,activeBackgroundColor:a.activeBackgroundColor,brokenSequence:a.brokenSequence,onClick:f=>{a.isDisabled||(f.preventDefault(),f.stopPropagation(),a.onClick?a.onClick():t&&t(a),i.close())},children:[a.badge&&$.jsx(A2,{backgroundColor:a.badge.backgroundColor,children:a.badge.icon?$.jsx(Bo,{name:a.badge.name,size:a.badge.size??12}):(l=a.label)==null?void 0:l.at(0)}),a.label&&$.jsx(En,{title:a.label,enableOnlyWithEllipsisPoints:!0,children:$.jsx(P2,{color:a.color,children:a.label})})]},`option${c.toString()}`)})},c)})})})]}))}),ly=ge.span`
+`,ry=()=>{const[e,t]=ae.useState([0,0]),r=()=>{t([window.innerWidth,window.innerHeight])};return ae.useEffect(()=>(window.addEventListener("resize",r),r(),()=>{window.removeEventListener("resize",r)}),[]),e},ny=ce("blue.950"),oy=({styles:e,...t})=>{const r=Fe(({className:n,...o})=>$.jsx(yf,{...o,classes:{popper:n}}))(()=>({[`& .${Be.tooltip}`]:{color:e==null?void 0:e.color,backgroundColor:(e==null?void 0:e.backgroundColor)??ny,fontSize:"11px",fontFamily:$t("roboto")}}));return $.jsx(r,{...t})},En=({disableHover:e=!1,enableOnlyWithEllipsisPoints:t=!1,title:r="",children:n,...o})=>{const[i,a]=ae.useState(!1),[c,l]=ry(),f=o.open!==void 0,d=ae.useRef(null),h=t&&!i;return ae.useEffect(()=>{if(d.current){const m=d.current.clientWidth,g=d.current.scrollWidth;a(g>m)}},[c,l]),$.jsx(oy,{placement:"bottom-start",disableHoverListener:e||h||f,disableFocusListener:!0,disableTouchListener:!0,title:r,...o,children:$.jsx(ty,{ref:d,className:"translate",children:n})})},iy=10,ay=10,sy=({buttonProps:e,content:t,popupState:r,popupTrigger:n,tooltip:o,...i})=>{if(i.anchorType==="content")return $.jsx($2,{...n,children:t});const a=r.isOpen?"upArrow":"downArrow";return $.jsx(af,{condition:!!o,wrapper:c=>$.jsx(En,{title:o,children:c}),children:$.jsx(hr,{"data-testid":"dropdown-button",noMargin:!0,noIconMargin:!!(e!=null&&e.icon),typeSize:"medium",...e,icon:i.hideDropdownIcon?void 0:a,...n,children:$.jsxs("div",{style:{display:"flex",alignItems:"center",gap:ay},children:[$.jsx(Bo,{name:e==null?void 0:e.icon,size:(e==null?void 0:e.iconSize)??iy}),i.hideLabel?null:i.label??"Open Popover"]})})})},cy=({anchorType:e,content:t,onSelect:r,onToggle:n,...o})=>$.jsx(of,{variant:"popover",popupId:"demo-popup-popover",children:i=>(i.anchorEl&&(n==null||n(i)),$.jsxs(ae.Fragment,{children:[$.jsx(sy,{...o,popupTrigger:{...S2(i)},popupState:i,content:t,anchorType:e}),$.jsx(nf,{slotProps:{paper:{style:{marginTop:"10px",backgroundColor:"#FFF",width:"200px",borderRadius:"8px",boxShadow:"0 0 30px 0px rgba(0,0,0,0.15)"}}},...x2(i),...o,children:o.options&&$.jsx(O2,{id:o.id,children:o.options.map((a,c)=>{var l;return $.jsx(En,{title:a.tooltip??"",children:$.jsx(af,{condition:!!a.url,wrapper:f=>{var d;return $.jsx(sf,{to:a.url,hideUnderline:!0,...a.linkProps,style:{display:"block",marginRight:"auto",...(d=a.linkProps)==null?void 0:d.style},children:f})},children:$.jsxs(_2,{id:`option_${c.toString()}`,disabled:a.isDisabled,$isActive:a.isActive,$activeBackgroundColor:a.activeBackgroundColor,$brokenSequence:a.brokenSequence,onClick:f=>{a.isDisabled||(f.preventDefault(),f.stopPropagation(),a.onClick?a.onClick():r&&r(a),i.close())},children:[a.badge&&$.jsx(A2,{"data-testid":`option-${c.toString()}-badge`,$backgroundColor:a.badge.backgroundColor,children:a.badge.icon?$.jsx(Bo,{name:a.badge.name,size:a.badge.size??12}):(l=a.label)==null?void 0:l.at(0)}),a.label&&$.jsx(En,{title:a.label,enableOnlyWithEllipsisPoints:!0,children:$.jsx(P2,{$color:a.color,children:a.label})})]},`option${c.toString()}`)})},c)})})})]}))}),ly=ge.span`
   font-family: ${$t("roboto")};
   font-size: 0.8em;
   font-weight: 400;

package/dist/ui-react.js

@@ -10068,8 +10068,8 @@ const A2 = At`
   height: 42px;
   padding: 0 15px;
   opacity: ${({ disabled: e }) => e ? 0.3 : 1};
-  ${(e) => e.brokenSequence && A2}
-  ${(e) => e.isActive && !e.disabled && $2(e.activeBackgroundColor)}
+  ${(e) => e.$brokenSequence && A2}
+  ${(e) => e.$isActive && !e.disabled && $2(e.$activeBackgroundColor)}
   &:hover {
     border-radius: 0;
     background-color: ${se("purple.250")};
@@ -10081,7 +10081,7 @@ const A2 = At`
   text-overflow: ellipsis;
   font-weight: 500;
   font-size: 14px;
-  color: ${({ color: e }) => se(e ?? "blue.800")};
+  color: ${({ $color: e }) => se(e ?? "blue.800")};
 `, j2 = At`
   > svg {
     color: #fff;
@@ -10095,7 +10095,7 @@ const A2 = At`
   align-items: center;
   width: 20px;
   height: 20px;
-  background-color: ${({ backgroundColor: e }) => e};
+  background-color: ${({ $backgroundColor: e }) => e};
   border-radius: 5px;
   text-transform: uppercase;
   font-family: ${Bt("roboto")};
@@ -10103,7 +10103,7 @@ const A2 = At`
   font-size: 14px;
   color: ${se("blue.800")};
 
-  ${({ backgroundColor: e }) => !!e && j2}
+  ${({ $backgroundColor: e }) => !!e && j2}
 `, D2 = me.div`
   cursor: pointer;
   display: flex;
@@ -12357,16 +12357,16 @@ const cy = me.span`
     }
   );
 }, dy = 10, py = 10, hy = ({
-  popupTrigger: e,
-  popupState: t,
-  buttonProps: r,
-  content: n,
+  buttonProps: e,
+  content: t,
+  popupState: r,
+  popupTrigger: n,
   tooltip: o,
   ...i
 }) => {
   if (i.anchorType === "content")
-    return /* @__PURE__ */ $.jsx(D2, { ...e, children: n });
-  const a = t.isOpen ? "upArrow" : "downArrow";
+    return /* @__PURE__ */ $.jsx(D2, { ...n, children: t });
+  const a = r.isOpen ? "upArrow" : "downArrow";
   return /* @__PURE__ */ $.jsx(
     ff,
     {
@@ -12375,12 +12375,13 @@ const cy = me.span`
       children: /* @__PURE__ */ $.jsx(
         Mr,
         {
+          "data-testid": "dropdown-button",
           noMargin: !0,
-          noIconMargin: !!(r != null && r.icon),
+          noIconMargin: !!(e != null && e.icon),
           typeSize: "medium",
-          ...r,
-          icon: i.hideDropdownIcon ? void 0 : a,
           ...e,
+          icon: i.hideDropdownIcon ? void 0 : a,
+          ...n,
           children: /* @__PURE__ */ $.jsxs(
             "div",
             {
@@ -12393,8 +12394,8 @@ const cy = me.span`
                 /* @__PURE__ */ $.jsx(
                   rs,
                   {
-                    name: r == null ? void 0 : r.icon,
-                    size: (r == null ? void 0 : r.iconSize) ?? dy
+                    name: e == null ? void 0 : e.icon,
+                    size: (e == null ? void 0 : e.iconSize) ?? dy
                   }
                 ),
                 i.hideLabel ? null : i.label ?? "Open Popover"
@@ -12406,25 +12407,25 @@ const cy = me.span`
     }
   );
 }, $b = ({
-  onToggle: e,
-  onSelect: t,
-  content: r,
-  anchorType: n,
+  anchorType: e,
+  content: t,
+  onSelect: r,
+  onToggle: n,
   ...o
 }) => /* @__PURE__ */ $.jsx(
   uf,
   {
     variant: "popover",
     popupId: "demo-popup-popover",
-    children: (i) => (i.anchorEl && (e == null || e(i)), /* @__PURE__ */ $.jsxs(De.Fragment, { children: [
+    children: (i) => (i.anchorEl && (n == null || n(i)), /* @__PURE__ */ $.jsxs(De.Fragment, { children: [
       /* @__PURE__ */ $.jsx(
         hy,
         {
           ...o,
           popupTrigger: { ..._2(i) },
           popupState: i,
-          content: r,
-          anchorType: n
+          content: t,
+          anchorType: e
         }
       ),
       /* @__PURE__ */ $.jsx(
@@ -12453,31 +12454,40 @@ const cy = me.span`
                   ff,
                   {
                     condition: !!a.url,
-                    wrapper: (f) => /* @__PURE__ */ $.jsx(
-                      F2,
-                      {
-                        to: a.url,
-                        style: { display: "block", marginRight: "auto" },
-                        hideUnderline: !0,
-                        children: f
-                      }
-                    ),
+                    wrapper: (f) => {
+                      var d;
+                      return /* @__PURE__ */ $.jsx(
+                        F2,
+                        {
+                          to: a.url,
+                          hideUnderline: !0,
+                          ...a.linkProps,
+                          style: {
+                            display: "block",
+                            marginRight: "auto",
+                            ...(d = a.linkProps) == null ? void 0 : d.style
+                          },
+                          children: f
+                        }
+                      );
+                    },
                     children: /* @__PURE__ */ $.jsxs(
                       N2,
                       {
                         id: `option_${c.toString()}`,
                         disabled: a.isDisabled,
-                        isActive: a.isActive,
-                        activeBackgroundColor: a.activeBackgroundColor,
-                        brokenSequence: a.brokenSequence,
+                        $isActive: a.isActive,
+                        $activeBackgroundColor: a.activeBackgroundColor,
+                        $brokenSequence: a.brokenSequence,
                         onClick: (f) => {
-                          a.isDisabled || (f.preventDefault(), f.stopPropagation(), a.onClick ? a.onClick() : t && t(a), i.close());
+                          a.isDisabled || (f.preventDefault(), f.stopPropagation(), a.onClick ? a.onClick() : r && r(a), i.close());
                         },
                         children: [
                           a.badge && /* @__PURE__ */ $.jsx(
                             L2,
                             {
-                              backgroundColor: a.badge.backgroundColor,
+                              "data-testid": `option-${c.toString()}-badge`,
+                              $backgroundColor: a.badge.backgroundColor,
                               children: a.badge.icon ? /* @__PURE__ */ $.jsx(
                                 rs,
                                 {
@@ -12492,7 +12502,7 @@ const cy = me.span`
                             {
                               title: a.label,
                               enableOnlyWithEllipsisPoints: !0,
-                              children: /* @__PURE__ */ $.jsx(I2, { color: a.color, children: a.label })
+                              children: /* @__PURE__ */ $.jsx(I2, { $color: a.color, children: a.label })
                             }
                           )
                         ]

package/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "type": "module",
   "name": "@devopness/ui-react",
-  "version": "2.153.2",
+  "version": "2.154.0",
   "publishConfig": {
     "access": "public"
   },