diff --git a/packages/react/src/DataTable/useTable.ts b/packages/react/src/DataTable/useTable.ts index a1040d8eb05..7fc8e2a7c32 100644 --- a/packages/react/src/DataTable/useTable.ts +++ b/packages/react/src/DataTable/useTable.ts @@ -3,6 +3,7 @@ import type {Column} from './column' import type {UniqueRow} from './row' import {DEFAULT_SORT_DIRECTION, SortDirection, transition, strategies} from './sorting' import type {ObjectPathValue} from './utils' +import {warning} from '../utils/warning' interface TableConfig { columns: Array> @@ -231,22 +232,18 @@ function getInitialSortState( }) if (column === undefined) { - if (__DEV__) { - // eslint-disable-next-line no-console - console.warn( - `Warning: Unable to find a column with id or field set to: ${initialSortColumn}. Please provide a value to \`initialSortColumn\` which corresponds to a \`id\` or \`field\` value in a column.`, - ) - } + warning( + true, + `Warning: Unable to find a column with id or field set to: ${initialSortColumn}. Please provide a value to \`initialSortColumn\` which corresponds to a \`id\` or \`field\` value in a column.`, + ) return null } if (column.sortBy === false || column.sortBy === undefined) { - if (__DEV__) { - // eslint-disable-next-line no-console - console.warn( - `Warning: The column specified by initialSortColumn={${initialSortColumn}} is not sortable. Please set \`sortBy\` to true or provide a sort strategy.`, - ) - } + warning( + true, + `Warning: The column specified by initialSortColumn={${initialSortColumn}} is not sortable. Please set \`sortBy\` to true or provide a sort strategy.`, + ) return null } @@ -262,23 +259,19 @@ function getInitialSortState( }) if (!column) { - if (__DEV__) { - // eslint-disable-next-line no-console - console.warn( - `Warning: An initialSortDirection value was provided but no columns are sortable. Please set \`sortBy\` to true or provide a sort strategy to a column.`, - ) - } + warning( + true, + `Warning: An initialSortDirection value was provided but no columns are sortable. Please set \`sortBy\` to true or provide a sort strategy to a column.`, + ) return null } const id = column.id ?? column.field if (id === undefined) { - if (__DEV__) { - // eslint-disable-next-line no-console - console.warn( - `Warning: Unable to find an \`id\` or \`field\` for the column: ${column}. Please set one of these properties on the column.`, - ) - } + warning( + true, + `Warning: Unable to find an \`id\` or \`field\` for the column: ${column}. Please set one of these properties on the column.`, + ) return null } diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index 10afa57107c..9f5dfcf9f7a 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx @@ -22,6 +22,7 @@ import {isValidElementType} from 'react-is' import {useAnnouncements} from './useAnnouncements' import {clsx} from 'clsx' import {useVirtualizer} from '@tanstack/react-virtual' +import {warning} from '../utils/warning' const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8} @@ -162,15 +163,11 @@ export function FilteredActionList({ virtualized = false, ...listProps }: FilteredActionListProps): JSX.Element { - if (__DEV__) { - if (virtualized && groupMetadata?.length) { - // eslint-disable-next-line no-console - console.warn( - 'FilteredActionList: `virtualized` has no effect when `groupMetadata` is provided. ' + - 'Grouped lists are rendered without virtualization.', - ) - } - } + warning( + virtualized && Boolean(groupMetadata?.length), + 'FilteredActionList: `virtualized` has no effect when `groupMetadata` is provided. ' + + 'Grouped lists are rendered without virtualization.', + ) // Virtualization is disabled when groups are present — grouped lists render // normally regardless of the `virtualized` prop. diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx index 474a49ede24..fb76b364b05 100644 --- a/packages/react/src/Heading/Heading.tsx +++ b/packages/react/src/Heading/Heading.tsx @@ -4,6 +4,7 @@ import {useRefObjectAsForwardedRef} from '../hooks' import type {ComponentProps} from '../utils/types' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classes from './Heading.module.css' +import {warning} from '../utils/warning' type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' @@ -16,21 +17,12 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props} const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) - if (__DEV__) { - /** - * The Linter yells because it thinks this conditionally calls an effect, - * but since this is a compile-time flag and not a runtime conditional - * this is safe, and ensures the entire effect is kept out of prod builds - * shaving precious bytes from the output, and avoiding mounting a noop effect - */ - // eslint-disable-next-line react-hooks/rules-of-hooks - useEffect(() => { - if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) { - // eslint-disable-next-line no-console - console.warn('This Heading component should be an instanceof of h1-h6') - } - }, [innerRef]) - } + useEffect(() => { + warning( + innerRef.current != null && !(innerRef.current instanceof HTMLHeadingElement), + 'This Heading component should be an instanceof of h1-h6', + ) + }, [innerRef]) return }) as PolymorphicForwardRefComponent diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index 8efa4501af1..0b7f3ff71ca 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -5,6 +5,7 @@ import {clsx} from 'clsx' import sharedClasses from '../Checkbox/shared.module.css' import classes from './Radio.module.css' import type {WithSlotMarker} from '../utils/types' +import {warning} from '../utils/warning' export type RadioProps = { /** @@ -60,12 +61,10 @@ const Radio = React.forwardRef( } const name = nameProp || radioGroupContext?.name - if (!name && !ariaHidden) { - // eslint-disable-next-line no-console - console.warn( - 'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop', - ) - } + warning( + !name && !ariaHidden, + 'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop', + ) return ( > = ({ return React.isValidElement(childArg) ? childArg.props['aria-label'] : null } - if (!ariaLabel && !ariaLabelledby) { - // eslint-disable-next-line no-console - console.warn( - 'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies', - ) - } + warning( + !ariaLabel && !ariaLabelledby, + 'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies', + ) // Check if dropdown variant is used at any breakpoint const responsiveVariant = typeof variant === 'object' ? variant : undefined diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx index 744d71f2237..721289e91dc 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx @@ -10,6 +10,7 @@ import {useSlots} from '../../../hooks/useSlots' import classes from './CheckboxOrRadioGroup.module.css' import {clsx} from 'clsx' import {isSlot} from '../../../utils/is-slot' +import {warning} from '../../../utils/warning' export type CheckboxOrRadioGroupProps = { /** Class name for custom styling */ @@ -67,12 +68,10 @@ const CheckboxOrRadioGroup: React.FC( ) => { const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className)} - if ((icon && !ariaLabel) || (!children && !ariaLabel)) { - // eslint-disable-next-line no-console - console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology') - } + warning( + (icon && !ariaLabel) || (!children && !ariaLabel), + 'Use the `aria-label` prop to provide an accessible label for assistive technology', + ) const accessibleLabel = ariaLabel ? {'aria-label': ariaLabel} diff --git a/packages/react/src/utils/deprecate.tsx b/packages/react/src/utils/deprecate.tsx index 70a91ae298d..dfc8f3bb55b 100644 --- a/packages/react/src/utils/deprecate.tsx +++ b/packages/react/src/utils/deprecate.tsx @@ -1,4 +1,5 @@ import {useRef, useCallback} from 'react' +import {warn} from './warning' type DeprecationType = {name: string; message: string; version: string} @@ -55,8 +56,7 @@ export class Deprecations { static deprecate({name, message, version}: DeprecationType) { const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}` - // eslint-disable-next-line no-console - console.warn(msg) + warn(msg) this.get().deprecations.push({name, message, version}) }