@xylabs/react-button 6.0.0-rc.1 → 6.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,10 @@
1
1
  import React from 'react';
2
2
  import type { ButtonExProps } from './ButtonExProps.tsx';
3
- declare const ButtonEx: React.ForwardRefExoticComponent<ButtonExProps & React.RefAttributes<HTMLButtonElement>>;
3
+ declare const ButtonEx: {
4
+ ({ ref, ...props }: ButtonExProps & {
5
+ ref?: React.RefObject<HTMLButtonElement | null>;
6
+ }): import("react/jsx-runtime").JSX.Element;
7
+ displayName: string;
8
+ };
4
9
  export { ButtonEx };
5
10
  //# sourceMappingURL=ButtonEx.d.ts.map
@@ -1 +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,yFAOZ,CAAA;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAA"}
1
+ {"version":3,"file":"ButtonEx.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonEx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAGxD,QAAA,MAAM,QAAQ;wBAAuB,aAAa,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;KAAE;;CAOvG,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
@@ -1,5 +1,10 @@
1
1
  import React from 'react';
2
2
  import type { ButtonExProps } from './ButtonExProps.tsx';
3
- declare const ButtonExBase: React.ForwardRefExoticComponent<ButtonExProps & React.RefAttributes<HTMLButtonElement>>;
3
+ declare const ButtonExBase: {
4
+ ({ ref, funnel, intent, target, placement, disableUserEvents, href, ...props }: ButtonExProps & {
5
+ ref?: React.RefObject<HTMLButtonElement | null>;
6
+ }): import("react/jsx-runtime").JSX.Element;
7
+ displayName: string;
8
+ };
4
9
  export { ButtonExBase };
5
10
  //# sourceMappingURL=ButtonExBase.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonExBase.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,YAAY,yFAsDhB,CAAA;AAIF,OAAO,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"ButtonExBase.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,YAAY;oFAEf,aAAa,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;KAAE;;CAoDrE,CAAA;AAID,OAAO,EAAE,YAAY,EAAE,CAAA"}
@@ -1,5 +1,10 @@
1
1
  import React from 'react';
2
2
  import type { ButtonExProps } from './ButtonExProps.tsx';
3
- declare const ButtonToEx: React.ForwardRefExoticComponent<ButtonExProps & React.RefAttributes<HTMLButtonElement>>;
3
+ declare const ButtonToEx: {
4
+ ({ ref, to, toOptions, onClick, ...props }: ButtonExProps & {
5
+ ref?: React.RefObject<HTMLButtonElement | null>;
6
+ }): import("react/jsx-runtime").JSX.Element;
7
+ displayName: string;
8
+ };
4
9
  export { ButtonToEx };
5
10
  //# sourceMappingURL=ButtonExTo.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonExTo.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExTo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,UAAU,yFAYd,CAAA;AAIF,OAAO,EAAE,UAAU,EAAE,CAAA"}
1
+ {"version":3,"file":"ButtonExTo.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExTo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,UAAU;gDAEb,aAAa,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;KAAE;;CAUrE,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}
@@ -2,14 +2,14 @@ var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
 
4
4
  // src/components/ButtonEx.tsx
5
- import React3, { forwardRef as forwardRef3 } from "react";
5
+ import React3 from "react";
6
6
 
7
7
  // src/components/ButtonExBase.tsx
8
8
  import { Button, useTheme } from "@mui/material";
9
9
  import { useUserEvents } from "@xylabs/react-pixel";
10
10
  import { BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles } from "@xylabs/react-shared";
11
- import React, { forwardRef } from "react";
12
- var ButtonExBase = /* @__PURE__ */ forwardRef(({ funnel, intent, target, placement, disableUserEvents, href, ...props }, ref) => {
11
+ import React from "react";
12
+ var ButtonExBase = /* @__PURE__ */ __name(({ ref, funnel, intent, target, placement, disableUserEvents, href, ...props }) => {
13
13
  const theme = useTheme();
14
14
  const userEvents = useUserEvents();
15
15
  const { busy, busyVariant = "linear", busyOpacity, onClick, children, ...rootProps } = mergeBoxlikeStyles(theme, props);
@@ -61,13 +61,13 @@ var ButtonExBase = /* @__PURE__ */ forwardRef(({ funnel, intent, target, placeme
61
61
  size: 24,
62
62
  opacity: busyOpacity ?? 0.5
63
63
  }) : null, children);
64
- });
64
+ }, "ButtonExBase");
65
65
  ButtonExBase.displayName = "ButtonExBaseXYLabs";
66
66
 
67
67
  // src/components/ButtonExTo.tsx
68
- import React2, { forwardRef as forwardRef2 } from "react";
68
+ import React2 from "react";
69
69
  import { useNavigate } from "react-router-dom";
70
- var ButtonToEx = /* @__PURE__ */ forwardRef2(({ to, toOptions, onClick, ...props }, ref) => {
70
+ var ButtonToEx = /* @__PURE__ */ __name(({ ref, to, toOptions, onClick, ...props }) => {
71
71
  const navigate = useNavigate();
72
72
  const localOnClick = /* @__PURE__ */ __name((event) => {
73
73
  onClick?.(event);
@@ -80,11 +80,11 @@ var ButtonToEx = /* @__PURE__ */ forwardRef2(({ to, toOptions, onClick, ...props
80
80
  onClick: localOnClick,
81
81
  ...props
82
82
  });
83
- });
83
+ }, "ButtonToEx");
84
84
  ButtonToEx.displayName = "ButtonToExXYLabs";
85
85
 
86
86
  // src/components/ButtonEx.tsx
87
- var ButtonEx = /* @__PURE__ */ forwardRef3((props, ref) => {
87
+ var ButtonEx = /* @__PURE__ */ __name(({ ref, ...props }) => {
88
88
  if (props.to) {
89
89
  const { to, ...additionalProps } = props;
90
90
  return /* @__PURE__ */ React3.createElement(ButtonToEx, {
@@ -95,7 +95,7 @@ var ButtonEx = /* @__PURE__ */ forwardRef3((props, ref) => {
95
95
  } else {
96
96
  return /* @__PURE__ */ React3.createElement(ButtonExBase, props);
97
97
  }
98
- });
98
+ }, "ButtonEx");
99
99
  ButtonEx.displayName = "ButtonExXYLabs";
100
100
 
101
101
  // src/components/ButtonExProps.tsx
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx","../../src/components/ButtonExProps.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 void navigate(to, toOptions)\n }\n }\n\n return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n})\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n","import type { ButtonProps } from '@mui/material'\nimport type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'\nimport type { NavigateOptions, To } from 'react-router-dom'\n\nexport interface ButtonOnlyHrefProps {\n href?: string\n to?: never\n toOptions?: never\n}\n\nexport interface ButtonOnlyToProps {\n href?: never\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport interface ButtonNoToOrHrefProps {\n href?: never\n to?: never\n toOptions?: never\n}\n\nexport type ButtonHrefOrToOrNoProps = ButtonOnlyHrefProps | ButtonOnlyToProps | ButtonNoToOrHrefProps\n\nexport interface ButtonHrefAndToProps {\n href?: string\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport const asButtonHrefOrToProps = (props: ButtonHrefAndToProps): ButtonHrefOrToOrNoProps => {\n if (props.href && (props.to || props.toOptions)) {\n throw new Error('ButtonExProps: cannot have both href and to')\n }\n return props.href ? { href: props.href } : props.to ? { to: props.to, toOptions: props.toOptions } : {}\n}\n\nexport interface ButtonBaseExProps extends Omit<ButtonProps, 'ref' | 'href'>, BoxlikeComponentProps, BusyProps {\n disableUserEvents?: boolean\n funnel?: string\n intent?: string\n placement?: string\n target?: string\n}\n\nexport type ButtonExProps = ButtonBaseExProps & ButtonHrefOrToOrNoProps\n"],"mappings":"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","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","asButtonHrefOrToProps","props","href","to","toOptions","Error"]}
1
+ {"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx","../../src/components/ButtonExProps.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = ({ ref, ...props }: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\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 from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = ({\n ref, funnel, intent, target, placement, disableUserEvents, href, ...props\n}: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\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 from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = ({\n ref, to, toOptions, onClick, ...props\n}: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\n const navigate = useNavigate()\n const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event)\n if (to) {\n void navigate(to, toOptions)\n }\n }\n\n return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n}\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n","import type { ButtonProps } from '@mui/material'\nimport type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'\nimport type { NavigateOptions, To } from 'react-router-dom'\n\nexport interface ButtonOnlyHrefProps {\n href?: string\n to?: never\n toOptions?: never\n}\n\nexport interface ButtonOnlyToProps {\n href?: never\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport interface ButtonNoToOrHrefProps {\n href?: never\n to?: never\n toOptions?: never\n}\n\nexport type ButtonHrefOrToOrNoProps = ButtonOnlyHrefProps | ButtonOnlyToProps | ButtonNoToOrHrefProps\n\nexport interface ButtonHrefAndToProps {\n href?: string\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport const asButtonHrefOrToProps = (props: ButtonHrefAndToProps): ButtonHrefOrToOrNoProps => {\n if (props.href && (props.to || props.toOptions)) {\n throw new Error('ButtonExProps: cannot have both href and to')\n }\n return props.href ? { href: props.href } : props.to ? { to: props.to, toOptions: props.toOptions } : {}\n}\n\nexport interface ButtonBaseExProps extends Omit<ButtonProps, 'ref' | 'href'>, BoxlikeComponentProps, BusyProps {\n disableUserEvents?: boolean\n funnel?: string\n intent?: string\n placement?: string\n target?: string\n}\n\nexport type ButtonExProps = ButtonBaseExProps & ButtonHrefOrToOrNoProps\n"],"mappings":"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","names":["React","Button","useTheme","useUserEvents","BusyCircularProgress","BusyLinearProgress","mergeBoxlikeStyles","React","ButtonExBase","ref","funnel","intent","target","placement","disableUserEvents","href","props","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","useNavigate","ButtonToEx","ref","to","toOptions","onClick","props","navigate","useNavigate","localOnClick","event","React","ButtonExBase","displayName","ButtonEx","ref","props","to","additionalProps","React","ButtonToEx","ButtonExBase","displayName","asButtonHrefOrToProps","props","href","to","toOptions","Error"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xylabs/react-button",
3
- "version": "6.0.0-rc.1",
3
+ "version": "6.0.0-rc.2",
4
4
  "description": "Common React library for all XY Labs projects that use React",
5
5
  "keywords": [
6
6
  "utility",
@@ -37,16 +37,16 @@
37
37
  "packages/*"
38
38
  ],
39
39
  "dependencies": {
40
- "@xylabs/react-pixel": "^6.0.0-rc.1",
41
- "@xylabs/react-shared": "^6.0.0-rc.1",
40
+ "@xylabs/react-pixel": "^6.0.0-rc.2",
41
+ "@xylabs/react-shared": "^6.0.0-rc.2",
42
42
  "react-router-dom": "^7.3.0"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@mui/material": "^6.4.7",
46
46
  "@storybook/react": "^8.6.4",
47
47
  "@types/react": "^19.0.10",
48
- "@xylabs/react-flexbox": "^6.0.0-rc.1",
49
- "@xylabs/react-pixel": "^6.0.0-rc.1",
48
+ "@xylabs/react-flexbox": "^6.0.0-rc.2",
49
+ "@xylabs/react-pixel": "^6.0.0-rc.2",
50
50
  "@xylabs/ts-scripts-yarn3": "^5.1.14",
51
51
  "@xylabs/tsconfig-react": "^5.1.14",
52
52
  "react": "^19.0.0",
@@ -1,17 +1,17 @@
1
- import React, { forwardRef } from 'react'
1
+ import React from 'react'
2
2
 
3
3
  import { ButtonExBase } from './ButtonExBase.tsx'
4
4
  import type { ButtonExProps } from './ButtonExProps.tsx'
5
5
  import { ButtonToEx } from './ButtonExTo.tsx'
6
6
 
7
- const ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>((props, ref) => {
7
+ const ButtonEx = ({ ref, ...props }: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
8
8
  if (props.to) {
9
9
  const { to, ...additionalProps } = props
10
10
  return <ButtonToEx to={to} ref={ref} {...additionalProps} />
11
11
  } else {
12
12
  return <ButtonExBase {...props} />
13
13
  }
14
- })
14
+ }
15
15
 
16
16
  ButtonEx.displayName = 'ButtonExXYLabs'
17
17
 
@@ -4,13 +4,13 @@ import {
4
4
  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,
5
5
  } from '@xylabs/react-shared'
6
6
  import type { MouseEvent } from 'react'
7
- import React, { forwardRef } from 'react'
7
+ import React from 'react'
8
8
 
9
9
  import type { ButtonExProps } from './ButtonExProps.tsx'
10
10
 
11
- const ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({
12
- funnel, intent, target, placement, disableUserEvents, href, ...props
13
- }, ref) => {
11
+ const ButtonExBase = ({
12
+ ref, funnel, intent, target, placement, disableUserEvents, href, ...props
13
+ }: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
14
14
  const theme = useTheme()
15
15
  const userEvents = useUserEvents()
16
16
  const {
@@ -62,7 +62,7 @@ const ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({
62
62
  {children}
63
63
  </Button>
64
64
  )
65
- })
65
+ }
66
66
 
67
67
  ButtonExBase.displayName = 'ButtonExBaseXYLabs'
68
68
 
@@ -1,13 +1,13 @@
1
1
  import type { MouseEvent } from 'react'
2
- import React, { forwardRef } from 'react'
2
+ import React from 'react'
3
3
  import { useNavigate } from 'react-router-dom'
4
4
 
5
5
  import { ButtonExBase } from './ButtonExBase.tsx'
6
6
  import type { ButtonExProps } from './ButtonExProps.tsx'
7
7
 
8
- const ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({
9
- to, toOptions, onClick, ...props
10
- }, ref) => {
8
+ const ButtonToEx = ({
9
+ ref, to, toOptions, onClick, ...props
10
+ }: ButtonExProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
11
11
  const navigate = useNavigate()
12
12
  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
13
13
  onClick?.(event)
@@ -17,7 +17,7 @@ const ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({
17
17
  }
18
18
 
19
19
  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />
20
- })
20
+ }
21
21
 
22
22
  ButtonToEx.displayName = 'ButtonToExXYLabs'
23
23