@xylabs/react-button 5.1.5 → 5.2.0

package/dist/browser/components/ButtonEx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonEx.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonEx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAGxD,QAAA,MAAM,QAAQ,yFAEZ,CAAA;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"ButtonEx.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonEx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAGxD,QAAA,MAAM,QAAQ,yFAOZ,CAAA;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/browser/components/ButtonExProps.d.ts

@@ -1,14 +1,27 @@
 import type { ButtonProps } from '@mui/material';
 import type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared';
 import type { NavigateOptions, To } from 'react-router-dom';
-interface ButtonExProps extends Omit<ButtonProps, 'ref'>, BoxlikeComponentProps, BusyProps {
+export interface ButtonBaseExProps extends Omit<ButtonProps, 'ref' | 'href'>, BoxlikeComponentProps, BusyProps {
     disableUserEvents?: boolean;
     funnel?: string;
     intent?: string;
     placement?: string;
     target?: string;
-    to?: To;
+}
+export interface ButtonToExProps extends ButtonBaseExProps {
+    href?: never;
+    to: To;
     toOptions?: NavigateOptions;
 }
-export type { ButtonExProps };
+export interface ButtonHrefExProps extends ButtonBaseExProps {
+    href: string;
+    to?: never;
+    toOptions?: never;
+}
+export interface ButtonClickExProps extends ButtonBaseExProps {
+    href?: never;
+    to?: never;
+    toOptions?: never;
+}
+export type ButtonExProps = ButtonToExProps | ButtonHrefExProps | ButtonClickExProps;
 //# sourceMappingURL=ButtonExProps.d.ts.map

package/dist/browser/components/ButtonExProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonExProps.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE3D,UAAU,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,qBAAqB,EAAE,SAAS;IACxF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAED,YAAY,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"ButtonExProps.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE3D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,qBAAqB,EAAE,SAAS;IAC5G,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,EAAE,EAAE,EAAE,CAAA;IACN,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB;AAED,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,iBAAiB,GAAG,kBAAkB,CAAA"}

package/dist/browser/index.mjs

@@ -84,12 +84,17 @@ var ButtonToEx = /* @__PURE__ */ forwardRef2(({ to, toOptions, onClick, ...props
 ButtonToEx.displayName = "ButtonToExXYLabs";
 
 // src/components/ButtonEx.tsx
-var ButtonEx = /* @__PURE__ */ forwardRef3(({ to, ...props }, ref) => {
-  return to ? /* @__PURE__ */ React3.createElement(ButtonToEx, {
-    to,
-    ref,
-    ...props
-  }) : /* @__PURE__ */ React3.createElement(ButtonExBase, props);
+var ButtonEx = /* @__PURE__ */ forwardRef3((props, ref) => {
+  if (props.to) {
+    const { to, ...additionalProps } = props;
+    return /* @__PURE__ */ React3.createElement(ButtonToEx, {
+      to,
+      ref,
+      ...additionalProps
+    });
+  } else {
+    return /* @__PURE__ */ React3.createElement(ButtonExBase, props);
+  }
 });
 ButtonEx.displayName = "ButtonExXYLabs";
 export {

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>(({ to, ...props }, ref) => {\n  return to ? <ButtonToEx to={to} ref={ref} {...props} /> : <ButtonExBase {...props} />\n})\n\nButtonEx.displayName = 'ButtonExXYLabs'\n\nexport { ButtonEx }\n","import { Button, useTheme } from '@mui/material'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport {\n  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,\n} from '@xylabs/react-shared'\nimport type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  funnel, intent, target, placement, disableUserEvents, href, ...props\n}, ref) => {\n  const theme = useTheme()\n  const userEvents = useUserEvents()\n  const {\n    busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps\n  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)\n\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (busy) {\n      // If it is busy, do not allow href clicks\n      event.preventDefault()\n    } else {\n      const elementName = props['aria-label'] ?? event.currentTarget.textContent\n      // we do this crazy navigate thing so that we can set it up outside the promise so that safari does not block it\n      const windowToNavigate = () => (target && href) ? window.open('', target) ?? globalThis : globalThis\n      const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {\n        onClick?.(event)\n        if (href) {\n          windowToNav.location.href = href\n        }\n      }\n      if (!disableUserEvents && userEvents) {\n        event.preventDefault()\n        const windowToNav = windowToNavigate()\n        if (href) {\n          userEvents.userClick({\n            elementName, intent, funnel, placement,\n          }).then(() => {\n            callOnClickAndFollowHref(windowToNav)\n          }).catch((ex) => {\n            console.error('User event failed', elementName, funnel, placement, ex)\n            callOnClickAndFollowHref(windowToNav)\n          })\n        }\n        onClick?.(event)\n      } else {\n        callOnClickAndFollowHref()\n      }\n    }\n  }\n\n  return (\n    <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>\n      {busy && busyVariant === 'linear'\n        ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />\n        : null}\n      {busy && busyVariant === 'circular'\n        ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />\n        : null}\n      {children}\n    </Button>\n  )\n})\n\nButtonExBase.displayName = 'ButtonExBaseXYLabs'\n\nexport { ButtonExBase }\n","import type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  to, toOptions, onClick, ...props\n}, ref) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n})\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n"],"mappings":";;;;AAAA,OAAOA,UAASC,cAAAA,mBAAkB;;;ACAlC,SAASC,QAAQC,gBAAgB;AACjC,SAASC,qBAAqB;AAC9B,SACEC,sBAAsBC,oBAAoBC,0BACrC;AAEP,OAAOC,SAASC,kBAAkB;AAIlC,IAAMC,eAAeC,2BAA6C,CAAC,EACjEC,QAAQC,QAAQC,QAAQC,WAAWC,mBAAmBC,MAAM,GAAGC,MAAAA,GAC9DC,QAAAA;AACD,QAAMC,QAAQC,SAAAA;AACd,QAAMC,aAAaC,cAAAA;AACnB,QAAM,EACJC,MAAMC,cAAc,UAAUC,aAAaC,SAASC,UAAU,GAAGC,UAAAA,IAC/DC,mBAAkCV,OAAOF,KAAAA;AAE7C,QAAMa,eAAe,wBAACC,UAAAA;AACpB,QAAIR,MAAM;AAERQ,YAAMC,eAAc;IACtB,OAAO;AACL,YAAMC,cAAchB,MAAM,YAAA,KAAiBc,MAAMG,cAAcC;AAE/D,YAAMC,mBAAmB,6BAAOvB,UAAUG,OAAQqB,OAAOC,KAAK,IAAIzB,MAAAA,KAAW0B,aAAaA,YAAjE;AACzB,YAAMC,2BAA2B,wBAACC,cAAcL,iBAAAA,MAAkB;AAChEV,kBAAUK,KAAAA;AACV,YAAIf,MAAM;AACRyB,sBAAYC,SAAS1B,OAAOA;QAC9B;MACF,GALiC;AAMjC,UAAI,CAACD,qBAAqBM,YAAY;AACpCU,cAAMC,eAAc;AACpB,cAAMS,cAAcL,iBAAAA;AACpB,YAAIpB,MAAM;AACRK,qBAAWsB,UAAU;YACnBV;YAAarB;YAAQD;YAAQG;UAC/B,CAAA,EAAG8B,KAAK,MAAA;AACNJ,qCAAyBC,WAAAA;UAC3B,CAAA,EAAGI,MAAM,CAACC,OAAAA;AACRC,oBAAQC,MAAM,qBAAqBf,aAAatB,QAAQG,WAAWgC,EAAAA;AACnEN,qCAAyBC,WAAAA;UAC3B,CAAA;QACF;AACAf,kBAAUK,KAAAA;MACZ,OAAO;AACLS,iCAAAA;MACF;IACF;EACF,GAhCqB;AAkCrB,SACE,sBAAA,cAACS,QAAAA;IAAO/B;IAAUF;IAAYU,SAASI;IAAcjB;IAAiB,GAAGe;KACtEL,QAAQC,gBAAgB,WACrB,sBAAA,cAAC0B,oBAAAA;IAAmBC,SAAAA;IAAQC,SAAS3B,eAAe;OACpD,MACHF,QAAQC,gBAAgB,aACrB,sBAAA,cAAC6B,sBAAAA;IAAqBF,SAAAA;IAAQG,MAAM;IAAIF,SAAS3B,eAAe;OAChE,MACHE,QAAAA;AAGP,CAAA;AAEAlB,aAAa8C,cAAc;;;ACjE3B,OAAOC,UAASC,cAAAA,mBAAkB;AAClC,SAASC,mBAAmB;AAK5B,IAAMC,aAAaC,gBAAAA,YAA6C,CAAC,EAC/DC,IAAIC,WAAWC,SAAS,GAAGC,MAAAA,GAC1BC,QAAAA;AACD,QAAMC,WAAWC,YAAAA;AACjB,QAAMC,eAAe,wBAACC,UAAAA;AACpBN,cAAUM,KAAAA;AACV,QAAIR,IAAI;AACNK,eAASL,IAAIC,SAAAA;IACf;EACF,GALqB;AAOrB,SAAO,gBAAAQ,OAAA,cAACC,cAAAA;IAAaN;IAAUF,SAASK;IAAe,GAAGJ;;AAC5D,CAAA;AAEAL,WAAWa,cAAc;;;AFfzB,IAAMC,WAAWC,gBAAAA,YAA6C,CAAC,EAAEC,IAAI,GAAGC,MAAAA,GAASC,QAAAA;AAC/E,SAAOF,KAAK,gBAAAG,OAAA,cAACC,YAAAA;IAAWJ;IAAQE;IAAW,GAAGD;OAAY,gBAAAE,OAAA,cAACE,cAAiBJ,KAAAA;AAC9E,CAAA;AAEAH,SAASQ,cAAc;","names":["React","forwardRef","Button","useTheme","useUserEvents","BusyCircularProgress","BusyLinearProgress","mergeBoxlikeStyles","React","forwardRef","ButtonExBase","forwardRef","funnel","intent","target","placement","disableUserEvents","href","props","ref","theme","useTheme","userEvents","useUserEvents","busy","busyVariant","busyOpacity","onClick","children","rootProps","mergeBoxlikeStyles","localOnClick","event","preventDefault","elementName","currentTarget","textContent","windowToNavigate","window","open","globalThis","callOnClickAndFollowHref","windowToNav","location","userClick","then","catch","ex","console","error","Button","BusyLinearProgress","rounded","opacity","BusyCircularProgress","size","displayName","React","forwardRef","useNavigate","ButtonToEx","forwardRef","to","toOptions","onClick","props","ref","navigate","useNavigate","localOnClick","event","React","ButtonExBase","displayName","ButtonEx","forwardRef","to","props","ref","React","ButtonToEx","ButtonExBase","displayName"]}
+{"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>((props, ref) => {\n  if (props.to) {\n    const { to, ...additionalProps } = props\n    return <ButtonToEx to={to} ref={ref} {...additionalProps} />\n  } else {\n    return <ButtonExBase {...props} />\n  }\n})\n\nButtonEx.displayName = 'ButtonExXYLabs'\n\nexport { ButtonEx }\n","import { Button, useTheme } from '@mui/material'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport {\n  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,\n} from '@xylabs/react-shared'\nimport type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  funnel, intent, target, placement, disableUserEvents, href, ...props\n}, ref) => {\n  const theme = useTheme()\n  const userEvents = useUserEvents()\n  const {\n    busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps\n  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)\n\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (busy) {\n      // If it is busy, do not allow href clicks\n      event.preventDefault()\n    } else {\n      const elementName = props['aria-label'] ?? event.currentTarget.textContent\n      // we do this crazy navigate thing so that we can set it up outside the promise so that safari does not block it\n      const windowToNavigate = () => (target && href) ? window.open('', target) ?? globalThis : globalThis\n      const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {\n        onClick?.(event)\n        if (href) {\n          windowToNav.location.href = href\n        }\n      }\n      if (!disableUserEvents && userEvents) {\n        event.preventDefault()\n        const windowToNav = windowToNavigate()\n        if (href) {\n          userEvents.userClick({\n            elementName, intent, funnel, placement,\n          }).then(() => {\n            callOnClickAndFollowHref(windowToNav)\n          }).catch((ex) => {\n            console.error('User event failed', elementName, funnel, placement, ex)\n            callOnClickAndFollowHref(windowToNav)\n          })\n        }\n        onClick?.(event)\n      } else {\n        callOnClickAndFollowHref()\n      }\n    }\n  }\n\n  return (\n    <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>\n      {busy && busyVariant === 'linear'\n        ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />\n        : null}\n      {busy && busyVariant === 'circular'\n        ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />\n        : null}\n      {children}\n    </Button>\n  )\n})\n\nButtonExBase.displayName = 'ButtonExBaseXYLabs'\n\nexport { ButtonExBase }\n","import type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  to, toOptions, onClick, ...props\n}, ref) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n})\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n"],"mappings":";;;;AAAA,OAAOA,UAASC,cAAAA,mBAAkB;;;ACAlC,SAASC,QAAQC,gBAAgB;AACjC,SAASC,qBAAqB;AAC9B,SACEC,sBAAsBC,oBAAoBC,0BACrC;AAEP,OAAOC,SAASC,kBAAkB;AAIlC,IAAMC,eAAeC,2BAA6C,CAAC,EACjEC,QAAQC,QAAQC,QAAQC,WAAWC,mBAAmBC,MAAM,GAAGC,MAAAA,GAC9DC,QAAAA;AACD,QAAMC,QAAQC,SAAAA;AACd,QAAMC,aAAaC,cAAAA;AACnB,QAAM,EACJC,MAAMC,cAAc,UAAUC,aAAaC,SAASC,UAAU,GAAGC,UAAAA,IAC/DC,mBAAkCV,OAAOF,KAAAA;AAE7C,QAAMa,eAAe,wBAACC,UAAAA;AACpB,QAAIR,MAAM;AAERQ,YAAMC,eAAc;IACtB,OAAO;AACL,YAAMC,cAAchB,MAAM,YAAA,KAAiBc,MAAMG,cAAcC;AAE/D,YAAMC,mBAAmB,6BAAOvB,UAAUG,OAAQqB,OAAOC,KAAK,IAAIzB,MAAAA,KAAW0B,aAAaA,YAAjE;AACzB,YAAMC,2BAA2B,wBAACC,cAAcL,iBAAAA,MAAkB;AAChEV,kBAAUK,KAAAA;AACV,YAAIf,MAAM;AACRyB,sBAAYC,SAAS1B,OAAOA;QAC9B;MACF,GALiC;AAMjC,UAAI,CAACD,qBAAqBM,YAAY;AACpCU,cAAMC,eAAc;AACpB,cAAMS,cAAcL,iBAAAA;AACpB,YAAIpB,MAAM;AACRK,qBAAWsB,UAAU;YACnBV;YAAarB;YAAQD;YAAQG;UAC/B,CAAA,EAAG8B,KAAK,MAAA;AACNJ,qCAAyBC,WAAAA;UAC3B,CAAA,EAAGI,MAAM,CAACC,OAAAA;AACRC,oBAAQC,MAAM,qBAAqBf,aAAatB,QAAQG,WAAWgC,EAAAA;AACnEN,qCAAyBC,WAAAA;UAC3B,CAAA;QACF;AACAf,kBAAUK,KAAAA;MACZ,OAAO;AACLS,iCAAAA;MACF;IACF;EACF,GAhCqB;AAkCrB,SACE,sBAAA,cAACS,QAAAA;IAAO/B;IAAUF;IAAYU,SAASI;IAAcjB;IAAiB,GAAGe;KACtEL,QAAQC,gBAAgB,WACrB,sBAAA,cAAC0B,oBAAAA;IAAmBC,SAAAA;IAAQC,SAAS3B,eAAe;OACpD,MACHF,QAAQC,gBAAgB,aACrB,sBAAA,cAAC6B,sBAAAA;IAAqBF,SAAAA;IAAQG,MAAM;IAAIF,SAAS3B,eAAe;OAChE,MACHE,QAAAA;AAGP,CAAA;AAEAlB,aAAa8C,cAAc;;;ACjE3B,OAAOC,UAASC,cAAAA,mBAAkB;AAClC,SAASC,mBAAmB;AAK5B,IAAMC,aAAaC,gBAAAA,YAA6C,CAAC,EAC/DC,IAAIC,WAAWC,SAAS,GAAGC,MAAAA,GAC1BC,QAAAA;AACD,QAAMC,WAAWC,YAAAA;AACjB,QAAMC,eAAe,wBAACC,UAAAA;AACpBN,cAAUM,KAAAA;AACV,QAAIR,IAAI;AACNK,eAASL,IAAIC,SAAAA;IACf;EACF,GALqB;AAOrB,SAAO,gBAAAQ,OAAA,cAACC,cAAAA;IAAaN;IAAUF,SAASK;IAAe,GAAGJ;;AAC5D,CAAA;AAEAL,WAAWa,cAAc;;;AFfzB,IAAMC,WAAWC,gBAAAA,YAA6C,CAACC,OAAOC,QAAAA;AACpE,MAAID,MAAME,IAAI;AACZ,UAAM,EAAEA,IAAI,GAAGC,gBAAAA,IAAoBH;AACnC,WAAO,gBAAAI,OAAA,cAACC,YAAAA;MAAWH;MAAQD;MAAW,GAAGE;;EAC3C,OAAO;AACL,WAAO,gBAAAC,OAAA,cAACE,cAAiBN,KAAAA;EAC3B;AACF,CAAA;AAEAF,SAASS,cAAc;","names":["React","forwardRef","Button","useTheme","useUserEvents","BusyCircularProgress","BusyLinearProgress","mergeBoxlikeStyles","React","forwardRef","ButtonExBase","forwardRef","funnel","intent","target","placement","disableUserEvents","href","props","ref","theme","useTheme","userEvents","useUserEvents","busy","busyVariant","busyOpacity","onClick","children","rootProps","mergeBoxlikeStyles","localOnClick","event","preventDefault","elementName","currentTarget","textContent","windowToNavigate","window","open","globalThis","callOnClickAndFollowHref","windowToNav","location","userClick","then","catch","ex","console","error","Button","BusyLinearProgress","rounded","opacity","BusyCircularProgress","size","displayName","React","forwardRef","useNavigate","ButtonToEx","forwardRef","to","toOptions","onClick","props","ref","navigate","useNavigate","localOnClick","event","React","ButtonExBase","displayName","ButtonEx","forwardRef","props","ref","to","additionalProps","React","ButtonToEx","ButtonExBase","displayName"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-button",
-  "version": "5.1.5",
+  "version": "5.2.0",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -37,15 +37,15 @@
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/react-pixel": "^5.1.5",
-    "@xylabs/react-shared": "^5.1.5",
+    "@xylabs/react-pixel": "^5.2.0",
+    "@xylabs/react-shared": "^5.2.0",
     "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@mui/material": "^6.1.3",
     "@storybook/react": "^8.3.5",
     "@types/react": "^18.3.11",
-    "@xylabs/react-flexbox": "^5.1.5",
+    "@xylabs/react-flexbox": "^5.2.0",
     "@xylabs/ts-scripts-yarn3": "^4.2.1",
     "@xylabs/tsconfig-react": "^4.2.1",
     "react": "^18.3.1",

package/src/components/ButtonEx.tsx

@@ -4,8 +4,13 @@ import { ButtonExBase } from './ButtonExBase.tsx'
 import type { ButtonExProps } from './ButtonExProps.tsx'
 import { ButtonToEx } from './ButtonExTo.tsx'
 
-const ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>(({ to, ...props }, ref) => {
-  return to ? <ButtonToEx to={to} ref={ref} {...props} /> : <ButtonExBase {...props} />
+const ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>((props, ref) => {
+  if (props.to) {
+    const { to, ...additionalProps } = props
+    return <ButtonToEx to={to} ref={ref} {...additionalProps} />
+  } else {
+    return <ButtonExBase {...props} />
+  }
 })
 
 ButtonEx.displayName = 'ButtonExXYLabs'

package/src/components/ButtonExProps.tsx

@@ -2,14 +2,30 @@ import type { ButtonProps } from '@mui/material'
 import type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'
 import type { NavigateOptions, To } from 'react-router-dom'
 
-interface ButtonExProps extends Omit<ButtonProps, 'ref'>, BoxlikeComponentProps, BusyProps {
+export interface ButtonBaseExProps extends Omit<ButtonProps, 'ref' | 'href'>, BoxlikeComponentProps, BusyProps {
   disableUserEvents?: boolean
   funnel?: string
   intent?: string
   placement?: string
   target?: string
-  to?: To
+}
+
+export interface ButtonToExProps extends ButtonBaseExProps {
+  href?: never
+  to: To
   toOptions?: NavigateOptions
 }
 
-export type { ButtonExProps }
+export interface ButtonHrefExProps extends ButtonBaseExProps {
+  href: string
+  to?: never
+  toOptions?: never
+}
+
+export interface ButtonClickExProps extends ButtonBaseExProps {
+  href?: never
+  to?: never
+  toOptions?: never
+}
+
+export type ButtonExProps = ButtonToExProps | ButtonHrefExProps | ButtonClickExProps