Other actions : undefined}
+ >
{defaultAction && renderDefaultAction(defaultAction)}
{secondaryActions && renderSecondaryActions(secondaryActions)}
{secondaryOverflowMenuItems &&
@@ -286,7 +288,7 @@ const DrawerHandle = ({
toggleDisplay,
isOpen,
}: DrawerHandleProps): JSX.Element | null => {
- const showDrawer = defaultAction || secondaryActions || secondaryOverflowMenuItems
+ const showDrawer = defaultAction ?? secondaryActions ?? secondaryOverflowMenuItems
if (primaryAction) {
// If the primary action is a menu
if (isMenuGroupNotButton(primaryAction)) {
@@ -446,9 +448,9 @@ export const MobileActions = ({
toggleDisplay={toggleDisplay}
isOpen={isOpen}
/>
- {(defaultAction ||
- secondaryActions ||
- secondaryOverflowMenuItems ||
+ {(defaultAction ??
+ secondaryActions ??
+ secondaryOverflowMenuItems ??
(primaryAction && isMenuGroupNotButton(primaryAction))) && (
{
const reactId = useId()
- const id = propsId || reactId
+ const id = propsId ?? reactId
return (
): JSX.Element => {
- const disableActions = props.disabled || props.working
+ const disableActions = props.disabled ?? props.working
const passedInProps: React.DetailedHTMLProps<
React.ButtonHTMLAttributes,
HTMLButtonElement
@@ -247,9 +249,8 @@ const renderButton = (props: RenderProps, ref: Ref): JSX.Elem
...getCustomProps(props),
}
- // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
+ // @ts-expect-error we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
// Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
- // @ts-ignore
const { focusableProps } = useFocusable(passedInProps, ref)
return (
@@ -260,7 +261,7 @@ const renderButton = (props: RenderProps, ref: Ref): JSX.Elem
aria-describedby={
props['aria-describedby'] === null
? undefined
- : props['aria-describedby'] || focusableProps['aria-describedby']
+ : (props['aria-describedby'] ?? focusableProps['aria-describedby'])
}
// Unset this because the one defined in buttonProps shows
// focus-visible styles on click
@@ -291,9 +292,8 @@ const renderLink = (props: RenderProps, ref: Ref): JSX.Elemen
...getCustomProps(props),
}
- // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
+ // @ts-expect-error we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
// Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
- // @ts-ignore
const { focusableProps } = useFocusable(passedInProps, ref)
return (
@@ -303,7 +303,7 @@ const renderLink = (props: RenderProps, ref: Ref): JSX.Elemen
aria-describedby={
props['aria-describedby'] === null
? undefined
- : props['aria-describedby'] || focusableProps['aria-describedby']
+ : (props['aria-describedby'] ?? focusableProps['aria-describedby'])
}
// Unset this because the one defined in linkProps shows
// focus-visible styles on click
@@ -320,8 +320,8 @@ const buttonClass = (props: RenderProps): string => {
return classnames(
styles.button,
isDefault && styles.default,
- // @ts-ignore
- (props.disabled || props['aria-disabled']) && styles.disabled,
+ // @ts-expect-error aria-disabled exists in props
+ (props.disabled ?? props['aria-disabled']) && styles.disabled,
props.primary && styles.primary,
props.destructive && styles.destructive,
props.secondary && styles.secondary,
@@ -329,7 +329,7 @@ const buttonClass = (props: RenderProps): string => {
props.reversed && styles.reversed,
props.iconButton && styles.iconButton,
props.working && styles.working,
- (props.directionalLink || props.paginationLink) && styles.circleButton,
+ (props.directionalLink ?? props.paginationLink) && styles.circleButton,
props.directionalLink && styles.directionalLink,
props.paginationLink && styles.paginationLink,
props.isActive && styles.isPaginationLinkActive,
diff --git a/packages/components/src/__actions__/Button/v3/Button.tsx b/packages/components/src/__actions__/Button/v3/Button.tsx
index 92fe90ab697..55e51190aa7 100644
--- a/packages/components/src/__actions__/Button/v3/Button.tsx
+++ b/packages/components/src/__actions__/Button/v3/Button.tsx
@@ -100,3 +100,5 @@ export const Button = forwardRef(
)
},
)
+
+Button.displayName = 'Button'
diff --git a/packages/components/src/__actions__/Menu/v3/Menu.tsx b/packages/components/src/__actions__/Menu/v3/Menu.tsx
index ebe90c4235a..c7ccbf341a6 100644
--- a/packages/components/src/__actions__/Menu/v3/Menu.tsx
+++ b/packages/components/src/__actions__/Menu/v3/Menu.tsx
@@ -16,3 +16,5 @@ export const Menu = forwardRef(
),
)
+
+Menu.displayName = 'Menu'
diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
index 5fda3894802..a1a8698940a 100644
--- a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
+++ b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
@@ -15,7 +15,7 @@ export type MenuItemProps = RACMenuItemProps & {
*/
export const MenuItem = forwardRef(
({ className, icon, children, textValue, ...props }, ref): JSX.Element => {
- const determinedTextValue = textValue || (typeof children === 'string' ? children : undefined)
+ const determinedTextValue = textValue ?? (typeof children === 'string' ? children : undefined)
return (
(
)
},
)
+
+MenuItem.displayName = 'MenuItem'
diff --git a/packages/components/src/__future__/Select/Select.tsx b/packages/components/src/__future__/Select/Select.tsx
index 3d7d55ad542..d117fd8bf38 100644
--- a/packages/components/src/__future__/Select/Select.tsx
+++ b/packages/components/src/__future__/Select/Select.tsx
@@ -97,7 +97,8 @@ export const Select =