From df532c32b6fcb53199a919e8741a02d80ce7e1d4 Mon Sep 17 00:00:00 2001 From: Cassandra Tam Date: Mon, 2 Dec 2024 15:47:20 +1100 Subject: [PATCH] style: manually fix easy linting errors --- docs/.storybook/preview.tsx | 2 +- .../DocsContainer/BackToTop/BackToTop.tsx | 2 +- .../DocsContainer/DefaultDocsContainer.tsx | 3 +-- docs/tsconfig.json | 3 ++- .../codemods/upgradeIconV1/transformIcon.ts | 8 ++++--- .../codemods/utils/getKaioTagName.ts | 2 +- packages/components/src/Avatar/Avatar.tsx | 2 +- .../Calendar/CalendarRange/CalendarRange.tsx | 4 ++-- .../CalendarSingle/CalendarSingle.tsx | 2 +- .../LegacyCalendarRange.tsx | 2 +- .../src/Checkbox/Checkbox/Checkbox.tsx | 2 +- .../Checkbox/CheckboxField/CheckboxField.tsx | 3 ++- .../Checkbox/CheckboxGroup/CheckboxGroup.tsx | 3 ++- .../Collapsible/Collapsible/Collapsible.tsx | 3 ++- .../components/src/DatePicker/DatePicker.tsx | 5 +++-- .../DateRangePicker/DateRangePicker.spec.tsx | 2 +- .../src/DateRangePicker/DateRangePicker.tsx | 10 +++++---- .../utils/formatDateRangeValue.spec.ts | 4 ++-- .../components/src/ErrorPage/ErrorPage.tsx | 6 ++--- .../components/src/Filter/Filter/Filter.tsx | 2 +- .../FilterBarDatePicker.tsx | 2 +- .../FilterBarMultiSelect.tsx | 2 +- .../FilterBarSelect/FilterBarSelect.tsx | 2 +- .../DateInputField/DateInputField.tsx | 2 +- .../FilterDatePickerField.tsx | 2 +- .../filterDatePickerFieldReducer.tsx | 2 +- .../FilterDateRangePickerField.tsx | 6 ++--- .../filterDateRangePickerFieldReducer.tsx | 5 ++--- .../_docs/FilterMultiSelect.stories.tsx | 2 +- .../MenuTriggerProvider.tsx | 2 +- .../SelectionProvider.spec.tsx | 2 +- .../ClearButton/ClearButton.tsx | 3 ++- .../Filter/FilterSelect/FilterSelect.spec.tsx | 4 ++-- .../src/Filter/FilterSelect/FilterSelect.tsx | 2 +- .../src/GuidanceBlock/GuidanceBlock.spec.tsx | 3 +-- packages/components/src/Heading/Heading.tsx | 2 +- packages/components/src/Icon/bin/wrapSVGs.ts | 2 +- .../BrandMomentCaptureIntro.tsx | 2 +- .../src/Illustration/Scene/Scene.tsx | 16 +++++++------- .../src/Input/InputRange/InputRange.tsx | 4 ++-- .../src/Input/InputSearch/InputSearch.tsx | 2 +- .../LikertScaleLegacy/LikertScaleLegacy.tsx | 8 +++---- .../utils/determineSelectionFromKeyPress.ts | 4 ++-- .../ConfirmationModal/ConfirmationModal.tsx | 2 +- .../src/MultiSelect/MultiSelect.tsx | 3 ++- .../_docs/Popover.stickersheet.stories.tsx | 2 +- ...nlineNotification.stickersheet.stories.tsx | 2 +- .../ToastNotification/ToastNotification.tsx | 4 ++-- .../NotificationHeading.tsx | 6 ++--- .../src/Radio/RadioField/RadioField.tsx | 4 +++- .../src/Radio/RadioGroup/RadioGroup.tsx | 3 ++- .../RichTextEditor/RichTextEditor.spec.tsx | 2 +- .../RichTextEditor/RichTextEditor.tsx | 8 +++---- .../RichTextEditor/RichTextEditor/schema.ts | 2 +- .../RichTextEditor/utils/controlmap.tsx | 8 +++---- .../RichTextEditor/utils/keymap.ts | 6 ++--- .../utils/commands/fixtures/helpers.ts | 2 +- .../utils/commands/fixtures/test-state.ts | 3 +-- .../utils/commands/getMarkAttrs.ts | 2 +- .../utils/commands/markIsActive.ts | 2 +- .../utils/core/createRichTextEditor.spec.ts | 2 +- .../utils/core/createRichTextEditor.ts | 8 +++---- .../core/hooks/useRichTextEditor.spec.tsx | 2 +- .../src/RichTextEditor/utils/core/types.ts | 2 +- .../utils/plugins/LinkManager/LinkManager.tsx | 2 +- .../components/LinkModal/LinkModal.tsx | 2 +- .../components/LinkPopover/LinkPopover.tsx | 2 +- .../utils/plugins/LinkManager/types.ts | 2 +- .../src/RichTextEditor/utils/schema/marks.ts | 2 +- .../src/RichTextEditor/utils/schema/nodes.ts | 2 +- packages/components/src/Select/Select.tsx | 20 +++++++++-------- packages/components/src/Slider/Slider.tsx | 3 ++- .../DropdownButton/DropdownButton.tsx | 2 +- packages/components/src/Table/Table.tsx | 2 +- .../components/src/Tabs/subcomponents/Tab.tsx | 2 +- packages/components/src/Text/Text.tsx | 2 +- packages/components/src/TextArea/TextArea.tsx | 7 +++--- .../src/TextAreaField/TextAreaField.tsx | 3 ++- .../components/src/TextField/TextField.tsx | 3 ++- .../subcomponents/GenericTile/GenericTile.tsx | 4 ++-- .../src/TitleBlockZen/TitleBlockZen.tsx | 12 +++++----- .../subcomponents/MainActions.tsx | 11 ++++------ .../subcomponents/MobileActions.tsx | 18 ++++++++------- .../components/src/TitleBlockZen/utils.ts | 2 +- .../ToggleSwitchField/ToggleSwitchField.tsx | 2 +- .../Button/v1/GenericButton/GenericButton.tsx | 22 +++++++++---------- .../src/__actions__/Button/v3/Button.tsx | 2 ++ .../src/__actions__/Menu/v3/Menu.tsx | 2 ++ .../src/__actions__/Menu/v3/MenuItem.tsx | 4 +++- .../src/__future__/Select/Select.tsx | 5 +++-- .../Select/utils/isSelectOptionGroup.ts | 2 +- .../Tooltip/v1/utils/isSemanticElement.tsx | 2 +- .../src/__overlays__/Tooltip/v3/Tooltip.tsx | 2 ++ .../Tooltip/v3/_docs/Tooltip.spec.stories.tsx | 2 +- .../components/src/utils/useMediaQueries.tsx | 2 ++ packages/components/svgo.spec.ts | 2 ++ .../src/legacy/ThemeProvider.tsx | 2 +- .../src/presets/default/plugins-default.ts | 2 +- .../backgrounds/background-color.stories.tsx | 2 +- .../pages/borders/border-color.stories.tsx | 2 +- .../pages/borders/border-radius.stories.tsx | 2 +- .../pages/borders/border-spacing.stories.tsx | 2 +- .../pages/borders/border-width.stories.tsx | 2 +- .../_docs/pages/effects/shadow.stories.tsx | 2 +- .../_docs/pages/spacing/margin.stories.tsx | 2 +- .../_docs/pages/spacing/padding.stories.tsx | 2 +- .../pages/typography/font-family.stories.tsx | 2 +- .../pages/typography/font-size.stories.tsx | 2 +- .../pages/typography/font-weight.stories.tsx | 2 +- .../pages/typography/line-height.stories.tsx | 2 +- .../pages/typography/text-color.stories.tsx | 2 +- .../components/CodeSnippet/CodeSnippet.tsx | 2 +- vite.config.ts | 2 +- vitest.setup.ts | 2 -- 114 files changed, 218 insertions(+), 196 deletions(-) diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx index 4d1929b2bb2..c35f9704b77 100644 --- a/docs/.storybook/preview.tsx +++ b/docs/.storybook/preview.tsx @@ -50,7 +50,6 @@ const decorators: Preview['decorators'] = [ RACDecorator, KaizenProviderDecorator, // reverseColor parameter wraps story in ReversedColors context and sets default background to Purple 700 - // @ts-ignore (Story, context) => { if ( // set in top toolbar @@ -142,6 +141,7 @@ const preview = { const customDocNames = ['Usage Guidelines', 'API Specification'] // Don't type the param - we can't use TypeScript within storySort + // eslint-disable-next-line @typescript-eslint/explicit-function-return-type const removeCustomDocNames = (title) => { return customDocNames.reduce((acc, docName) => { const regex = new RegExp(`/${docName}$`) diff --git a/docs/components/DocsContainer/BackToTop/BackToTop.tsx b/docs/components/DocsContainer/BackToTop/BackToTop.tsx index 16c181ca197..1414e7a7b3c 100644 --- a/docs/components/DocsContainer/BackToTop/BackToTop.tsx +++ b/docs/components/DocsContainer/BackToTop/BackToTop.tsx @@ -23,7 +23,7 @@ export const BackToTop = ({ onClick={(): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' })} {...buttonAttributes} > - {children || ( + {children ?? ( <> ↑ Back to top diff --git a/docs/components/DocsContainer/DefaultDocsContainer.tsx b/docs/components/DocsContainer/DefaultDocsContainer.tsx index 28fafde20e9..85b77a15db5 100644 --- a/docs/components/DocsContainer/DefaultDocsContainer.tsx +++ b/docs/components/DocsContainer/DefaultDocsContainer.tsx @@ -25,8 +25,7 @@ const DefaultLayout = ({ children }: LayoutProps): JSX.Element => ( const DocsLayout = ({ children }: LayoutProps): JSX.Element => { const context = useContext(DocsContext) - // CSFFile attributes are populated, but unsure where the type definition is - // @ts-expect-error + // @ts-expect-error CSFFile attributes are populated, but unsure where the type definition is const csf = context.storyIdToCSFFile.values().next().value if (csf?.meta.parameters.docsLayout === 'fullPage') { diff --git a/docs/tsconfig.json b/docs/tsconfig.json index b39e402d9a5..9abc4cb4771 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -5,6 +5,7 @@ "esModuleInterop": true, "resolveJsonModule": true, "skipLibCheck": true, + "strictNullChecks": true, "paths": { "~storybook/*": ["./*"], "~components/*": ["../packages/components/src/*"], @@ -12,6 +13,6 @@ "~design-tokens/*": ["../packages/design-tokens/src/*"] } }, - "include": ["**/*.ts", "**/*.tsx", ".storybook/*.tsx"], + "include": ["**/*.ts", "**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"], "files": ["./types.d.ts"] } diff --git a/packages/components/codemods/upgradeIconV1/transformIcon.ts b/packages/components/codemods/upgradeIconV1/transformIcon.ts index 2de33c2cc78..07da207795d 100644 --- a/packages/components/codemods/upgradeIconV1/transformIcon.ts +++ b/packages/components/codemods/upgradeIconV1/transformIcon.ts @@ -36,19 +36,21 @@ const transformIconProp = ( propValue: ts.JsxAttributeValue | undefined, ): ts.JsxAttribute | null | undefined => { switch (propName) { - case 'role': + case 'role': { const oldValue = propValue && getPropValueText(propValue) return oldValue ? transformPropRole(oldValue) : undefined + } case 'aria-label': return createProp('alt', propValue) case 'classNameOverride': return createProp('className', propValue) // `aria-hidden` is not necessary as `role` will cater for presentational icons case 'aria-hidden': - // `fontSize` did nothing for svg icons + // (falls through) `aria-hidden` is not necessary as `role` will cater for presentational icons case 'fontSize': - // `viewBox` no longer relevant + // (falls through) `fontSize` did nothing for svg icons case 'viewBox': + // `viewBox` no longer relevant return null default: return undefined diff --git a/packages/components/codemods/utils/getKaioTagName.ts b/packages/components/codemods/utils/getKaioTagName.ts index a63e3aae97d..5392d7fb20c 100644 --- a/packages/components/codemods/utils/getKaioTagName.ts +++ b/packages/components/codemods/utils/getKaioTagName.ts @@ -52,7 +52,7 @@ export const getKaioTagName = ( const kaioNamedImports = getKaioNamedImports(visitedNode) if (!kaioNamedImports) { - return ts.forEachChild(visitedNode, visitNode) || undefined + return ts.forEachChild(visitedNode, visitNode) } kaioNamedImports.namedImports.find((importSpecifier) => { diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx index 9bd696405fd..6ee24930e30 100644 --- a/packages/components/src/Avatar/Avatar.tsx +++ b/packages/components/src/Avatar/Avatar.tsx @@ -118,7 +118,7 @@ export const Avatar = ({ disableInitials = false, isCompany = false, isCurrentUser = true, - alt = fullName || '', + alt = fullName ?? '', classNameOverride, ...restProps }: AvatarProps): JSX.Element => { diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx index ca49287a52e..47f0fdc00a8 100644 --- a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx +++ b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx @@ -28,10 +28,10 @@ export const CalendarRange = ({ const calendarRef = useRef(null) useEffect(() => { - if (calendarRef.current) onMount && onMount(calendarRef.current) + if (calendarRef.current) onMount?.(calendarRef.current) }, [calendarRef]) - const monthToShow = selected?.from || defaultMonth + const monthToShow = selected?.from ?? defaultMonth const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow /* eslint-disable camelcase */ diff --git a/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx b/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx index 15c0c6c7e9c..281a9da99ea 100644 --- a/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx +++ b/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx @@ -30,7 +30,7 @@ export const CalendarSingle = ({ if (calendarRef.current) onMount?.(calendarRef.current) }, [calendarRef]) - const monthToShow = selected || defaultMonth + const monthToShow = selected ?? defaultMonth const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow /* eslint-disable camelcase */ diff --git a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx index 545a5307d0b..234864ba4af 100644 --- a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx +++ b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx @@ -34,7 +34,7 @@ export const LegacyCalendarRange = ({ locale, onDayChange, }: LegacyCalendarRangeProps): JSX.Element => { - const monthToShow = selectedRange?.from || defaultMonth + const monthToShow = selectedRange?.from ?? defaultMonth const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow /* eslint-disable camelcase */ diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox/Checkbox.tsx index b06eeb4ef49..e649d08528e 100644 --- a/packages/components/src/Checkbox/Checkbox/Checkbox.tsx +++ b/packages/components/src/Checkbox/Checkbox/Checkbox.tsx @@ -48,7 +48,7 @@ export const Checkbox = ({ className={classnames(styles.checkbox, classNameOverride, reversed && styles.reversed)} checked={getCheckedFromStatus(checkedStatus)} onChange={onCheck} - value={value || checkedStatus} + value={value ?? checkedStatus} readOnly={onCheck === undefined} {...restProps} /> diff --git a/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx b/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx index e57a92bc9eb..d69cadd7154 100644 --- a/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx +++ b/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx @@ -29,7 +29,8 @@ export const CheckboxField = ({ classNameOverride, ...restProps }: CheckboxFieldProps): JSX.Element => { - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId return (
{ - const labelId = propsLabelId ?? useId() + const fallbackId = useId() + const labelId = propsLabelId ?? fallbackId return (
(open ?? false) const getOpen = (): boolean | undefined => (controlled ? open : stateIsOpen) - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId const handleSectionToggle = (): void => { const newIsOpen = !getOpen() diff --git a/packages/components/src/DatePicker/DatePicker.tsx b/packages/components/src/DatePicker/DatePicker.tsx index bb439100dd3..a0e0cf61e38 100644 --- a/packages/components/src/DatePicker/DatePicker.tsx +++ b/packages/components/src/DatePicker/DatePicker.tsx @@ -81,7 +81,7 @@ export type DatePickerProps = { */ export const DatePicker = ({ id: propsId, - buttonRef: propsButtonRef = useRef(null), + buttonRef: propsButtonRef, locale: propsLocale = 'en-AU', disabledDates, disabledDaysOfWeek, @@ -116,7 +116,8 @@ export const DatePicker = ({ const containerRef = useRef(null) const inputRef = useRef(null) - const buttonRef = useRef(propsButtonRef?.current || null) + const fallbackButtonRef = useRef(null) + const buttonRef = propsButtonRef ?? fallbackButtonRef const dateInputRefs = useRef({ inputRef, buttonRef, diff --git a/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx index b823140befb..70c4c514055 100644 --- a/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx +++ b/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx @@ -13,7 +13,7 @@ const DateRangePickerWrapper = (props: Partial): JSX.Eleme to: props.selectedDateRange?.to, }) const { value: propValue, ...restProps } = props - const [value, setValue] = useState(propValue || '') + const [value, setValue] = useState(propValue ?? '') const onDateRangeChange = (dateRange: DateRange): void => { setSelectedDateRange(dateRange) diff --git a/packages/components/src/DateRangePicker/DateRangePicker.tsx b/packages/components/src/DateRangePicker/DateRangePicker.tsx index 573040f0b6f..a4b8556fbe3 100644 --- a/packages/components/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/components/src/DateRangePicker/DateRangePicker.tsx @@ -53,7 +53,7 @@ export type DateRangePickerProps = { */ export const DateRangePicker = ({ id: propsId, - buttonRef = useRef(null), + buttonRef, description: _description, // not used labelText, isDisabled = false, @@ -71,6 +71,8 @@ export const DateRangePicker = ({ onChange, ...inputProps }: DateRangePickerProps): JSX.Element => { + const fallbackRef = useRef(null) + const ref = buttonRef ?? fallbackRef const reactId = useId() const id = propsId ?? reactId @@ -91,8 +93,8 @@ export const DateRangePicker = ({ } const handleReturnFocus = (): void => { - if (buttonRef.current) { - buttonRef.current.focus() + if (ref.current) { + ref.current.focus() } } @@ -151,7 +153,7 @@ export const DateRangePicker = ({ [styles.disabled]: isDisabled, })} disabled={isDisabled} - ref={buttonRef} + ref={ref} onClick={handleOpenClose} aria-label={selectedDateRange?.from ? `Change date: ${value}` : 'Choose date'} {...inputProps} diff --git a/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts b/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts index 69be39e42b5..2d90cd048ce 100644 --- a/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts +++ b/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts @@ -11,7 +11,7 @@ describe('formatDateRangeValue', () => { expect(formatDateRangeValue(dateRangeFromOnly)).toEqual('Feb 1, 2022') }) - it('displays a from date by itself', () => { + it('displays the year once when both dates share the same year', () => { const dateRangeBothValues: DateRange = { from: new Date(2022, 1, 1), to: new Date(2022, 2, 2), @@ -20,7 +20,7 @@ describe('formatDateRangeValue', () => { expect(formatDateRangeValue(dateRangeBothValues)).toEqual('Feb 1 – Mar 2, 2022') }) - it('displays a from date by itself', () => { + it('displays the year for both dates when they are not the same', () => { const dateRangeOvertoNewYear: DateRange = { from: new Date(2022, 1, 1), to: new Date(2023, 1, 1), diff --git a/packages/components/src/ErrorPage/ErrorPage.tsx b/packages/components/src/ErrorPage/ErrorPage.tsx index 2568ba39b40..5b05493d64a 100644 --- a/packages/components/src/ErrorPage/ErrorPage.tsx +++ b/packages/components/src/ErrorPage/ErrorPage.tsx @@ -39,7 +39,7 @@ export const ErrorPage = ({ const content = useErrorMessages(code) const actions = { - primary: { href: callToAction?.homeHref || HOME_HREF }, + primary: { href: callToAction?.homeHref ?? HOME_HREF }, secondary: callToAction?.onContactSupport ? { onClick: callToAction.onContactSupport } : { href: getMailToHref(code) }, @@ -52,7 +52,7 @@ export const ErrorPage = ({ body={ <>
- {message || content.message} + {message ?? content.message}
diff --git a/packages/components/src/Filter/Filter/Filter.tsx b/packages/components/src/Filter/Filter/Filter.tsx index d1addae7df7..59c33c96c52 100644 --- a/packages/components/src/Filter/Filter/Filter.tsx +++ b/packages/components/src/Filter/Filter/Filter.tsx @@ -61,7 +61,7 @@ export const Filter = ({ onEscapeKey={(): void => setIsOpen(false)} > {children} diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx index c149a2bd529..3c52154bd83 100644 --- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx +++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx @@ -38,7 +38,7 @@ export const FilterBarDatePicker = ({ {...props} id={id} locale={locale} - selectedDate={filterState.value || undefined} + selectedDate={filterState.value} label={filterState.name} renderTrigger={(triggerProps): JSX.Element => ( diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx index f4c231a2af8..bf78244b808 100644 --- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx +++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx @@ -75,7 +75,7 @@ export const FilterBarMultiSelect = ({ { // Convert the internal FilterMultiSelect state (Set) to an Array for FilterBar state updateValue(id, convertSelectionToAConsumableFormat(keys)) diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx index 6a1cf0c373a..2023fb26f82 100644 --- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx +++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx @@ -50,7 +50,7 @@ export const FilterBarSelect =
diff --git a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx index dc20df1f7c5..0e639263c81 100644 --- a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx +++ b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx @@ -127,7 +127,7 @@ const VARIANTS_PROPS: { { title: 'Focus', props: { - // @ts-ignore + // @ts-expect-error Data attributes are valid props 'data-sb-pseudo-styles': 'focus', 'variant': 'informative', 'headingProps': { diff --git a/packages/components/src/Notification/ToastNotification/ToastNotification/ToastNotification.tsx b/packages/components/src/Notification/ToastNotification/ToastNotification/ToastNotification.tsx index 909b6973c56..92e6cda0be5 100644 --- a/packages/components/src/Notification/ToastNotification/ToastNotification/ToastNotification.tsx +++ b/packages/components/src/Notification/ToastNotification/ToastNotification/ToastNotification.tsx @@ -28,8 +28,8 @@ export const ToastNotification = ({ children, ...restProps }: ToastNotificationProps): null => { - const reactId = useId() - const id = propsId || reactId + const fallbackId = useId() + const id = propsId ?? fallbackId const { addToastNotification } = useToastNotificationContext() const persistent = hideCloseIcon diff --git a/packages/components/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx b/packages/components/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx index 9a34b94f343..a97274f8595 100644 --- a/packages/components/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx +++ b/packages/components/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx @@ -14,9 +14,9 @@ export const NotificationHeading = ({ if (headingProps) { return ( {headingProps.children} diff --git a/packages/components/src/Radio/RadioField/RadioField.tsx b/packages/components/src/Radio/RadioField/RadioField.tsx index 59cbd53f0e5..fe4e43ea717 100644 --- a/packages/components/src/Radio/RadioField/RadioField.tsx +++ b/packages/components/src/Radio/RadioField/RadioField.tsx @@ -27,7 +27,9 @@ export const RadioField = ({ 'data-testid': dataTestId, ...restProps }: RadioFieldProps): JSX.Element => { - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId + // @todo: Move restProps to the wrapping div? return (
{ - const labelId = propsLabelId ?? useId() + const fallbackId = useId() + const labelId = propsLabelId ?? fallbackId return (
{ const { rteMockData, ...rest } = args - const [rteData, setRTEData] = useState(rteMockData || []) + const [rteData, setRTEData] = useState(rteMockData ?? []) const handleOnChange: RichTextEditorProps['onChange'] = (editorState): void => setRTEData(editorState.toJSON().doc.content) return ( diff --git a/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx b/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx index 8626b316a99..d8f531fdb0b 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx +++ b/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx @@ -81,8 +81,8 @@ export const RichTextEditor = ({ const generatedId = useId() const [schema] = useState(createSchemaFromControls(controls)) - const editorId = id || generatedId - const labelId = labelledBy || `${editorId}-rte-label` + const editorId = id ?? generatedId + const labelId = labelledBy ?? `${editorId}-rte-label` const validationMessageAria = validationMessage ? `${editorId}-rte-validation-message` : '' const descriptionAria = description ? `${editorId}-rte-description` : '' @@ -113,7 +113,7 @@ export const RichTextEditor = ({ })() if (useRichTextEditorResult instanceof Error) { - onDataError && onDataError() + onDataError?.() return ( - {dataError || 'Something went wrong'} + {dataError ?? 'Something went wrong'} ) } diff --git a/packages/components/src/RichTextEditor/RichTextEditor/schema.ts b/packages/components/src/RichTextEditor/RichTextEditor/schema.ts index 96780eae942..813d6c56210 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/schema.ts +++ b/packages/components/src/RichTextEditor/RichTextEditor/schema.ts @@ -1,4 +1,4 @@ -import { MarkSpec } from 'prosemirror-model' +import type { MarkSpec } from 'prosemirror-model' import { TOOLBAR_CONTROLS } from '../constants' import { ToolbarItems, ToolbarControlTypes } from '../types' import { ProseMirrorModel } from '../utils/prosemirror' diff --git a/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx b/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx index fa3f966fc5d..60614a51607 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx +++ b/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx @@ -30,7 +30,7 @@ const chainTransactions = (state, dispatch): boolean => { const updateStateAndDispatch = (tr: ProseMirrorState.Transaction): void => { state = state.apply(tr) - dispatch && dispatch(tr) + dispatch?.(tr) } const lastCommand = commands.pop() @@ -38,7 +38,7 @@ const chainTransactions = command(state, updateStateAndDispatch) } - return lastCommand !== undefined && lastCommand(state, dispatch) + return lastCommand?.(state, dispatch) ?? false } /** Dispatches a transaction to create initial p tag required for pm commands */ @@ -134,7 +134,7 @@ const createControlGroupIndex = (controls: ToolbarItems[]): ControlGroupTypes => if (!currentControl?.name) return groups return { ...groups, - [currentControl.name]: currentControl.group || 'ungrouped', + [currentControl.name]: currentControl.group ?? 'ungrouped', } }, {}) @@ -239,7 +239,7 @@ export const buildControlMap = ( } if (schema.nodes.orderedList || schema.nodes.bulletList) { - const groupIndex = controlGroupIndex.orderedList || controlGroupIndex.bulletList || 'ungrouped' + const groupIndex = controlGroupIndex.orderedList ?? controlGroupIndex.bulletList ?? 'ungrouped' toolbarControls[groupIndex].push( { diff --git a/packages/components/src/RichTextEditor/RichTextEditor/utils/keymap.ts b/packages/components/src/RichTextEditor/RichTextEditor/utils/keymap.ts index 8ecd3cb3c2a..fa0f77e7e8f 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/utils/keymap.ts +++ b/packages/components/src/RichTextEditor/RichTextEditor/utils/keymap.ts @@ -14,9 +14,7 @@ export const buildKeymap = (schema: ProseMirrorModel.Schema): KeyBinding => { const { undoInputRule } = ProseMirrorInputrules const { wrapInList, splitListItem, liftListItem, sinkListItem } = ProseMirrorSchemaList - const mac = - // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope - typeof navigator != 'undefined' ? navigator.platform.includes('Mac') : false + const mac = typeof navigator != 'undefined' ? navigator.platform.includes('Mac') : false const { chainCommands, @@ -64,7 +62,7 @@ export const buildKeymap = (schema: ProseMirrorModel.Schema): KeyBinding => { if (schema.nodes.hardBreak) { const br = schema.nodes.hardBreak const cmd = chainCommands(exitCode, (state, dispatch) => { - dispatch && dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView()) + dispatch?.(state.tr.replaceSelectionWith(br.create()).scrollIntoView()) return true }) keys['Mod-Enter'] = cmd diff --git a/packages/components/src/RichTextEditor/utils/commands/fixtures/helpers.ts b/packages/components/src/RichTextEditor/utils/commands/fixtures/helpers.ts index 59c651e6df2..106ed5bab03 100644 --- a/packages/components/src/RichTextEditor/utils/commands/fixtures/helpers.ts +++ b/packages/components/src/RichTextEditor/utils/commands/fixtures/helpers.ts @@ -67,7 +67,7 @@ export const simulateSelectionOfCurrentElement = let endPos = tr.selection.from + 1 const startNode = getStartNode(state) - const nodeLength = startNode.node?.nodeSize || 0 + const nodeLength = startNode.node?.nodeSize ?? 0 if (selectEntireElement) { endPos = nodeLength + 1 diff --git a/packages/components/src/RichTextEditor/utils/commands/fixtures/test-state.ts b/packages/components/src/RichTextEditor/utils/commands/fixtures/test-state.ts index 74c74751835..331c4f1bcca 100644 --- a/packages/components/src/RichTextEditor/utils/commands/fixtures/test-state.ts +++ b/packages/components/src/RichTextEditor/utils/commands/fixtures/test-state.ts @@ -2,8 +2,7 @@ import { Schema } from 'prosemirror-model' import { createDocNode, createEditorState } from '../../core/state' import { getMarks } from '../../schema/marks' import { getNodes } from '../../schema/nodes' - -const data = require('./data.json') +import data from './data.json' export const testSchema = new Schema({ nodes: getNodes(), diff --git a/packages/components/src/RichTextEditor/utils/commands/getMarkAttrs.ts b/packages/components/src/RichTextEditor/utils/commands/getMarkAttrs.ts index ea062d6c847..4a76a28df63 100644 --- a/packages/components/src/RichTextEditor/utils/commands/getMarkAttrs.ts +++ b/packages/components/src/RichTextEditor/utils/commands/getMarkAttrs.ts @@ -1,4 +1,4 @@ -import { Attrs, Mark, MarkType } from 'prosemirror-model' +import type { Attrs, Mark, MarkType } from 'prosemirror-model' import { EditorState } from 'prosemirror-state' /* diff --git a/packages/components/src/RichTextEditor/utils/commands/markIsActive.ts b/packages/components/src/RichTextEditor/utils/commands/markIsActive.ts index 7f8821cfdd8..b543f66de16 100644 --- a/packages/components/src/RichTextEditor/utils/commands/markIsActive.ts +++ b/packages/components/src/RichTextEditor/utils/commands/markIsActive.ts @@ -5,7 +5,7 @@ export const markIsActive = (state: EditorState, type: MarkType): boolean => { const { from, $from, to, empty } = state.selection if (empty) { - return !!type.isInSet(state.storedMarks || $from.marks()) + return !!type.isInSet(state.storedMarks ?? $from.marks()) } return !!state.doc.rangeHasMark(from, to, type) diff --git a/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.spec.ts b/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.spec.ts index 2d65cdc68bb..3ce356a5bd6 100644 --- a/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.spec.ts +++ b/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.spec.ts @@ -1,5 +1,5 @@ import { findByText, queryByText, getByText } from '@testing-library/dom' -import { Command, EditorState } from 'prosemirror-state' +import type { Command, EditorState } from 'prosemirror-state' import { vi } from 'vitest' import { createRichTextEditor } from './createRichTextEditor' import { testEditorState } from './fixtures/testState' diff --git a/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.ts b/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.ts index c3c3070c123..6726abf0b6b 100644 --- a/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.ts +++ b/packages/components/src/RichTextEditor/utils/core/createRichTextEditor.ts @@ -33,10 +33,10 @@ export const createRichTextEditor = ({ // Handle transactions eminating from the EditorView instance const dispatch = (tx: Transaction): void => { - const newEditorState = editorView && editorView.state.apply(tx) + const newEditorState = editorView?.state.apply(tx) if (newEditorState) { onChange(newEditorState) - editorView && editorView.updateState(newEditorState) + editorView?.updateState(newEditorState) } } @@ -58,9 +58,7 @@ export const createRichTextEditor = ({ }) return { - destroy: () => { - editorView && editorView.destroy() - }, + destroy: editorView.destroy, dispatchTransaction: dispatchCommandOrTransaction, } } diff --git a/packages/components/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx b/packages/components/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx index c413bad16d7..7d900935f5c 100644 --- a/packages/components/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx +++ b/packages/components/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' -import { Command, EditorState } from 'prosemirror-state' +import type { Command, EditorState } from 'prosemirror-state' import { vi } from 'vitest' import { testEditorState } from '../fixtures/testState' import { useRichTextEditor } from './useRichTextEditor' diff --git a/packages/components/src/RichTextEditor/utils/core/types.ts b/packages/components/src/RichTextEditor/utils/core/types.ts index 59e94fb0acb..b75b3b2f798 100644 --- a/packages/components/src/RichTextEditor/utils/core/types.ts +++ b/packages/components/src/RichTextEditor/utils/core/types.ts @@ -1,4 +1,4 @@ -import { Command, Transaction } from 'prosemirror-state' +import type { Command, Transaction } from 'prosemirror-state' import { EditorView as ProseMirrorEditorView } from 'prosemirror-view' /** diff --git a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/LinkManager.tsx b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/LinkManager.tsx index 8fa7d6af005..e91ed266f5b 100644 --- a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/LinkManager.tsx +++ b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/LinkManager.tsx @@ -1,7 +1,7 @@ import { ComponentType } from 'react' import debounce from 'lodash.debounce' import { MarkType } from 'prosemirror-model' -import { Command, EditorState, Plugin } from 'prosemirror-state' +import { type Command, type EditorState, Plugin } from 'prosemirror-state' import { AttrsValidator, getMarkAttrs, diff --git a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx index f8c5a5f88f0..6f6272d2a24 100644 --- a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx +++ b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx @@ -19,7 +19,7 @@ export const LinkModal = ({ isOpen, defaultHref, }: LinkModalProps): JSX.Element => { - const [href, setHref] = useState(defaultHref || '') + const [href, setHref] = useState(defaultHref ?? '') const [validationStatus, setValidationStatus] = useState({ status: 'default', }) diff --git a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx index 3446ff9f4af..4d117f8eaf3 100644 --- a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx +++ b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx @@ -31,7 +31,7 @@ export const LinkPopover = ({ diff --git a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/types.ts b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/types.ts index 47333e45959..f96bfc31cf5 100644 --- a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/types.ts +++ b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/types.ts @@ -1,4 +1,4 @@ -import { Transaction, Command } from 'prosemirror-state' +import type { Transaction, Command } from 'prosemirror-state' import { EditorView } from 'prosemirror-view' export type MaybeCommand = Command | Transaction diff --git a/packages/components/src/RichTextEditor/utils/schema/marks.ts b/packages/components/src/RichTextEditor/utils/schema/marks.ts index 2fd7d690bbc..79a8fbcaf7b 100644 --- a/packages/components/src/RichTextEditor/utils/schema/marks.ts +++ b/packages/components/src/RichTextEditor/utils/schema/marks.ts @@ -1,4 +1,4 @@ -import { MarkSpec, Node } from 'prosemirror-model' +import type { MarkSpec, Node } from 'prosemirror-model' import { marks as proseMarks } from 'prosemirror-schema-basic' import { validateLink } from '../plugins/LinkManager/validation' diff --git a/packages/components/src/RichTextEditor/utils/schema/nodes.ts b/packages/components/src/RichTextEditor/utils/schema/nodes.ts index 9db9728d60b..8faa8e937c0 100644 --- a/packages/components/src/RichTextEditor/utils/schema/nodes.ts +++ b/packages/components/src/RichTextEditor/utils/schema/nodes.ts @@ -1,4 +1,4 @@ -import { NodeSpec } from 'prosemirror-model' +import { type NodeSpec } from 'prosemirror-model' import { nodes as proseNodes } from 'prosemirror-schema-basic' import { bulletList, listItem, orderedList } from 'prosemirror-schema-list' diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx index 4f92a5ce3a9..85b1b6602c0 100644 --- a/packages/components/src/Select/Select.tsx +++ b/packages/components/src/Select/Select.tsx @@ -1,7 +1,11 @@ import React, { useId, useState } from 'react' import classnames from 'classnames' -import ReactSelect, { components, Props as ReactSelectProps, NoticeProps } from 'react-select' -import Async, { AsyncProps as ReactAsyncSelectProps } from 'react-select/async' +import ReactSelect, { + components, + type Props as ReactSelectProps, + type NoticeProps, +} from 'react-select' +import Async, { type AsyncProps as ReactAsyncSelectProps } from 'react-select/async' import { FieldMessage } from '~components/FieldMessage' import { Label } from '~components/Label' import { Tag } from '~components/Tag' @@ -63,11 +67,9 @@ export const Select = React.forwardRef( // the default for fullWidth depends on the variant const fullWidth = - propsFullWidth != null - ? propsFullWidth - : variant === 'secondary' || variant === 'secondary-small' - ? false - : true + (propsFullWidth ?? Boolean(variant === 'secondary' || variant === 'secondary-small')) + ? false + : true const classes = classnames( propsClassName, @@ -94,7 +96,7 @@ export const Select = React.forwardRef( {...props} ref={ref} aria-labelledby={labelId} - placeholder={placeholder || ''} + placeholder={placeholder ?? ''} components={{ Control, Placeholder, @@ -130,7 +132,7 @@ export const AsyncSelect = React.forwardRef( { - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId const descriptionId = `${id}-description` return ( diff --git a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx index 0204c37f68a..bcde1394d37 100644 --- a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx +++ b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx @@ -16,7 +16,7 @@ export const DropdownButton = ({ return ( ) : null} - {(sorting || (isHovered && sortingArrowsOnHover)) && ( + {(sorting ?? (isHovered && sortingArrowsOnHover)) && (
{ const ref = useRef(null) const [isHovered, setIsHovered] = useState(false) const [isFocused, setIsFocused] = useState(false) - const showActiveBadge = isSelected || isHovered || isFocused + const showActiveBadge = Boolean(isSelected || isHovered || isFocused) const tabProps = { disabled, diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx index 1014c389df8..493610eb2f5 100644 --- a/packages/components/src/Text/Text.tsx +++ b/packages/components/src/Text/Text.tsx @@ -54,7 +54,7 @@ export const Text = ({ }: TextProps): JSX.Element => { const className = classnames(styles.text, styles[variant], styles[color], classNameOverride) - return createElement(tag === undefined ? 'p' : tag, { ...restProps, className }, children) + return createElement(tag ?? 'p', { ...restProps, className }, children) } Text.displayName = 'Text' diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx index 375ebf5635b..ba07c0c2e1b 100644 --- a/packages/components/src/TextArea/TextArea.tsx +++ b/packages/components/src/TextArea/TextArea.tsx @@ -37,11 +37,12 @@ export const TextArea = ({ // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled - const controlledValue = value || internalValue - const textAreaRef = propsTextAreaRef || useRef(null) + const controlledValue = value ?? internalValue + const fallbackRef = useRef(null) + const textAreaRef = propsTextAreaRef ?? fallbackRef const onChange = (event: React.ChangeEvent): void => { - propsOnChange && propsOnChange(event) + propsOnChange?.(event) setInternalValue(event.target.value) } diff --git a/packages/components/src/TextAreaField/TextAreaField.tsx b/packages/components/src/TextAreaField/TextAreaField.tsx index c479622e8e3..d2f3a3ea76c 100644 --- a/packages/components/src/TextAreaField/TextAreaField.tsx +++ b/packages/components/src/TextAreaField/TextAreaField.tsx @@ -30,7 +30,8 @@ export const TextAreaField = ({ disabled, ...restProps }: TextAreaFieldProps): JSX.Element => { - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId const validationMessageAria = validationMessage ? `${id}-field-validation-message` : '' const descriptionAria = description ? `${id}-field-message` : '' diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx index 5af5a217115..2cb5f9c8a5e 100644 --- a/packages/components/src/TextField/TextField.tsx +++ b/packages/components/src/TextField/TextField.tsx @@ -42,7 +42,8 @@ export const TextField = ({ disabled, ...restProps }: TextFieldProps): JSX.Element => { - const id = propsId ?? useId() + const fallbackId = useId() + const id = propsId ?? fallbackId const validationMessageAria = validationMessage ? `${id}-field-validation-message` : '' const descriptionAria = description ? `${id}-field-description` : '' diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx index d48ebbc368e..88441bf6523 100644 --- a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx +++ b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx @@ -81,7 +81,7 @@ export const GenericTile = ({ {information && (
} onClick={(): void => setIsFlipped(true)} disabled={isFlipped} @@ -102,7 +102,7 @@ export const GenericTile = ({ return ( <> {informationProp.text} - {(informationProp.primaryAction || informationProp.secondaryAction) && ( + {(informationProp.primaryAction ?? informationProp.secondaryAction) && (
{informationProp.secondaryAction && ( diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx index 83b8bd09f79..21c6b4bacaf 100644 --- a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx +++ b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx @@ -278,7 +278,7 @@ export const TitleBlockZen = ({ Boolean(subtitle) && styles.hasSubtitle, Boolean(pageSwitcherSelect) && styles.hasPageSwitcherSelect, collapseNavigationArea && - !(sectionTitle || sectionTitleDescription || renderSectionTitle) && + !(sectionTitle ?? sectionTitleDescription ?? renderSectionTitle) && styles.collapseNavigationArea, title && title.length >= 30 && styles.hasLongTitle, subtitle && @@ -343,9 +343,9 @@ export const TitleBlockZen = ({
- {(primaryAction || - defaultAction || - secondaryActions || + {(primaryAction ?? + defaultAction ?? + secondaryActions ?? secondaryOverflowMenuItems) && (
- {(sectionTitle || sectionTitleDescription || renderSectionTitle) && ( + {(sectionTitle ?? sectionTitleDescription ?? renderSectionTitle) && (
{renderSectionTitle @@ -385,7 +385,7 @@ export const TitleBlockZen = ({
)} {renderNavigationTabs(navigationTabs, collapseNavigationArea, title)} - {(secondaryActions || secondaryOverflowMenuItems) && ( + {(secondaryActions ?? secondaryOverflowMenuItems) && ( { const showOtherActionsHeading = - (defaultAction && defaultActionIsButton(defaultAction)) || - secondaryActions || + (defaultAction && defaultActionIsButton(defaultAction)) ?? + secondaryActions ?? secondaryOverflowMenuItems return ( @@ -151,8 +151,10 @@ const DrawerMenuContent = ({ {defaultAction && renderDefaultLink(defaultAction)} {primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')} - {(defaultAction || secondaryActions || secondaryOverflowMenuItems) && ( - Other actions}> + {(defaultAction ?? secondaryActions ?? secondaryOverflowMenuItems) && ( + 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 =