From 78b145877dca3914077351fd868ae006d12fd910 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 6 May 2024 14:41:58 -0700 Subject: [PATCH] ci: run CI on node 18 (#205) * Update main.yml * Make linting work * more changes --- .eslintignore | 1 + .eslintrc.js | 75 ++++ .github/workflows/main.yml | 2 +- package.json | 6 +- src/alert/Alert.tsx | 4 +- src/breadcrumbs/BreadcrumbItem.tsx | 14 +- src/breadcrumbs/Breadcrumbs.tsx | 64 ++-- src/button/ActionButton.tsx | 8 +- src/button/Button.tsx | 10 +- src/card/Card.tsx | 6 +- src/card/TabbedCard.tsx | 6 +- src/content/Text.tsx | 9 +- src/contextualhelp/ContextualHelp.tsx | 10 +- src/dialog/Dialog.tsx | 18 +- src/dialog/DialogContainer.tsx | 14 +- src/dropdown/Dropdown.tsx | 8 +- src/dropdown/DropdownButton.tsx | 8 +- src/field/Field.tsx | 16 +- src/field/FieldLabel.tsx | 14 +- src/field/HelpText.tsx | 10 +- src/form/Form.tsx | 19 +- src/icon/Icon.tsx | 2 +- src/icon/Icons.tsx | 8 +- src/layout/Flex.tsx | 20 +- src/listbox/ListBox.tsx | 4 +- src/listbox/ListBoxBase.tsx | 20 +- src/listbox/ListBoxOption.tsx | 24 +- src/listbox/ListBoxSection.tsx | 14 +- src/menu/ActionMenu.tsx | 20 +- src/menu/Menu.tsx | 22 +- src/menu/MenuItem.tsx | 26 +- src/menu/MenuSection.tsx | 8 +- src/menu/MenuTrigger.tsx | 26 +- src/navlist/NavList.tsx | 2 +- src/notification/Notice.tsx | 4 +- src/notification/Notification.tsx | 6 +- src/overlays/Modal.tsx | 8 +- src/overlays/Overlay.tsx | 4 +- src/overlays/Underlay.tsx | 2 +- src/picker/Picker.tsx | 62 +-- src/popover/Popover.tsx | 4 +- src/popover/PopoverTrigger.tsx | 4 +- src/progress/ProgressCircle.tsx | 15 +- src/provider/GlobalStyles.tsx | 3 +- src/provider/Provider.tsx | 8 +- src/radio/Radio.tsx | 14 +- src/radio/RadioGroup.tsx | 4 +- src/radio/styles.ts | 4 +- src/slider/RangeSlider.tsx | 15 +- src/slider/Slider.tsx | 17 +- src/slider/SliderBase.tsx | 22 +- src/slider/SliderThumb.tsx | 10 +- src/switch/Switch.tsx | 12 +- src/tabs/Tabs.tsx | 2 +- src/textfield/TextArea.tsx | 16 +- src/textfield/TextField.tsx | 10 +- src/textfield/TextFieldBase.tsx | 20 +- src/tooltip/ActionTooltip.tsx | 8 +- src/tooltip/HelpTooltip.tsx | 13 +- src/tooltip/Tooltip.tsx | 10 +- src/tooltip/TooltipTrigger.tsx | 2 +- src/tooltip/TriggerWrap.tsx | 8 +- src/tooltip/context.ts | 2 +- src/types/core.ts | 1 + src/types/menu.ts | 2 +- src/types/provider.ts | 2 +- src/types/select.ts | 2 +- src/types/slider.ts | 2 +- src/utils/styleProps.ts | 33 +- src/utils/useDOMRef.ts | 4 +- src/view/Content.tsx | 6 +- src/view/View.tsx | 2 +- yarn.lock | 518 +++++++++++++++++++++++++- 73 files changed, 999 insertions(+), 400 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..53c37a16 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +dist \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..e7f98c19 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,75 @@ +module.exports = { + env: { + browser: true, + es2021: true, + node: true, + jest: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react/recommended', + 'plugin:react-hooks/recommended', + 'prettier', + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 'latest', + sourceType: 'module', + impliedStrict: true, + }, + plugins: [ + '@typescript-eslint', + 'react', + 'import', + // Not strictly needed but fixes un-used imports via --fix + 'unused-imports', + ], + rules: { + 'import/order': 'error', + 'no-unused-vars': 'off', + 'unused-imports/no-unused-imports': 'error', + /** + * ignore if the variable starts with an underscore + */ + '@typescript-eslint/no-unused-vars': [ + 'error', + { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }, + ], + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/no-explicit-any': 'off', + 'react/prop-types': 0, + 'react/display-name': 0, + 'no-console': 'error', + 'func-names': ['error', 'always'], + strict: ['error', 'global'], + 'prefer-const': 'off', + 'react/no-unknown-property': [ + 'error', + { + ignore: [ + 'css', + 'vertexColors', + 'args', + 'attach', + 'transparent', + 'geometry', + 'visible', + 'wireframe', + ], + }, + ], + }, + settings: { + react: { + createClass: 'createReactClass', // Regex for Component Factory to use, + // default to "createReactClass" + pragma: 'React', // Pragma to use, default to "React" + version: 'detect', // React version. "detect" automatically picks the version you have installed. + }, + }, +}; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f55661c4..6ea7c517 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -7,7 +7,7 @@ jobs: runs-on: ${{ matrix.os }} strategy: matrix: - node: ['14.x'] + node: ['18.x'] os: [ubuntu-latest, windows-latest, macOS-latest] steps: diff --git a/package.json b/package.json index fd113f6c..a7bd8a63 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "start": "tsdx watch", "build": "tsdx build", "test": "tsdx test --passWithNoTests", - "lint": "tsdx lint", + "lint": "eslint ./src", + "lint:fix": "eslint --fix ./src", "prepare": "tsdx build", "size": "size-limit", "analyze": "size-limit --why", @@ -86,6 +87,9 @@ "babel-plugin-polished": "^1.1.0", "chromatic": "^7.2.0", "eslint": "7.17.0", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-unused-imports": "^3.2.0", "husky": "^8.0.1", "polished": "^4.2.2", "react": "18", diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx index bd66715b..03aaa50b 100644 --- a/src/alert/Alert.tsx +++ b/src/alert/Alert.tsx @@ -4,9 +4,9 @@ import theme from '../theme'; import { classNames } from '../utils'; import { Text } from '../content'; import { Icon, CloseOutline } from '../icon'; +import { SeverityLevel } from '../types'; import { useSeverityStyle } from './useSeverityStyle'; import { getSeverityIcon } from './getSeverityIcon'; -import { SeverityLevel } from '../types'; export interface AlertProps { variant: SeverityLevel; children?: ReactNode; @@ -55,7 +55,7 @@ export const Alert = ({ extra, ...otherProps }: AlertProps) => { - let variantStyle = useSeverityStyle(variant); + const variantStyle = useSeverityStyle(variant); if (!icon && showIcon) { icon = getSeverityIcon(variant); diff --git a/src/breadcrumbs/BreadcrumbItem.tsx b/src/breadcrumbs/BreadcrumbItem.tsx index 83601150..d87dc06f 100644 --- a/src/breadcrumbs/BreadcrumbItem.tsx +++ b/src/breadcrumbs/BreadcrumbItem.tsx @@ -1,26 +1,26 @@ import { BreadcrumbItemProps } from '@react-types/breadcrumbs'; -import { ChevronRightOutline, Icon } from '../icon'; -import { classNames, getWrappedElement } from '../utils'; import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import React, { Fragment, useRef } from 'react'; import { useBreadcrumbItem } from '@react-aria/breadcrumbs'; import { useHover } from '@react-aria/interactions'; +import { classNames, getWrappedElement } from '../utils'; +import { ChevronRightOutline, Icon } from '../icon'; export function BreadcrumbItem(props: BreadcrumbItemProps) { - let { children, isCurrent, isDisabled } = props; + const { children, isCurrent, isDisabled } = props; - let ref = useRef(null); - let { itemProps } = useBreadcrumbItem( + const ref = useRef(null); + const { itemProps } = useBreadcrumbItem( { ...props, elementType: typeof children === 'string' ? 'span' : 'a', }, ref ); - let { hoverProps, isHovered } = useHover(props); + const { hoverProps, isHovered } = useHover(props); - let element = React.cloneElement(getWrappedElement(children), { + const element = React.cloneElement(getWrappedElement(children), { ...mergeProps(itemProps, hoverProps), ref, className: classNames('ac-breadcrumbs-item-link', { diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx index 7fe367fa..87f228da 100644 --- a/src/breadcrumbs/Breadcrumbs.tsx +++ b/src/breadcrumbs/Breadcrumbs.tsx @@ -1,22 +1,23 @@ -import { ActionButton } from '../button'; -import { BreadcrumbItem } from './BreadcrumbItem'; -import { classNames, useDOMRef } from '../utils'; import { DOMRef } from '@react-types/shared'; -import { FolderOutline } from '../icon/Icons'; -import { Menu } from '../menu/Menu'; -import { MenuTrigger } from '../menu/MenuTrigger'; import React, { Key, ReactElement, useCallback, useRef } from 'react'; import { useBreadcrumbs } from '@react-aria/breadcrumbs'; import { useLayoutEffect, useValueEffect } from '@react-aria/utils'; -import { useProviderProps } from '../provider'; import { useResizeObserver } from '@react-aria/utils'; import { css } from '@emotion/react'; +import { useProviderProps } from '../provider'; +import { MenuTrigger } from '../menu/MenuTrigger'; +import { Menu } from '../menu/Menu'; +import { FolderOutline } from '../icon/Icons'; +import { classNames, useDOMRef } from '../utils'; +import { ActionButton } from '../button'; import theme from '../theme'; import { AriaLabelingProps, DOMProps, ItemProps, StyleProps } from '../types'; +import { BreadcrumbItem } from './BreadcrumbItem'; const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; +// eslint-disable-next-line @typescript-eslint/no-empty-interface export interface BreadcrumbsProps {} export interface AriaBreadcrumbsProps extends BreadcrumbsProps, @@ -89,7 +90,7 @@ const liCSS = css` function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { props = useProviderProps(props); - let { + const { size = 'L', isMultiline, children, @@ -100,31 +101,31 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { } = props; // Not using React.Children.toArray because it mutates the key prop. - let childArray: ReactElement[] = []; + const childArray: ReactElement[] = []; React.Children.forEach(children, child => { if (React.isValidElement(child)) { childArray.push(child); } }); - let domRef = useDOMRef(ref); - let listRef = useRef(null); + const domRef = useDOMRef(ref); + const listRef = useRef(null); - let [visibleItems, setVisibleItems] = useValueEffect(childArray.length); + const [visibleItems, setVisibleItems] = useValueEffect(childArray.length); - let { navProps } = useBreadcrumbs(props); + const { navProps } = useBreadcrumbs(props); - let updateOverflow = useCallback(() => { - let computeVisibleItems = (visibleItems: number) => { + const updateOverflow = useCallback(() => { + const computeVisibleItems = (visibleItems: number) => { // Refs can be null at runtime. - let currListRef: HTMLUListElement | null = listRef.current; + const currListRef: HTMLUListElement | null = listRef.current; if (!currListRef) { return; } const listItems = Array.from(currListRef.children) as HTMLLIElement[]; const containerWidth = currListRef.offsetWidth; - let isShowingMenu = childArray.length > visibleItems; + const isShowingMenu = childArray.length > visibleItems; let calculatedWidth = 0; let newVisibleItems = 0; let maxVisibleItems = MAX_VISIBLE_ITEMS; @@ -150,7 +151,7 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { } else { if (listItems.length > 0) { // Ensure the last breadcrumb isn't truncated when we measure it. - let last = listItems.pop() as HTMLLIElement; + const last = listItems.pop() as HTMLLIElement; last.style.overflow = 'visible'; calculatedWidth += last.offsetWidth; @@ -162,7 +163,7 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { } } - for (let breadcrumb of listItems.reverse()) { + for (const breadcrumb of listItems.reverse()) { calculatedWidth += breadcrumb.offsetWidth; if (calculatedWidth < containerWidth) { newVisibleItems++; @@ -175,12 +176,13 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { ); }; + // eslint-disable-next-line func-names setVisibleItems(function*() { // Update to show all items. yield childArray.length; // Measure, and update to show the items that fit. - let newVisibleItems = computeVisibleItems(childArray.length); + const newVisibleItems = computeVisibleItems(childArray.length); yield newVisibleItems; // If the number of items is less than the number of children, @@ -202,16 +204,16 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { let contents = childArray; if (childArray.length > visibleItems) { - let selectedItem = childArray[childArray.length - 1]; - let selectedKey = selectedItem.key ?? childArray.length - 1; - let onMenuAction = (key: Key) => { + const selectedItem = childArray[childArray.length - 1]; + const selectedKey = selectedItem.key ?? childArray.length - 1; + const onMenuAction = (key: Key) => { // Don't fire onAction when clicking on the last item if (key !== selectedKey && onAction) { onAction(key); } }; - let menuItem = ( + const menuItem = ( @@ -229,7 +231,7 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { ); contents = [menuItem]; - let breadcrumbs = [...childArray]; + const breadcrumbs = [...childArray]; let endItems = visibleItems; if (showRoot && visibleItems > 1) { contents.unshift(breadcrumbs.shift() as ReactElement); @@ -238,11 +240,11 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { contents.push(...breadcrumbs.slice(-endItems)); } - let lastIndex = contents.length - 1; - let breadcrumbItems = contents.map((child, index) => { - let isCurrent = index === lastIndex; - let key = child.key ?? index; - let onPress = () => { + const lastIndex = contents.length - 1; + const breadcrumbItems = contents.map((child, index) => { + const isCurrent = index === lastIndex; + const key = child.key ?? index; + const onPress = () => { if (onAction) { onAction(key); } @@ -291,5 +293,5 @@ function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { /** * Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */ -let _Breadcrumbs = React.forwardRef(Breadcrumbs); +const _Breadcrumbs = React.forwardRef(Breadcrumbs); export { _Breadcrumbs as Breadcrumbs }; diff --git a/src/button/ActionButton.tsx b/src/button/ActionButton.tsx index 4205e2c4..cabe90ef 100644 --- a/src/button/ActionButton.tsx +++ b/src/button/ActionButton.tsx @@ -1,12 +1,12 @@ import React, { CSSProperties } from 'react'; -import { classNames } from '../utils/classNames'; import { mergeProps } from '@react-aria/utils'; import { useButton } from '@react-aria/button'; import { useHover } from '@react-aria/interactions'; +import { css } from '@emotion/react'; +import { classNames } from '../utils/classNames'; import { FocusableRef, PressEvents } from '../types'; import { useFocusableRef } from '../utils/useDOMRef'; import { BaseButtonProps } from '../types/button'; -import { css } from '@emotion/react'; import { theme } from '../theme'; interface ActionButtonProps extends BaseButtonProps, PressEvents { @@ -28,7 +28,7 @@ function ActionButton( props: ActionButtonProps, ref: FocusableRef ) { - let domRef = useFocusableRef(ref); + const domRef = useFocusableRef(ref); const { isDisabled, children, style, isQuiet = false, ...otherProps } = props; const { buttonProps, isPressed } = useButton(props, domRef); const { hoverProps, isHovered } = useHover({ isDisabled }); @@ -72,5 +72,5 @@ const quietButtonCSS = css` * ActionButtons allow users to perform an action. * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention. */ -let _ActionButton = React.forwardRef(ActionButton); +const _ActionButton = React.forwardRef(ActionButton); export { _ActionButton as ActionButton }; diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 383765ae..88ef3a1d 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -1,17 +1,17 @@ import React from 'react'; +import { mergeProps } from '@react-aria/utils'; +import { useButton } from '@react-aria/button'; +import { useHover } from '@react-aria/interactions'; import Spinner from '../Spinner'; import { Text } from '../content'; import { FocusableRef } from '../types'; import { useFocusableRef } from '../utils/useDOMRef'; import { classNames } from '../utils/classNames'; -import { mergeProps } from '@react-aria/utils'; -import { useButton } from '@react-aria/button'; -import { useHover } from '@react-aria/interactions'; import { ButtonProps } from '../types'; import { buttonCSS } from './styles'; const Button = (props: ButtonProps, ref: FocusableRef) => { - let domRef = useFocusableRef(ref); + const domRef = useFocusableRef(ref); const { disabled, children, @@ -53,5 +53,5 @@ const Button = (props: ButtonProps, ref: FocusableRef) => { ); }; -let _Button = React.forwardRef(Button); +const _Button = React.forwardRef(Button); export { _Button as Button, ButtonProps }; diff --git a/src/card/Card.tsx b/src/card/Card.tsx index 35c3f59c..832606f1 100644 --- a/src/card/Card.tsx +++ b/src/card/Card.tsx @@ -6,14 +6,14 @@ import React, { useState, } from 'react'; import { css } from '@emotion/react'; +import { useId } from '@react-aria/utils'; import { Text } from '../content'; +import { classNames, useStyleProps, viewStyleProps } from '../utils'; +import { ViewStyleProps } from '../types'; import { CollapsibleCardTitle } from './CollapsibleCardTitle'; import { cardCSS, headerCSS, collapsibleCardCSS } from './styles'; -import { classNames, useStyleProps, viewStyleProps } from '../utils'; -import { useId } from '@react-aria/utils'; import { CardVariant } from './types'; -import { ViewStyleProps } from '../types'; const headerTitleWrapCSS = css` flex: 1 1 auto; diff --git a/src/card/TabbedCard.tsx b/src/card/TabbedCard.tsx index 11943077..9f0cff14 100644 --- a/src/card/TabbedCard.tsx +++ b/src/card/TabbedCard.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { CardBaseProps, useStyleBorderColor } from './Card'; import { css } from '@emotion/react'; import { Text } from '../content'; -import { cardCSS, headerCSS } from './styles'; import { classNames, useStyleProps, viewStyleProps } from '../utils'; +import { cardCSS, headerCSS } from './styles'; +import { CardBaseProps, useStyleBorderColor } from './Card'; const tabbedCardCSS = css` &[data-has-title='false'] { @@ -13,7 +13,7 @@ const tabbedCardCSS = css` } `; -export interface TabbedCardProps extends CardBaseProps {} +export type TabbedCardProps = CardBaseProps export function TabbedCard(props: TabbedCardProps) { const { diff --git a/src/content/Text.tsx b/src/content/Text.tsx index 7b33d64a..ddaf8a7f 100644 --- a/src/content/Text.tsx +++ b/src/content/Text.tsx @@ -5,6 +5,7 @@ import React, { CSSProperties, } from 'react'; import { css } from '@emotion/react'; +import { filterDOMProps } from '@react-aria/utils'; import { ColorValue, DOMProps, @@ -14,16 +15,15 @@ import { TextColorValue, } from '../types'; import theme from '../theme'; -import { Size, TextElementType, Weight } from './types'; - -import { textSizeCSS, textWeightCSS } from './styles'; -import { filterDOMProps } from '@react-aria/utils'; import { colorValue, designationColorValue, useDOMRef, useStyleProps, } from '../utils'; +import { Size, TextElementType, Weight } from './types'; + +import { textSizeCSS, textWeightCSS } from './styles'; export interface TextProps extends DOMProps, StyleProps { /** @@ -78,6 +78,7 @@ const getTextColor = (color: TextColorValue): string => { } const textColor = theme.textColors[color]; if (textColor) { + // eslint-disable-next-line no-console console.warn( `${textColor} is deprecated since it is not light/dark theme compatible.` ); diff --git a/src/contextualhelp/ContextualHelp.tsx b/src/contextualhelp/ContextualHelp.tsx index 7a1110d2..19a6acd1 100644 --- a/src/contextualhelp/ContextualHelp.tsx +++ b/src/contextualhelp/ContextualHelp.tsx @@ -1,3 +1,5 @@ +import { mergeProps, useLabels } from '@react-aria/utils'; +import React, { ReactNode } from 'react'; import { ActionButton } from '../button'; import { AriaLabelingProps, @@ -8,8 +10,6 @@ import { PositionProps, } from '../types'; -import { mergeProps, useLabels } from '@react-aria/utils'; -import React, { ReactNode } from 'react'; import { Icon, InfoOutline, QuestionOutline } from '../icon'; import { HelpTooltip, TooltipTrigger } from '../tooltip'; @@ -42,7 +42,7 @@ function ContextualHelp( props: ContextualHelpProps, ref: FocusableRef ) { - let { + const { variant = 'help', placement = 'bottom start', children, @@ -55,7 +55,7 @@ function ContextualHelp( ); - let labelProps = useLabels(otherProps); + const labelProps = useLabels(otherProps); return ( @@ -74,5 +74,5 @@ function ContextualHelp( /** * Contextual help shows a user extra information about the state of an adjacent component, or a total view. */ -let _ContextualHelp = React.forwardRef(ContextualHelp); +const _ContextualHelp = React.forwardRef(ContextualHelp); export { _ContextualHelp as ContextualHelp }; diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx index bb47a3cf..253a4c89 100644 --- a/src/dialog/Dialog.tsx +++ b/src/dialog/Dialog.tsx @@ -1,15 +1,15 @@ -import { Button } from '../button'; -import { classNames, useDOMRef } from '../utils'; -import { CloseOutline, Icon } from '../icon'; -import { DialogContext, DialogContextValue } from './context'; import { DOMRef } from '@react-types/shared'; import { FocusScope } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import React, { useContext } from 'react'; import { useDialog } from '@react-aria/dialog'; +import { css } from '@emotion/react'; import { DialogProps } from '../types/dialog'; import { Heading } from '../content'; -import { css } from '@emotion/react'; +import { CloseOutline, Icon } from '../icon'; +import { classNames, useDOMRef } from '../utils'; +import { Button } from '../button'; +import { DialogContext, DialogContextValue } from './context'; const dialogCSS = css` outline: none; @@ -73,7 +73,7 @@ const sizeMap: Record, string> = { }; function Dialog(props: DialogProps, ref: DOMRef) { - let { type = 'modal', ...contextProps } = + const { type = 'modal', ...contextProps } = useContext(DialogContext) || ({} as DialogContextValue); let { children, @@ -83,9 +83,9 @@ function Dialog(props: DialogProps, ref: DOMRef) { title, extra, } = props; - let domRef = useDOMRef(ref); + const domRef = useDOMRef(ref); size = size || 'S'; - let sizeVariant = sizeMap[size]; + const sizeVariant = sizeMap[size]; const { dialogProps, titleProps } = useDialog( mergeProps(contextProps, props), domRef @@ -150,5 +150,5 @@ function Dialog(props: DialogProps, ref: DOMRef) { * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged. */ -let _Dialog = React.forwardRef(Dialog); +const _Dialog = React.forwardRef(Dialog); export { _Dialog as Dialog }; diff --git a/src/dialog/DialogContainer.tsx b/src/dialog/DialogContainer.tsx index 7f032c15..1d62e87e 100644 --- a/src/dialog/DialogContainer.tsx +++ b/src/dialog/DialogContainer.tsx @@ -1,6 +1,6 @@ -import { DialogContext } from './context'; -import { Modal } from '../overlays'; import React, { ReactElement, ReactNode, useRef } from 'react'; +import { Modal } from '../overlays'; +import { DialogContext } from './context'; export interface DialogContainerProps { /** The Dialog to display, if any. */ @@ -26,7 +26,7 @@ export interface DialogContainerProps { * or when the trigger unmounts while the dialog is open. */ export function DialogContainer(props: DialogContainerProps) { - let { + const { children, type = 'modal', onDismiss, @@ -34,18 +34,18 @@ export function DialogContainer(props: DialogContainerProps) { isKeyboardDismissDisabled, } = props; - let childArray = React.Children.toArray(children); + const childArray = React.Children.toArray(children); if (childArray.length > 1) { throw new Error('Only a single child can be passed to DialogContainer.'); } - let lastChild = useRef(null); - let child = React.isValidElement(childArray[0]) ? childArray[0] : null; + const lastChild = useRef(null); + const child = React.isValidElement(childArray[0]) ? childArray[0] : null; if (child) { lastChild.current = child; } - let context = { + const context = { type, onClose: onDismiss, isDismissable, diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx index 091143cf..873e520e 100644 --- a/src/dropdown/Dropdown.tsx +++ b/src/dropdown/Dropdown.tsx @@ -1,12 +1,12 @@ import React, { ReactNode, useState, useCallback, useRef } from 'react'; -import { DropdownButton, DropdownButtonProps } from './DropdownButton'; -import { DropdownMenu } from './DropdownMenu'; -import { DropdownTrigger, DropdownTriggerProps } from './DropdownTrigger'; import { useResizeObserver } from '@react-aria/utils'; +import { filterDOMProps } from '@react-aria/utils'; import { DOMProps, FocusableRefValue } from '../types'; import { useUnwrapDOMRef } from '../utils'; import { useProviderProps } from '../provider'; -import { filterDOMProps } from '@react-aria/utils'; +import { DropdownButton, DropdownButtonProps } from './DropdownButton'; +import { DropdownMenu } from './DropdownMenu'; +import { DropdownTrigger, DropdownTriggerProps } from './DropdownTrigger'; export interface DropdownProps extends DOMProps { /** diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx index da9e6395..d09c7b94 100644 --- a/src/dropdown/DropdownButton.tsx +++ b/src/dropdown/DropdownButton.tsx @@ -1,16 +1,16 @@ import React, { ReactNode, CSSProperties } from 'react'; import { css, keyframes } from '@emotion/react'; -import { classNames } from '../utils/classNames'; import { mergeProps } from '@react-aria/utils'; import { useButton } from '@react-aria/button'; import { useHover } from '@react-aria/interactions'; +import { FocusRing } from '@react-aria/focus'; +import { classNames } from '../utils/classNames'; import { FocusableRef, Validation } from '../types'; import { useFocusableRef } from '../utils/useDOMRef'; import theme from '../theme'; import { AddonBefore } from '../field'; import { Icon, ArrowIosDownwardOutline, AlertCircleOutline } from '../icon'; import { AddonableProps } from '../types'; -import { FocusRing } from '@react-aria/focus'; import { textSizeCSS } from '../content/styles'; const appearKeyframes = keyframes` @@ -185,7 +185,7 @@ function DropdownButton( props: DropdownButtonProps, ref: FocusableRef ) { - let domRef = useFocusableRef(ref); + const domRef = useFocusableRef(ref); const { isQuiet = false, isDisabled, @@ -251,5 +251,5 @@ function DropdownButton( ); } -let _DropdownButton = React.forwardRef(DropdownButton); +const _DropdownButton = React.forwardRef(DropdownButton); export { _DropdownButton as DropdownButton }; diff --git a/src/field/Field.tsx b/src/field/Field.tsx index 5122f73d..bcbab7a4 100644 --- a/src/field/Field.tsx +++ b/src/field/Field.tsx @@ -1,17 +1,17 @@ import { css, keyframes } from '@emotion/react'; -import { classNames } from '../utils'; -import { HelpText, HelpTextComponentProps } from './HelpText'; -import { FieldLabel, FieldLabelProps } from './FieldLabel'; import { LabelPosition } from '@react-types/shared'; import { mergeProps } from '@react-aria/utils'; -import { Validation } from '../types'; import React, { RefObject, HTMLAttributes, ReactNode, ReactElement, } from 'react'; +import { Validation } from '../types'; +import { classNames } from '../utils'; import { useFormProps } from '../form'; +import { FieldLabel, FieldLabelProps } from './FieldLabel'; +import { HelpText, HelpTextComponentProps } from './HelpText'; const appearKeyframes = keyframes` 0% { opacity: 0; } @@ -51,10 +51,10 @@ function Field(props: FieldProps, ref: RefObject) { elementType, wrapperClassName, } = props; - let hasHelpText = + const hasHelpText = !!description || (errorMessage && validationState === 'invalid'); - let labelWrapperClass = classNames( + const labelWrapperClass = classNames( 'ac-field', { 'ac-field--positionTop': labelPosition === 'top', @@ -71,7 +71,7 @@ function Field(props: FieldProps, ref: RefObject) { className: 'ac-field__field', }) ); - let renderHelpText = () => ( + const renderHelpText = () => ( ) { } // @ts-ignore -let _Field = React.forwardRef(Field); +const _Field = React.forwardRef(Field); export { _Field as Field }; diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx index eb35d482..523128e7 100644 --- a/src/field/FieldLabel.tsx +++ b/src/field/FieldLabel.tsx @@ -1,8 +1,8 @@ -import { classNames, useDOMRef } from '../utils'; import { DOMRef } from '@react-types/shared'; import { css } from '@emotion/react'; import { filterDOMProps } from '@react-aria/utils'; import React, { ReactNode, ElementType, HTMLAttributes } from 'react'; +import { classNames, useDOMRef } from '../utils'; import { DOMProps, LabelableProps, ExtendableLabelProps } from '../types'; import theme from '../theme'; @@ -26,7 +26,7 @@ export interface FieldLabelProps HTMLAttributes {} function FieldLabel(props: FieldLabelProps, ref: DOMRef) { - let { + const { children, labelPosition = 'top', labelAlign = labelPosition === 'side' ? 'start' : null, @@ -41,11 +41,11 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef) { ...otherProps } = props; - let domRef = useDOMRef(ref); - let necessityLabel = isRequired ? '(required)' : '(optional)'; - let icon = '*'; + const domRef = useDOMRef(ref); + const necessityLabel = isRequired ? '(required)' : '(optional)'; + const icon = '*'; - let labelClassNames = classNames('ac-field-label', { + const labelClassNames = classNames('ac-field-label', { 'ac-field-label--positionSide': labelPosition === 'side', 'ac-field-label--alignEnd': labelAlign === 'end', }); @@ -102,5 +102,5 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef) { ); } -let _FieldLabel = React.forwardRef(FieldLabel); +const _FieldLabel = React.forwardRef(FieldLabel); export { _FieldLabel as FieldLabel }; diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx index 3f894492..54feccf7 100644 --- a/src/field/HelpText.tsx +++ b/src/field/HelpText.tsx @@ -1,7 +1,7 @@ -import { classNames, useDOMRef } from '../utils'; -import { DOMRef, HelpTextProps, Validation } from '../types'; import React, { HTMLAttributes } from 'react'; import { css } from '@emotion/react'; +import { classNames, useDOMRef } from '../utils'; +import { DOMRef, HelpTextProps, Validation } from '../types'; import theme from '../theme'; export interface HelpTextComponentProps extends HelpTextProps, Validation { @@ -16,7 +16,7 @@ export interface HelpTextComponentProps extends HelpTextProps, Validation { } function HelpText(props: HelpTextComponentProps, ref: DOMRef) { - let { + const { description, errorMessage, validationState, @@ -25,8 +25,8 @@ function HelpText(props: HelpTextComponentProps, ref: DOMRef) { descriptionProps, errorMessageProps, } = props; - let domRef = useDOMRef(ref); - let isErrorMessage = errorMessage && validationState === 'invalid'; + const domRef = useDOMRef(ref); + const isErrorMessage = errorMessage && validationState === 'invalid'; return (
({}); +const FormContext = React.createContext({}); export function useFormProps(props: T): T { - let ctx = useContext(FormContext); + const ctx = useContext(FormContext); return { ...ctx, ...props }; } @@ -105,11 +105,12 @@ const formCSS = css` `; function Form(props: FormProps, ref: DOMRef) { - let { + const { children, labelPosition = 'top' as LabelPosition, labelAlign = 'start' as Alignment, layout = 'vertical', + // eslint-disable-next-line @typescript-eslint/no-unused-vars isRequired, necessityIndicator, isDisabled, @@ -117,9 +118,9 @@ function Form(props: FormProps, ref: DOMRef) { isQuiet, ...otherProps } = props; - let domRef = useDOMRef(ref); + const domRef = useDOMRef(ref); - let ctx = { + const ctx = { labelPosition, labelAlign, necessityIndicator, diff --git a/src/icon/Icon.tsx b/src/icon/Icon.tsx index 833028a2..1c4b6233 100644 --- a/src/icon/Icon.tsx +++ b/src/icon/Icon.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, HTMLAttributes } from 'react'; -import { classNames, colorValue } from '../utils'; import { css } from '@emotion/react'; +import { classNames, colorValue } from '../utils'; import { ColorValue } from '../types'; interface IconProps extends HTMLAttributes { diff --git a/src/icon/Icons.tsx b/src/icon/Icons.tsx index 197ef68c..eb40f040 100644 --- a/src/icon/Icons.tsx +++ b/src/icon/Icons.tsx @@ -596,7 +596,7 @@ export const CubeOutline = () => { /> ( d="M20.997 10.9741H21C21.551 10.9741 21.999 11.4201 22 11.9711C22.008 14.6421 20.975 17.1571 19.091 19.0511C17.208 20.9451 14.7 21.9921 12.029 22.0001H12C9.339 22.0001 6.836 20.9681 4.949 19.0911C3.055 17.2081 2.008 14.7001 2 12.0291C1.992 9.3571 3.025 6.8431 4.909 4.9491C6.792 3.0551 9.3 2.0081 11.971 2.0001C12.766 2.0121 13.576 2.0921 14.352 2.2781C14.888 2.4081 15.219 2.9481 15.089 3.4851C14.96 4.0211 14.417 4.3511 13.883 4.2231C13.262 4.0731 12.603 4.0101 11.977 4.0001C9.84 4.0061 7.833 4.8441 6.327 6.3591C4.82 7.8741 3.994 9.8861 4 12.0231C4.006 14.1601 4.844 16.1661 6.359 17.6731C7.869 19.1741 9.871 20.0001 12 20.0001H12.023C14.16 19.9941 16.167 19.1561 17.673 17.6411C19.18 16.1251 20.006 14.1141 20 11.9771C19.999 11.4251 20.445 10.9751 20.997 10.9741ZM8.293 11.293C8.684 10.902 9.316 10.902 9.707 11.293L11.951 13.537L18.248 6.341C18.612 5.928 19.243 5.884 19.659 6.248C20.074 6.611 20.116 7.243 19.752 7.659L12.752 15.659C12.57 15.867 12.31 15.99 12.033 16H12C11.735 16 11.481 15.895 11.293 15.707L8.293 12.707C7.902 12.316 7.902 11.684 8.293 11.293Z" /> ( d="M20.997 10.9741H21C21.551 10.9741 21.999 11.4201 22 11.9711C22.008 14.6421 20.975 17.1571 19.091 19.0511C17.208 20.9451 14.7 21.9921 12.029 22.0001H12C9.339 22.0001 6.836 20.9681 4.949 19.0911C3.055 17.2081 2.008 14.7001 2 12.0291C1.992 9.3571 3.025 6.8431 4.909 4.9491C6.792 3.0551 9.3 2.0081 11.971 2.0001C12.766 2.0121 13.576 2.0921 14.352 2.2781C14.888 2.4081 15.219 2.9481 15.089 3.4851C14.96 4.0211 14.417 4.3511 13.883 4.2231C13.262 4.0731 12.603 4.0101 11.977 4.0001C9.84 4.0061 7.833 4.8441 6.327 6.3591C4.82 7.8741 3.994 9.8861 4 12.0231C4.006 14.1601 4.844 16.1661 6.359 17.6731C7.869 19.1741 9.871 20.0001 12 20.0001H12.023C14.16 19.9941 16.167 19.1561 17.673 17.6411C19.18 16.1251 20.006 14.1141 20 11.9771C19.999 11.4251 20.445 10.9751 20.997 10.9741ZM8.293 11.293C8.684 10.902 9.316 10.902 9.707 11.293L11.951 13.537L18.248 6.341C18.612 5.928 19.243 5.884 19.659 6.248C20.074 6.611 20.116 7.243 19.752 7.659L12.752 15.659C12.57 15.867 12.31 15.99 12.033 16H12C11.735 16 11.481 15.895 11.293 15.707L8.293 12.707C7.902 12.316 7.902 11.684 8.293 11.293Z" /> ( d="M2 12C2 6.486 6.486 2 12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20ZM9 11C8.45 11 8 11.45 8 12C8 12.55 8.45 13 9 13H15C15.55 13 16 12.55 16 12C16 11.45 15.55 11 15 11H9Z" /> ) { - let { children, ...otherProps } = props; + const { children, ...otherProps } = props; - let matchedBreakpoints = ['base']; - let { styleProps } = useStyleProps(otherProps); - let { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps); - let domRef = useDOMRef(ref); + const matchedBreakpoints = ['base']; + const { styleProps } = useStyleProps(otherProps); + const { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps); + const domRef = useDOMRef(ref); // If no gaps, or native support exists, then we only need to render a single div. - let style = { + const style = { ...styleProps.style, ...flexStyle.style, }; diff --git a/src/listbox/ListBox.tsx b/src/listbox/ListBox.tsx index 6f1d25b8..174c5c47 100644 --- a/src/listbox/ListBox.tsx +++ b/src/listbox/ListBox.tsx @@ -1,8 +1,7 @@ import { DOMRef } from '@react-types/shared'; -import { ListBoxBase, useListBoxLayout } from './ListBoxBase'; import React, { ReactElement, CSSProperties, ReactNode, Key } from 'react'; -import { useDOMRef } from '../utils'; import { useListState } from '@react-stately/list'; +import { useDOMRef } from '../utils'; import { AriaLabelingProps, CollectionBase, @@ -10,6 +9,7 @@ import { MultipleSelection, SelectionBehavior, } from '../types'; +import { ListBoxBase, useListBoxLayout } from './ListBoxBase'; export interface ListBoxPropsBase extends CollectionBase, diff --git a/src/listbox/ListBoxBase.tsx b/src/listbox/ListBoxBase.tsx index 0d2f551d..e755fcdc 100644 --- a/src/listbox/ListBoxBase.tsx +++ b/src/listbox/ListBoxBase.tsx @@ -7,9 +7,6 @@ import { } from '@react-types/shared'; import { AriaListBoxOptions, useListBox } from '@react-aria/listbox'; -import { ListBoxContext } from './ListBoxContext'; -import { ListBoxOption } from './ListBoxOption'; -import { ListBoxSection } from './ListBoxSection'; import { ListLayout } from '@react-stately/layout'; import { ListState } from '@react-stately/list'; import { mergeProps } from '@react-aria/utils'; @@ -24,6 +21,9 @@ import React, { import { ReusableView } from '@react-stately/virtualizer'; import { useCollator } from '@react-aria/i18n'; import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer'; +import { ListBoxSection } from './ListBoxSection'; +import { ListBoxOption } from './ListBoxOption'; +import { ListBoxContext } from './ListBoxContext'; interface ListBoxBaseProps extends AriaListBoxOptions, @@ -49,8 +49,8 @@ interface ListBoxBaseProps /** @private */ export function useListBoxLayout(state: ListState) { - let collator = useCollator({ usage: 'search', sensitivity: 'base' }); - let layout = useMemo>( + const collator = useCollator({ usage: 'search', sensitivity: 'base' }); + const layout = useMemo>( () => new ListLayout({ estimatedRowHeight: 32, @@ -73,7 +73,7 @@ function ListBoxBase( props: ListBoxBaseProps, ref: RefObject ) { - let { + const { layout, state, shouldSelectOnPressUp, @@ -84,7 +84,7 @@ function ListBoxBase( onScroll, isLoading = false, } = props; - let { listBoxProps } = useListBox( + const { listBoxProps } = useListBox( { ...props, keyboardDelegate: layout, @@ -101,7 +101,7 @@ function ListBoxBase( // The header is extracted from the children so it can receive ARIA labeling properties. type View = ReusableView, unknown>; - let renderWrapper = ( + const renderWrapper = ( parent: View, reusableView: View, children: View[], @@ -172,7 +172,6 @@ function ListBoxBase( return ( // aria-selected isn't needed here since this option is not selectable.
(
); } else if (type === 'placeholder') { - let emptyState = props.renderEmptyState + const emptyState = props.renderEmptyState ? props.renderEmptyState() : null; if (emptyState == null) { @@ -197,7 +196,6 @@ function ListBoxBase( return (
{emptyState} diff --git a/src/listbox/ListBoxOption.tsx b/src/listbox/ListBoxOption.tsx index ec33a0fe..4d0ef5ae 100644 --- a/src/listbox/ListBoxOption.tsx +++ b/src/listbox/ListBoxOption.tsx @@ -1,15 +1,15 @@ -import { Icon, CheckmarkOutline } from '../icon'; -import { classNames } from '../utils'; import { FocusRing } from '@react-aria/focus'; import { isFocusVisible, useHover } from '@react-aria/interactions'; -import { ListBoxContext } from './ListBoxContext'; import { mergeProps } from '@react-aria/utils'; import { Node } from '@react-types/shared'; import React, { useContext } from 'react'; -import { Text } from '../content'; import { useOption } from '@react-aria/listbox'; import { useRef } from 'react'; +import { Text } from '../content'; +import { classNames } from '../utils'; +import { Icon, CheckmarkOutline } from '../icon'; import { menuItemCSS } from '../menu/styles'; +import { ListBoxContext } from './ListBoxContext'; interface OptionProps { item: Node; @@ -20,19 +20,19 @@ interface OptionProps { /** @private */ export function ListBoxOption(props: OptionProps) { - let { + const { item, shouldSelectOnPressUp, shouldFocusOnHover, shouldUseVirtualFocus, } = props; - let { rendered, key } = item; + const { rendered, key } = item; - let state = useContext(ListBoxContext); + const state = useContext(ListBoxContext); - let ref = useRef(); - let { optionProps, isSelected, isDisabled, isFocused } = useOption( + const ref = useRef(); + const { optionProps, isSelected, isDisabled, isFocused } = useOption( { 'aria-label': item['aria-label'], key, @@ -45,15 +45,15 @@ export function ListBoxOption(props: OptionProps) { // @ts-ignore ref ); - let { hoverProps, isHovered } = useHover({ + const { hoverProps, isHovered } = useHover({ ...props, isDisabled, }); - let contents = + const contents = typeof rendered === 'string' ? {rendered} : rendered; - let isKeyboardModality = isFocusVisible(); + const isKeyboardModality = isFocusVisible(); return ( diff --git a/src/listbox/ListBoxSection.tsx b/src/listbox/ListBoxSection.tsx index 9ce5afa6..201adfb4 100644 --- a/src/listbox/ListBoxSection.tsx +++ b/src/listbox/ListBoxSection.tsx @@ -3,7 +3,6 @@ import { layoutInfoToStyle, useVirtualizerItem, } from '@react-aria/virtualizer'; -import { ListBoxContext } from './ListBoxContext'; import { Node } from '@react-types/shared'; import React, { Fragment, ReactNode, useContext, useRef } from 'react'; import { LayoutInfo } from '@react-stately/virtualizer'; @@ -12,6 +11,7 @@ import { useLocale } from '@react-aria/i18n'; import { useSeparator } from '@react-aria/separator'; import { css } from '@emotion/react'; import theme from '../theme'; +import { ListBoxContext } from './ListBoxContext'; interface ListBoxSectionProps extends Omit { headerLayoutInfo: LayoutInfo; @@ -41,25 +41,25 @@ const dividerCSS = css` /** @private */ export function ListBoxSection(props: ListBoxSectionProps) { - let { children, layoutInfo, headerLayoutInfo, virtualizer, item } = props; - let { headingProps, groupProps } = useListBoxSection({ + const { children, layoutInfo, headerLayoutInfo, virtualizer, item } = props; + const { headingProps, groupProps } = useListBoxSection({ heading: item.rendered, 'aria-label': item['aria-label'], }); - let { separatorProps } = useSeparator({ + const { separatorProps } = useSeparator({ elementType: 'li', }); - let headerRef = useRef(null); + const headerRef = useRef(null); useVirtualizerItem({ layoutInfo: headerLayoutInfo, virtualizer, ref: headerRef, }); - let { direction } = useLocale(); - let state = useContext(ListBoxContext); + const { direction } = useLocale(); + const state = useContext(ListBoxContext); return ( diff --git a/src/menu/ActionMenu.tsx b/src/menu/ActionMenu.tsx index f5d67954..7adefe62 100644 --- a/src/menu/ActionMenu.tsx +++ b/src/menu/ActionMenu.tsx @@ -1,12 +1,12 @@ -import { Button } from '../button'; import { filterDOMProps } from '@react-aria/utils'; import { FocusableRef } from '@react-types/shared'; -import { Menu } from './Menu'; -import { MenuTrigger } from './MenuTrigger'; -import { ArrowIosDownwardOutline, Icon, MoreHorizontalOutline } from '../icon'; import React, { forwardRef } from 'react'; -import { ActionMenuProps } from '../types'; import { css } from '@emotion/react'; +import { ArrowIosDownwardOutline, Icon, MoreHorizontalOutline } from '../icon'; +import { ActionMenuProps } from '../types'; +import { Button } from '../button'; +import { MenuTrigger } from './MenuTrigger'; +import { Menu } from './Menu'; function ActionMenu( props: ActionMenuProps, @@ -60,17 +60,19 @@ function ActionMenu( icon={icon ?? } />} ref={ref} {...buttonProps} - children={buttonChildren} size={buttonSize} variant={buttonVariant} disabled={props.isDisabled} - /> + > + {buttonChildren} + + > + {children} + ); } diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx index 13947009..b33bc6d9 100644 --- a/src/menu/Menu.tsx +++ b/src/menu/Menu.tsx @@ -1,3 +1,8 @@ +import { mergeProps, useSyncRef } from '@react-aria/utils'; +import React, { Key, ReactElement, useContext } from 'react'; +import { useMenu } from '@react-aria/menu'; +import { useTreeState } from '@react-stately/tree'; +import { css } from '@emotion/react'; import { useDOMRef } from '../utils'; import { AriaLabelingProps, @@ -10,11 +15,6 @@ import { import { MenuContext } from './context'; import { MenuItem } from './MenuItem'; import { MenuSection } from './MenuSection'; -import { mergeProps, useSyncRef } from '@react-aria/utils'; -import React, { Key, ReactElement, useContext } from 'react'; -import { useMenu } from '@react-aria/menu'; -import { useTreeState } from '@react-stately/tree'; -import { css } from '@emotion/react'; export interface MenuProps extends CollectionBase, MultipleSelection { /** Where the focus should be set. */ @@ -32,7 +32,7 @@ export interface AriaMenuProps DOMProps, AriaLabelingProps {} -export interface MenuComponentProps extends AriaMenuProps {} +export type MenuComponentProps = AriaMenuProps const menuULCSS = css` background-color: var(--ac-global-menu-background-color); @@ -51,14 +51,14 @@ function Menu( props: MenuComponentProps, ref: DOMRef ) { - let contextProps = useContext(MenuContext); - let completeProps = { + const contextProps = useContext(MenuContext); + const completeProps = { ...mergeProps(contextProps, props), }; - let domRef = useDOMRef(ref); - let state = useTreeState(completeProps); - let { menuProps } = useMenu(completeProps, state, domRef); + const domRef = useDOMRef(ref); + const state = useTreeState(completeProps); + const { menuProps } = useMenu(completeProps, state, domRef); useSyncRef(contextProps, domRef); const items = Array.from(state.collection); return ( diff --git a/src/menu/MenuItem.tsx b/src/menu/MenuItem.tsx index 40231375..b55139cc 100644 --- a/src/menu/MenuItem.tsx +++ b/src/menu/MenuItem.tsx @@ -1,14 +1,14 @@ -import { Icon, CheckmarkOutline } from '../icon'; -import { classNames } from '../utils'; import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import { Node } from '@react-types/shared'; import React, { Key, useRef } from 'react'; -import { Text } from '../content'; import { TreeState } from '@react-stately/tree'; import { useHover } from '@react-aria/interactions'; -import { useMenuContext } from './context'; import { useMenuItem } from '@react-aria/menu'; +import { Text } from '../content'; +import { classNames } from '../utils'; +import { Icon, CheckmarkOutline } from '../icon'; +import { useMenuContext } from './context'; import { menuItemCSS } from './styles'; interface MenuItemProps { @@ -20,17 +20,17 @@ interface MenuItemProps { /** @private */ export function MenuItem(props: MenuItemProps) { - let { item, state, isVirtualized, onAction } = props; + const { item, state, isVirtualized, onAction } = props; - let { onClose, closeOnSelect } = useMenuContext(); + const { onClose, closeOnSelect } = useMenuContext(); - let { rendered, key } = item; + const { rendered, key } = item; - let isSelected = state.selectionManager.isSelected(key); - let isDisabled = state.disabledKeys.has(key); + const isSelected = state.selectionManager.isSelected(key); + const isDisabled = state.disabledKeys.has(key); - let ref = useRef(null); - let { + const ref = useRef(null); + const { menuItemProps, // labelProps, // descriptionProps, @@ -49,9 +49,9 @@ export function MenuItem(props: MenuItemProps) { state, ref ); - let { hoverProps, isHovered } = useHover({ isDisabled }); + const { hoverProps, isHovered } = useHover({ isDisabled }); - let contents = + const contents = typeof rendered === 'string' ? {rendered} : rendered; return ( diff --git a/src/menu/MenuSection.tsx b/src/menu/MenuSection.tsx index 8c7e747c..bb2aa571 100644 --- a/src/menu/MenuSection.tsx +++ b/src/menu/MenuSection.tsx @@ -1,4 +1,3 @@ -import { MenuItem } from './MenuItem'; import { Node } from '@react-types/shared'; import React, { Fragment, Key } from 'react'; import { TreeState } from '@react-stately/tree'; @@ -7,6 +6,7 @@ import { useSeparator } from '@react-aria/separator'; import { getChildNodes } from '@react-stately/collections'; import { css } from '@emotion/react'; import theme from '../theme'; +import { MenuItem } from './MenuItem'; interface MenuSectionProps { item: Node; @@ -16,13 +16,13 @@ interface MenuSectionProps { /** @private */ export function MenuSection(props: MenuSectionProps) { - let { item, state, onAction } = props; - let { itemProps, headingProps, groupProps } = useMenuSection({ + const { item, state, onAction } = props; + const { itemProps, headingProps, groupProps } = useMenuSection({ heading: item.rendered, 'aria-label': item['aria-label'], }); - let { separatorProps } = useSeparator({ + const { separatorProps } = useSeparator({ elementType: 'li', }); diff --git a/src/menu/MenuTrigger.tsx b/src/menu/MenuTrigger.tsx index 298657a3..b566ace4 100644 --- a/src/menu/MenuTrigger.tsx +++ b/src/menu/MenuTrigger.tsx @@ -1,15 +1,15 @@ -import { unwrapDOMRef, useDOMRef } from '../utils'; import { DismissButton, useOverlayPosition } from '@react-aria/overlays'; import { DOMRef, DOMRefValue } from '@react-types/shared'; import { FocusScope } from '@react-aria/focus'; -import { MenuContext } from './context'; import { Placement } from '@react-types/overlays'; -import { Popover } from '../popover'; import { PressResponder } from '@react-aria/interactions'; import React, { forwardRef, Fragment, ReactElement, useRef } from 'react'; import { useMenuTrigger } from '@react-aria/menu'; import { useMenuTriggerState } from '@react-stately/menu'; +import { Popover } from '../popover'; +import { unwrapDOMRef, useDOMRef } from '../utils'; import { Alignment, OverlayTriggerProps } from '../types'; +import { MenuContext } from './context'; type MenuTriggerType = 'press' | 'longPress'; @@ -46,12 +46,12 @@ export interface MenuTriggerProps extends OverlayTriggerProps { } function MenuTrigger(props: MenuTriggerProps, ref: DOMRef) { - let menuPopoverRef = useRef>(null); - let triggerRef = useRef(null); - let domRef = useDOMRef(ref); - let menuTriggerRef = domRef || triggerRef; - let menuRef = useRef(null); - let { + const menuPopoverRef = useRef>(null); + const triggerRef = useRef(null); + const domRef = useDOMRef(ref); + const menuTriggerRef = domRef || triggerRef; + const menuRef = useRef(null); + const { children, align = 'start', shouldFlip = true, @@ -61,9 +61,9 @@ function MenuTrigger(props: MenuTriggerProps, ref: DOMRef) { } = props; const [menuTrigger, menu] = React.Children.toArray(children); - let state = useMenuTriggerState(props); + const state = useMenuTriggerState(props); - let { menuTriggerProps, menuProps } = useMenuTrigger( + const { menuTriggerProps, menuProps } = useMenuTrigger( { trigger }, state, menuTriggerRef @@ -106,7 +106,7 @@ function MenuTrigger(props: MenuTriggerProps, ref: DOMRef) { // Only contain focus while the menu is open. There is a fade out transition during which we may try to move focus. // If we contain, then focus will be pulled back into the menu. - let contents = ( + const contents = ( {menu} @@ -147,5 +147,5 @@ function MenuTrigger(props: MenuTriggerProps, ref: DOMRef) { * The MenuTrigger serves as a wrapper around a Menu and its associated trigger, * linking the Menu's open state with the trigger's press state. */ -let _MenuTrigger = forwardRef(MenuTrigger); +const _MenuTrigger = forwardRef(MenuTrigger); export { _MenuTrigger as MenuTrigger }; diff --git a/src/navlist/NavList.tsx b/src/navlist/NavList.tsx index 1d1df52b..79c0a714 100644 --- a/src/navlist/NavList.tsx +++ b/src/navlist/NavList.tsx @@ -1,8 +1,8 @@ import React, { Key, ReactElement } from 'react'; +import { css } from '@emotion/react'; import { ListBox, ListBoxProps } from '../listbox'; import { DOMRef } from '../types'; import { useDOMRef } from '../utils'; -import { css } from '@emotion/react'; import theme from '../theme'; export interface NavListProps diff --git a/src/notification/Notice.tsx b/src/notification/Notice.tsx index cdaf0f55..c3beefa7 100644 --- a/src/notification/Notice.tsx +++ b/src/notification/Notice.tsx @@ -1,14 +1,14 @@ import React, { useEffect } from 'react'; import { css } from '@emotion/react'; -import { NoticeConfig } from './types'; import { Text } from '../content'; import { useSeverityStyle } from '../alert/useSeverityStyle'; import { getSeverityIcon } from '../alert/getSeverityIcon'; import { Icon, CloseOutline } from '../icon'; import theme from '../theme'; -import { DEFAULT_EXPIRE_MS } from './constants'; import { classNames } from '../utils'; import { buttonCSS } from '../button/styles'; +import { DEFAULT_EXPIRE_MS } from './constants'; +import { NoticeConfig } from './types'; import { slideInFromRightCSS, disappearCSS } from './styles'; const noticeCSS = css` diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx index 94f7cad8..d5b24bab 100644 --- a/src/notification/Notification.tsx +++ b/src/notification/Notification.tsx @@ -1,9 +1,9 @@ import React, { Component, CSSProperties, ReactNode } from 'react'; import { css } from '@emotion/react'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { Overlay } from '../overlays'; -import { Notice } from './Notice'; import theme from '../theme'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; +import { Notice } from './Notice'; import { NoticeDefinition, NoticeConfig } from './types'; import { TRANSITION_ENTER_DURATION_MS, @@ -49,7 +49,7 @@ interface NotificationContainerProps extends PropsFromOverlay { * The container for the notifications that is used in the CSS transition group */ function NotificationContainer(props: NotificationContainerProps) { - const { isOpen, ...passThroughProps } = props; + const { isOpen: _isOpen, ...passThroughProps } = props; return (
{ } // @ts-ignore -const ModalWrapper = forwardRef(function( +const ModalWrapper = forwardRef(function wrapperForwardRef( props: ModalWrapperProps, ref: RefObject ) { - let { children, isOpen, type, overlayProps, ...otherProps } = props; + const { children, isOpen, type, overlayProps, ...otherProps } = props; + // eslint-disable-next-line react-hooks/rules-of-hooks usePreventScroll(); + // eslint-disable-next-line react-hooks/rules-of-hooks const { modalProps } = useModal(); const wrapperClassName = classNames('ac-modal-wrapper', { @@ -149,5 +151,5 @@ function Modal(props: ModalProps, ref: DOMRef) { ); } -let _Modal = forwardRef(Modal); +const _Modal = forwardRef(Modal); export { _Modal as Modal }; diff --git a/src/overlays/Overlay.tsx b/src/overlays/Overlay.tsx index 3d6af1f7..248e6561 100644 --- a/src/overlays/Overlay.tsx +++ b/src/overlays/Overlay.tsx @@ -4,7 +4,7 @@ import { OverlayProps } from '../types'; import { OpenTransition } from './OpenTransition'; function Overlay(props: OverlayProps): any { - let { + const { children, isOpen, container, @@ -32,7 +32,7 @@ function Overlay(props: OverlayProps): any { }, [onExited]); // Don't un-render the overlay while it's transitioning out. - let mountOverlay = isOpen || !exited; + const mountOverlay = isOpen || !exited; if (!mountOverlay) { // Don't bother showing anything if we don't have to. return null; diff --git a/src/overlays/Underlay.tsx b/src/overlays/Underlay.tsx index ab9c24f3..671cb5be 100644 --- a/src/overlays/Underlay.tsx +++ b/src/overlays/Underlay.tsx @@ -1,6 +1,6 @@ -import { classNames } from '../utils'; import React from 'react'; import { css } from '@emotion/react'; +import { classNames } from '../utils'; const underlayCSS = css` background: rgba(0, 0, 0, 0.3); diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 9a31d677..88dbd999 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -1,15 +1,6 @@ import { css } from '@emotion/react'; -import { Popover } from '../popover'; -import { classNames, useDOMRef, useUnwrapDOMRef } from '../utils'; import { useOverlayPosition } from '@react-aria/overlays'; -import { - DOMRef, - DOMRefValue, - FocusableRefValue, - LabelPosition, -} from '../types'; import { HiddenSelect, useSelect } from '@react-aria/select'; -import { ListBoxBase, useListBoxLayout } from '../listbox'; import { FocusScope } from '@react-aria/focus'; import { mergeProps, @@ -17,11 +8,20 @@ import { useResizeObserver, } from '@react-aria/utils'; import { Placement } from '@react-types/overlays'; -import { DropdownMenu, DropdownButton } from '../dropdown'; import { PressResponder, useHover } from '@react-aria/interactions'; import React, { ReactElement, useCallback, useRef, useState } from 'react'; -import { PickerProps } from '../types'; import { useSelectState } from '@react-stately/select'; +import { PickerProps } from '../types'; +import { DropdownMenu, DropdownButton } from '../dropdown'; +import { ListBoxBase, useListBoxLayout } from '../listbox'; +import { + DOMRef, + DOMRefValue, + FocusableRefValue, + LabelPosition, +} from '../types'; +import { classNames, useDOMRef, useUnwrapDOMRef } from '../utils'; +import { Popover } from '../popover'; import { useProviderProps } from '../provider'; import { Field } from '../field'; import { dimensionValue } from '../utils/styleProps'; @@ -33,7 +33,7 @@ function Picker( // Call use provider props so the textfield can inherit from the provider // E.x. disabled, readOnly, etc. props = useProviderProps(props); - let { + const { isQuiet = false, isDisabled, direction = 'bottom', @@ -49,20 +49,20 @@ function Picker( validationState, } = props; - let state = useSelectState(props); - let domRef = useDOMRef(ref); + const state = useSelectState(props); + const domRef = useDOMRef(ref); - let dropdownRef = useRef>(null); - let unwrappedDropdownRef = useUnwrapDOMRef(dropdownRef); + const dropdownRef = useRef>(null); + const unwrappedDropdownRef = useUnwrapDOMRef(dropdownRef); const triggerRef = useRef>(null); - let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef); - let listboxRef = useRef(); + const unwrappedTriggerRef = useUnwrapDOMRef(triggerRef); + const listboxRef = useRef(); // We create the listbox layout in Picker and pass it to ListBoxBase below // so that the layout information can be cached even while the listbox is not mounted. // We also use the layout as the keyboard delegate for type to select. - let layout = useListBoxLayout(state); - let { + const layout = useListBoxLayout(state); + const { labelProps, triggerProps, menuProps, @@ -77,7 +77,7 @@ function Picker( unwrappedTriggerRef ); - let { overlayProps, placement, updatePosition } = useOverlayPosition({ + const { overlayProps, placement, updatePosition } = useOverlayPosition({ targetRef: unwrappedTriggerRef, overlayRef: unwrappedDropdownRef, // @ts-ignore refs are not playing nicely with hooks @@ -88,7 +88,7 @@ function Picker( onClose: state.close, }); - let { hoverProps, isHovered } = useHover({ isDisabled }); + const { hoverProps, isHovered } = useHover({ isDisabled }); // Update position once the ListBox has rendered. This ensures that // it flips properly when it doesn't fit in the available space. @@ -101,10 +101,10 @@ function Picker( } }, [state.isOpen, updatePosition]); - let isLoadingInitial = props.isLoading && state.collection.size === 0; - let isLoadingMore = props.isLoading && state.collection.size > 0; + const isLoadingInitial = props.isLoading && state.collection.size === 0; + const isLoadingMore = props.isLoading && state.collection.size > 0; - let listbox = ( + const listbox = ( ( ); // Measure the width of the button to inform the width of the menu (below). - let [buttonWidth, setButtonWidth] = useState(null); + const [buttonWidth, setButtonWidth] = useState(null); - let onResize = useCallback(() => { + const onResize = useCallback(() => { if (unwrappedTriggerRef.current) { - let width = unwrappedTriggerRef.current.offsetWidth; + const width = unwrappedTriggerRef.current.offsetWidth; setButtonWidth(width); } }, [unwrappedTriggerRef, setButtonWidth]); @@ -145,9 +145,9 @@ function Picker( // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop. // Always have a minimum width of the button width. When quiet, there is an extra offset to add. // Not using style props for this because they don't support `calc`. - let width = isQuiet ? null : buttonWidth; + const width = isQuiet ? null : buttonWidth; - let style = { + const style = { ...overlayProps.style, width: menuWidth ? dimensionValue(menuWidth) : width, // TODO: move to a css variable @@ -238,7 +238,7 @@ function Picker(
); - let wrapperClassName = label + const wrapperClassName = label ? classNames('ac-field', props.className, { 'ac-dropdown-field-wrapper--quiet': isQuiet, 'ac-Dropdown-field-wrapper--positionSide': labelPosition === 'side', diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx index 0f829ad3..1f1c99f5 100644 --- a/src/popover/Popover.tsx +++ b/src/popover/Popover.tsx @@ -1,10 +1,10 @@ import React, { ReactNode, HTMLAttributes, forwardRef } from 'react'; import { useOverlay, useModal } from '@react-aria/overlays'; -import { Overlay } from '../overlays'; -import { PlacementAxis, DOMRef } from '../types'; import { mergeProps } from '@react-aria/utils'; import { FocusScope } from '@react-aria/focus'; import { useDialog } from '@react-aria/dialog'; +import { PlacementAxis, DOMRef } from '../types'; +import { Overlay } from '../overlays'; import { useDOMRef } from '../utils/useDOMRef'; import { classNames } from '../utils/classNames'; import { popoverCSS } from './styles'; diff --git a/src/popover/PopoverTrigger.tsx b/src/popover/PopoverTrigger.tsx index 9be6c1fa..4284d4da 100644 --- a/src/popover/PopoverTrigger.tsx +++ b/src/popover/PopoverTrigger.tsx @@ -1,18 +1,18 @@ import React, { ReactNode, ReactElement, useRef } from 'react'; import { PressResponder } from '@react-aria/interactions'; -import { Popover } from './Popover'; import { OverlayTriggerState, useOverlayTriggerState, } from '@react-stately/overlays'; +import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays'; import { PopoverClose, OverlayTriggerProps, PositionProps, DOMRefValue, } from '../types'; -import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays'; import { unwrapDOMRef } from '../utils/useDOMRef'; +import { Popover } from './Popover'; export interface PopoverTriggerProps extends OverlayTriggerProps, diff --git a/src/progress/ProgressCircle.tsx b/src/progress/ProgressCircle.tsx index 922ca319..c016a638 100644 --- a/src/progress/ProgressCircle.tsx +++ b/src/progress/ProgressCircle.tsx @@ -1,8 +1,8 @@ import { clamp } from '@react-aria/utils'; -import { classNames, useDOMRef } from '../utils'; import { AriaLabelingProps, DOMRef } from '@react-types/shared'; import React, { CSSProperties } from 'react'; import { useProgressBar } from '@react-aria/progress'; +import { classNames, useDOMRef } from '../utils'; import { DOMProps, ProgressBaseProps } from '../types'; import { progressCircleCSS } from './styles'; @@ -34,15 +34,15 @@ function ProgressCircle( 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, } = props; - let domRef = useDOMRef(ref); + const domRef = useDOMRef(ref); value = clamp(value, minValue, maxValue); - let { progressBarProps } = useProgressBar({ ...props, value }); + const { progressBarProps } = useProgressBar({ ...props, value }); - let subMask1Style: CSSProperties = {}; - let subMask2Style: CSSProperties = {}; + const subMask1Style: CSSProperties = {}; + const subMask2Style: CSSProperties = {}; if (!isIndeterminate) { - let percentage = ((value - minValue) / (maxValue - minValue)) * 100; + const percentage = ((value - minValue) / (maxValue - minValue)) * 100; let angle; if (percentage > 0 && percentage <= 50) { angle = -180 + (percentage / 50) * 180; @@ -56,6 +56,7 @@ function ProgressCircle( } if (!ariaLabel && !ariaLabelledby) { + // eslint-disable-next-line no-console console.warn( 'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility' ); @@ -101,5 +102,5 @@ function ProgressCircle( * ProgressCircles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. * They can represent determinate or indeterminate progress. */ -let _ProgressCircle = React.forwardRef(ProgressCircle); +const _ProgressCircle = React.forwardRef(ProgressCircle); export { _ProgressCircle as ProgressCircle }; diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx index 6871cb9b..39a38e8c 100644 --- a/src/provider/GlobalStyles.tsx +++ b/src/provider/GlobalStyles.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import { Global, css } from '@emotion/react'; -import { useProvider } from './Provider'; import { ProviderTheme } from '../types'; +import { useProvider } from './Provider'; /** * Medium size root CSS variables diff --git a/src/provider/Provider.tsx b/src/provider/Provider.tsx index ae8f593d..36800327 100644 --- a/src/provider/Provider.tsx +++ b/src/provider/Provider.tsx @@ -7,14 +7,14 @@ const Context = React.createContext(null); export function Provider(props: ProviderProps) { const prevContext = useContext(Context); - let { children, theme: propsTheme, ...context } = props; + const { children, theme: propsTheme, ...context } = props; let theme: ProviderTheme = propsTheme || 'dark'; - let isRootProvider = !prevContext; + const isRootProvider = !prevContext; // If there is a theme higher up in the tree, use that theme if (prevContext && prevContext.theme) { theme = prevContext.theme; } - let content = isRootProvider ? ( + const content = isRootProvider ? ( {children} ) : ( children @@ -36,7 +36,7 @@ export function useProvider(): ProviderContext { } export function useProviderProps(props: T): T { - let context = useProvider(); + const context = useProvider(); if (!context) { return props; } diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx index 71926dc7..e4f31113 100644 --- a/src/radio/Radio.tsx +++ b/src/radio/Radio.tsx @@ -5,21 +5,21 @@ import React, { SyntheticEvent, } from 'react'; import { useRadio } from '@react-aria/radio'; -import { useRadioProvider } from './context'; -import { Icon } from '../icon'; -import { RadioButtonOff, RadioButtonOnFill } from './icons'; import { VisuallyHidden } from '@react-aria/visually-hidden'; import { useFocusRing } from '@react-aria/focus'; +import { useId } from '@react-aria/utils'; +import { Icon } from '../icon'; +import { Text } from '../content'; +import { classNames } from '../utils'; import { radioCSS, radioButtonIconCSS, radioChildrenCSS, getRadioCSS, } from './styles'; -import { useId } from '@react-aria/utils'; -import { Text } from '../content'; +import { RadioButtonOff, RadioButtonOnFill } from './icons'; import { RadioSize, RadioVariant } from './types'; -import { classNames } from '../utils'; +import { useRadioProvider } from './context'; export type RadioProps = { /** @@ -60,7 +60,7 @@ export type RadioProps = { function Radio(props: RadioProps) { const radioGroupProps = useRadioProvider(); - let { state } = radioGroupProps!; + const { state } = radioGroupProps!; const { variant = 'default', size = 'normal', diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index e008ccf6..1c9906dc 100644 --- a/src/radio/RadioGroup.tsx +++ b/src/radio/RadioGroup.tsx @@ -2,11 +2,11 @@ import React, { isValidElement, ReactElement, ReactNode } from 'react'; import { useRadioGroupState } from '@react-stately/radio'; import { useRadioGroup } from '@react-aria/radio'; import { useId } from '@react-aria/utils'; -import { radioGroupCSS, radioGroupLabelCSS } from './styles'; import { Text } from '../content'; +import { classNames } from '../utils'; +import { radioGroupCSS, radioGroupLabelCSS } from './styles'; import { RadioContext } from './context'; import { RadioSize, RadioVariant } from './types'; -import { classNames } from '../utils'; import { RadioProps } from './Radio'; export interface RadioGroupProps { diff --git a/src/radio/styles.ts b/src/radio/styles.ts index 702ea6bf..10cc2830 100644 --- a/src/radio/styles.ts +++ b/src/radio/styles.ts @@ -1,7 +1,7 @@ -import theme from '../theme'; import { css, SerializedStyles } from '@emotion/react'; -import { RadioVariant } from './types'; +import theme from '../theme'; import { textSizeCSS } from '../content/styles'; +import { RadioVariant } from './types'; type RadioStyleProps = { isSelected?: boolean; diff --git a/src/slider/RangeSlider.tsx b/src/slider/RangeSlider.tsx index ddd4559c..4849a193 100644 --- a/src/slider/RangeSlider.tsx +++ b/src/slider/RangeSlider.tsx @@ -1,19 +1,19 @@ import { FocusableRef } from '@react-types/shared'; import React from 'react'; +import { useLocale } from '@react-aria/i18n'; +import { RangeSliderProps } from '../types/slider'; import { SliderBase, SliderBaseChildArguments, SliderBaseProps, } from './SliderBase'; import { SliderThumb } from './SliderThumb'; -import { RangeSliderProps } from '../types/slider'; -import { useLocale } from '@react-aria/i18n'; function RangeSlider( props: RangeSliderProps, ref: FocusableRef ) { - let { + const { onChange, onChangeEnd, value, @@ -22,7 +22,7 @@ function RangeSlider( ...otherProps } = props; - let baseProps: Omit, 'children'> = { + const baseProps: Omit, 'children'> = { ...otherProps, value: value != null ? [value.start, value.end] : undefined, defaultValue: @@ -37,17 +37,16 @@ function RangeSlider( onChangeEnd?.({ start: v[0], end: v[1] }); }, getValueLabel: getValueLabel - ? // @ts-expect-error update typescript version - ([start, end]) => getValueLabel({ start, end }) + ? ([start, end]) => getValueLabel({ start, end }) : undefined, }; - let { direction } = useLocale(); + const { direction } = useLocale(); return ( {({ trackRef, inputRef, state }: SliderBaseChildArguments) => { - let cssDirection = direction === 'rtl' ? 'right' : 'left'; + const cssDirection = direction === 'rtl' ? 'right' : 'left'; return ( <>
) { let { @@ -18,12 +18,13 @@ function Slider(props: ACSliderProps, ref: FocusableRef) { defaultValue, isFilled, fillOffset, + // eslint-disable-next-line @typescript-eslint/no-unused-vars trackGradient, getValueLabel, ...otherProps } = props; - let baseProps: Omit = { + const baseProps: Omit = { ...otherProps, // Normalize `value: number[]` to `value: number` value: value != null ? [value] : undefined, @@ -54,7 +55,7 @@ function Slider(props: ACSliderProps, ref: FocusableRef) { ) : fillOffset; - let lowerTrack = ( + const lowerTrack = (
) { }} /> ); - let upperTrack = ( + const upperTrack = (
) { let filledTrack: ReactNode = null; if (isFilled && fillOffset != null) { - let width = + const width = state.getThumbPercent(0) - state.getValuePercent(fillOffset); - let isRightOfOffset = width > 0; - let offset = isRightOfOffset + const isRightOfOffset = width > 0; + const offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0); filledTrack = ( diff --git a/src/slider/SliderBase.tsx b/src/slider/SliderBase.tsx index 059699a3..1f88ea65 100644 --- a/src/slider/SliderBase.tsx +++ b/src/slider/SliderBase.tsx @@ -1,12 +1,12 @@ -import { classNames, useFocusableRef } from '../utils'; import { FocusableRef } from '@react-types/shared'; import React, { CSSProperties, ReactNode, RefObject, useRef } from 'react'; import { SliderState, useSliderState } from '@react-stately/slider'; -import { BarSliderBase } from '../types/slider'; import { useNumberFormatter } from '@react-aria/i18n'; -import { useProviderProps } from '../provider'; import { useSlider } from '@react-aria/slider'; import { css } from '@emotion/react'; +import { useProviderProps } from '../provider'; +import { BarSliderBase } from '../types/slider'; +import { classNames, useFocusableRef } from '../utils'; import { labelCSS, labelContainerCSS, sliderCSS } from './styles'; export interface SliderBaseChildArguments { inputRef: RefObject; @@ -16,6 +16,7 @@ export interface SliderBaseChildArguments { export interface SliderBaseProps extends BarSliderBase { children: (opts: SliderBaseChildArguments) => ReactNode; + // eslint-disable-next-line @typescript-eslint/ban-types classes?: string[] | Object; style?: CSSProperties; } @@ -47,7 +48,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef) { } = props; // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign. - let alwaysDisplaySign = + const alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2; if (alwaysDisplaySign) { if (formatOptions != null) { @@ -70,15 +71,15 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef) { minValue, maxValue, }); - let trackRef = useRef(null); - let { groupProps, trackProps, labelProps, outputProps } = useSlider( + const trackRef = useRef(null); + const { groupProps, trackProps, labelProps, outputProps } = useSlider( props, state, trackRef ); - let inputRef = useRef(null); - let domRef = useFocusableRef(ref, inputRef); + const inputRef = useRef(null); + const domRef = useFocusableRef(ref, inputRef); let displayValue = ''; let maxLabelLength: number | undefined = undefined; @@ -120,6 +121,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef) { displayValue = `${state.getThumbValueLabel( 0 )} – ${state.getThumbValueLabel(1)}`; + // eslint-disable-next-line @typescript-eslint/no-unused-vars maxLabelLength = 3 + 2 * @@ -134,13 +136,13 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef) { } } - let labelNode = ( + const labelNode = ( ); - let valueNode = ( + const valueNode = ( (null); + const backupRef = useRef(null); inputRef = inputRef || backupRef; - let { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb( + const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb( { ...props, inputRef, @@ -28,7 +28,7 @@ export function SliderThumb(props: SliderThumbProps) { state ); - let { hoverProps, isHovered } = useHover({}); + const { hoverProps, isHovered } = useHover({}); return ( diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx index 133a4ae3..eae46aff 100644 --- a/src/switch/Switch.tsx +++ b/src/switch/Switch.tsx @@ -1,4 +1,9 @@ import React, { ReactNode, forwardRef, useRef } from 'react'; +import { useSwitch } from '@react-aria/switch'; +import { useHover } from '@react-aria/interactions'; +import { useToggleState } from '@react-stately/toggle'; +import { FocusRing } from '@react-aria/focus'; +import { classNames, useFocusableRef } from '../utils'; import { AriaLabelingProps, FocusableDOMProps, @@ -6,11 +11,6 @@ import { FocusableRef, InputBase, } from '../types'; -import { classNames, useFocusableRef } from '../utils'; -import { useSwitch } from '@react-aria/switch'; -import { useHover } from '@react-aria/interactions'; -import { useToggleState } from '@react-stately/toggle'; -import { FocusRing } from '@react-aria/focus'; import { switchCSS } from './styles'; interface SwitchBase extends InputBase, FocusableProps { @@ -40,7 +40,7 @@ interface SwitchBase extends InputBase, FocusableProps { name?: string; } -export interface BaseSwitchProps extends SwitchBase {} +export type BaseSwitchProps = SwitchBase export interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index 575fbbcb..501d73e6 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -7,8 +7,8 @@ import React, { HtmlHTMLAttributes, } from 'react'; import { useControlledState } from '@react-stately/utils'; -import { Text } from '../content'; import { css } from '@emotion/react'; +import { Text } from '../content'; import { Orientation } from '../types/orientation'; type Tab = TabPaneProps & { diff --git a/src/textfield/TextArea.tsx b/src/textfield/TextArea.tsx index e3394b2a..70f166fd 100644 --- a/src/textfield/TextArea.tsx +++ b/src/textfield/TextArea.tsx @@ -1,14 +1,14 @@ import React, { RefObject, useCallback, useRef } from 'react'; -import { - TextFieldBase, - AriaTextFieldProps, - TextFieldRef, -} from './TextFieldBase'; import { useTextField } from '@react-aria/textfield'; import { chain, useLayoutEffect } from '@react-aria/utils'; import { useControlledState } from '@react-stately/utils'; import { useProviderProps } from '../provider'; import { AddonableProps, StyleProps } from '../types'; +import { + TextFieldBase, + AriaTextFieldProps, + TextFieldRef, +} from './TextFieldBase'; export interface TextAreaProps extends AriaTextFieldProps, @@ -36,7 +36,7 @@ function TextArea(props: TextAreaProps, ref: RefObject) { props.defaultValue, () => {} ); - let inputRef = useRef(null); + const inputRef = useRef(null); const onHeightChange = useCallback(() => { // Quiet textareas always grow based on their text content. @@ -69,7 +69,7 @@ function TextArea(props: TextAreaProps, ref: RefObject) { } }, [onHeightChange, inputValue, inputRef]); - let { + const { labelProps, inputProps, descriptionProps, @@ -107,5 +107,5 @@ function TextArea(props: TextAreaProps, ref: RefObject) { * are available to text fields. */ // @ts-ignore -let _TextArea = React.forwardRef(TextArea); +const _TextArea = React.forwardRef(TextArea); export { _TextArea as TextArea }; diff --git a/src/textfield/TextField.tsx b/src/textfield/TextField.tsx index a771c78e..28cea1c2 100644 --- a/src/textfield/TextField.tsx +++ b/src/textfield/TextField.tsx @@ -1,12 +1,12 @@ import React, { forwardRef, RefObject, useRef } from 'react'; +import { useTextField } from '@react-aria/textfield'; +import { AddonableProps, StyleProps } from '../types'; +import { useProviderProps } from '../provider'; import { TextFieldBase, AriaTextFieldProps, TextFieldRef, } from './TextFieldBase'; -import { useTextField } from '@react-aria/textfield'; -import { AddonableProps, StyleProps } from '../types'; -import { useProviderProps } from '../provider'; export interface TextFieldProps extends AriaTextFieldProps, @@ -24,8 +24,8 @@ function TextField(props: TextFieldProps, ref: RefObject) { // Call use provider props so the textfield can inherit from the provider // E.x. disabled, readOnly, etc. props = useProviderProps(props); - let inputRef = useRef(null); - let { + const inputRef = useRef(null); + const { labelProps, inputProps, descriptionProps, diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx index 95ff7b12..469f0d00 100644 --- a/src/textfield/TextFieldBase.tsx +++ b/src/textfield/TextFieldBase.tsx @@ -1,10 +1,7 @@ import { css, keyframes } from '@emotion/react'; -import { classNames, createFocusableRef } from '../utils'; -import { Field } from '../field'; import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import { PressEvents } from '@react-types/shared'; -import { Icon, AlertCircleOutline } from '../icon'; import React, { HTMLAttributes, InputHTMLAttributes, @@ -17,6 +14,10 @@ import React, { useRef, forwardRef, } from 'react'; +import { useHover } from '@react-aria/interactions'; +import { classNames, createFocusableRef } from '../utils'; +import { Field } from '../field'; +import { Icon, AlertCircleOutline } from '../icon'; import { InputBase, LabelableProps, @@ -35,7 +36,6 @@ import { StyleProps, } from '../types'; import { AddonBefore } from '../field'; -import { useHover } from '@react-aria/interactions'; import theme from '../theme'; import { dimensionValue } from '../utils/styleProps'; @@ -303,10 +303,10 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref) { height, width, } = props; - let { hoverProps, isHovered } = useHover({ isDisabled }); - let [isFocused, setIsFocused] = React.useState(false); - let domRef = useRef(null); - let defaultInputRef = useRef(null); + const { hoverProps, isHovered } = useHover({ isDisabled }); + const [isFocused, setIsFocused] = React.useState(false); + const domRef = useRef(null); + const defaultInputRef = useRef(null); inputRef = inputRef || defaultInputRef; // Expose imperative interface for ref @@ -323,8 +323,8 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref) { }, })); - let ElementType: React.ElementType = multiLine ? 'textarea' : 'input'; - let isInvalid = validationState === 'invalid'; + const ElementType: React.ElementType = multiLine ? 'textarea' : 'input'; + const isInvalid = validationState === 'invalid'; const validation = ( { @@ -31,7 +31,7 @@ interface ActionTooltipProps extends HTMLProps { function ActionTooltip(props: ActionTooltipProps, _ref: DOMRef) { const { ref: overlayRef, - arrowProps, + state, ...tooltipProviderProps } = useContext(TooltipContext); @@ -89,5 +89,5 @@ function ActionTooltip(props: ActionTooltipProps, _ref: DOMRef) { /** * Display container for Tooltip content. Has a directional arrow dependent on its placement. */ -let _ActionTooltip = React.forwardRef(ActionTooltip); +const _ActionTooltip = React.forwardRef(ActionTooltip); export { _ActionTooltip as ActionTooltip }; diff --git a/src/tooltip/HelpTooltip.tsx b/src/tooltip/HelpTooltip.tsx index 5d5bba2e..77d10dde 100644 --- a/src/tooltip/HelpTooltip.tsx +++ b/src/tooltip/HelpTooltip.tsx @@ -1,8 +1,8 @@ import React, { ReactNode, useContext, HTMLProps, CSSProperties } from 'react'; import { useTooltip } from '@react-aria/tooltip'; +import { mergeProps } from '@react-aria/utils'; import { classNames } from '../utils'; import { PlacementAxis, DOMRef } from '../types'; -import { mergeProps } from '@react-aria/utils'; import { TooltipContext } from '../tooltip/context'; import { helpTooltipCSS } from './styles'; @@ -26,12 +26,9 @@ interface HelpTooltipProps extends HTMLProps { * @returns */ function HelpTooltip(props: HelpTooltipProps, _ref: DOMRef) { - const { - ref: overlayRef, - arrowProps, - state, - ...tooltipProviderProps - } = useContext(TooltipContext); + const { ref: overlayRef, state, ...tooltipProviderProps } = useContext( + TooltipContext + ); props = mergeProps(props, tooltipProviderProps); const { placement = 'right', isOpen, style: propsStyle, id } = props; @@ -66,5 +63,5 @@ function HelpTooltip(props: HelpTooltipProps, _ref: DOMRef) { /** * Display container for Tooltip content. Has a directional arrow dependent on its placement. */ -let _HelpTooltip = React.forwardRef(HelpTooltip); +const _HelpTooltip = React.forwardRef(HelpTooltip); export { _HelpTooltip as HelpTooltip }; diff --git a/src/tooltip/Tooltip.tsx b/src/tooltip/Tooltip.tsx index cf5c0f55..dbeb93c1 100644 --- a/src/tooltip/Tooltip.tsx +++ b/src/tooltip/Tooltip.tsx @@ -1,10 +1,10 @@ import React, { ReactNode, useContext, HTMLProps } from 'react'; import { useTooltip } from '@react-aria/tooltip'; +import { mergeProps } from '@react-aria/utils'; import { classNames } from '../utils'; import { PlacementAxis, DOMRef } from '../types'; -import { mergeProps } from '@react-aria/utils'; -import { TooltipContext } from './context'; import { Text } from '../content'; +import { TooltipContext } from './context'; import { tooltipCSS, tooltipTipCSS } from './styles'; interface TooltipProps extends HTMLProps { @@ -25,8 +25,8 @@ function Tooltip(props: TooltipProps, _ref: DOMRef) { ...tooltipProviderProps } = useContext(TooltipContext); props = mergeProps(props, tooltipProviderProps); - let { placement = 'top', isOpen, style, id } = props; - let { tooltipProps } = useTooltip(props, state); + const { placement = 'top', isOpen, style, id } = props; + const { tooltipProps } = useTooltip(props, state); return (
) { - let domRef = useFocusableRef(ref); + const domRef = useFocusableRef(ref); const { children, style, ...otherProps } = props; // Need to advertise the component as a button for tooltips to work const { buttonProps } = useButton(props, domRef); @@ -44,5 +44,5 @@ function TriggerWrap( /** * TriggerWrap allows users to focus on an element and to get tooltips */ -let _TriggerWrap = React.forwardRef(TriggerWrap); +const _TriggerWrap = React.forwardRef(TriggerWrap); export { _TriggerWrap as TriggerWrap }; diff --git a/src/tooltip/context.ts b/src/tooltip/context.ts index 0f18ebd3..0b1c4d9b 100644 --- a/src/tooltip/context.ts +++ b/src/tooltip/context.ts @@ -1,7 +1,7 @@ import { CSSProperties } from 'react'; -import { PlacementAxis } from '../types'; import React, { HTMLAttributes, RefObject } from 'react'; import { TooltipTriggerState } from '@react-stately/tooltip'; +import { PlacementAxis } from '../types'; interface TooltipContextProps { state?: TooltipTriggerState; diff --git a/src/types/core.ts b/src/types/core.ts index 3bb36480..cf7cd087 100644 --- a/src/types/core.ts +++ b/src/types/core.ts @@ -88,6 +88,7 @@ export type DimensionValue = | number // This allows autocomplete to work properly and not collapse the above options into just `string`. // https://github.com/microsoft/TypeScript/issues/29729. + // eslint-disable-next-line @typescript-eslint/ban-types | (string & {}); export type BorderRadiusValue = 'small' | 'medium'; diff --git a/src/types/menu.ts b/src/types/menu.ts index 14dcbd02..9bd4902a 100644 --- a/src/types/menu.ts +++ b/src/types/menu.ts @@ -1,4 +1,3 @@ -import { ButtonProps } from './button'; import { Alignment, AriaLabelingProps, @@ -9,6 +8,7 @@ import { StyleProps, } from '@react-types/shared'; import { Key, ReactElement, ReactNode } from 'react'; +import { ButtonProps } from './button'; import { OverlayTriggerProps } from './overlays'; export type MenuTriggerType = 'press' | 'longPress'; diff --git a/src/types/provider.ts b/src/types/provider.ts index f741d2d5..dc96556c 100644 --- a/src/types/provider.ts +++ b/src/types/provider.ts @@ -18,4 +18,4 @@ export interface ProviderProps extends ContextProps { children: ReactNode; } -export interface ProviderContext extends ContextProps {} +export type ProviderContext = ContextProps diff --git a/src/types/select.ts b/src/types/select.ts index c6ca98c1..99e772ea 100644 --- a/src/types/select.ts +++ b/src/types/select.ts @@ -1,3 +1,4 @@ +import { Validation, AriaValidationProps } from '../types'; import { LabelableProps, Alignment, AddonableProps } from './labelable'; import { CollectionBase } from './collection'; import { HelpTextProps, InputBase, TextInputBase } from './input'; @@ -6,7 +7,6 @@ import { SingleSelection } from './selection'; import { FocusableProps } from './events'; import { StyleProps } from './style'; import { DimensionValue } from './core'; -import { Validation, AriaValidationProps } from '../types'; export interface SelectProps extends CollectionBase, diff --git a/src/types/slider.ts b/src/types/slider.ts index 1de7ee4d..894d82f0 100644 --- a/src/types/slider.ts +++ b/src/types/slider.ts @@ -107,4 +107,4 @@ export interface ACSliderProps extends BarSliderBase, InputDOMProps { trackGradient?: string[]; } -export interface RangeSliderProps extends BarSliderBase> {} +export type RangeSliderProps = BarSliderBase> diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts index 90bae38a..841870f0 100644 --- a/src/utils/styleProps.ts +++ b/src/utils/styleProps.ts @@ -1,4 +1,5 @@ import { CSSProperties, HTMLAttributes } from 'react'; +import { useLocale } from '@react-aria/i18n'; import { BackgroundColorValue, BorderColorValue, @@ -13,7 +14,6 @@ import { StyleProps, ViewStyleProps, } from '../types'; -import { useLocale } from '@react-aria/i18n'; import { assertUnreachable } from './typeUtils'; type Breakpoint = 'base' | 'S' | 'M' | 'L' | string; @@ -169,25 +169,26 @@ export function convertStyleProps( direction: Direction, matchedBreakpoints: Breakpoint[] ) { - let style: CSSProperties = {}; - for (let key in props) { - let styleProp = handlers[key]; + const style: CSSProperties = {}; + for (const key in props) { + const styleProp = handlers[key]; if (!styleProp || props[key] == null) { continue; } + // eslint-disable-next-line prefer-const let [name, convert] = styleProp; if (typeof name === 'function') { name = name(direction); } - let prop = getResponsiveProp( + const prop = getResponsiveProp( props[key as keyof ViewStyleProps], matchedBreakpoints ); - let value = convert(prop); + const value = convert(prop); if (Array.isArray(name)) { - for (let k of name) { + for (const k of name) { (style as any)[k] = value; } } else { @@ -195,7 +196,7 @@ export function convertStyleProps( } } - for (let prop in borderStyleProps) { + for (const prop in borderStyleProps) { if (style[prop as keyof typeof borderStyleProps]) { (style as any)[borderStyleProps[prop as keyof typeof borderStyleProps]] = 'solid'; @@ -281,7 +282,7 @@ export function getResponsiveProp( ): T { if (prop && typeof prop === 'object' && !Array.isArray(prop)) { for (let i = 0; i < matchedBreakpoints.length; i++) { - let breakpoint = matchedBreakpoints[i]; + const breakpoint = matchedBreakpoints[i]; if (prop[breakpoint] != null) { return prop[breakpoint]; } @@ -300,19 +301,20 @@ export function useStyleProps( handlers: StyleHandlers = baseStyleProps, options: StylePropsOptions = {} ) { - let { ...otherProps } = props; - let { direction } = useLocale(); - let { matchedBreakpoints = ['base'] } = options; - let styles = convertStyleProps( + const { ...otherProps } = props; + const { direction } = useLocale(); + const { matchedBreakpoints = ['base'] } = options; + const styles = convertStyleProps( props, handlers, direction, matchedBreakpoints ); - let style = { ...styles }; + const style = { ...styles }; // @ts-ignore if (otherProps.className) { + // eslint-disable-next-line no-console console.warn( 'The className prop is unsafe and is unsupported in Arize Components. ' + 'Please use style props with AC variables, or UNSAFE_className if you absolutely must do something custom. ' + @@ -322,6 +324,7 @@ export function useStyleProps( // @ts-ignore if (otherProps.style) { + // eslint-disable-next-line no-console console.warn( 'The style prop is unsafe and is unsupported in React Arize Components. ' + 'Please use style props with AC variables, or UNSAFE_style if you absolutely must do something custom. ' + @@ -329,7 +332,7 @@ export function useStyleProps( ); } - let styleProps: HTMLAttributes = { + const styleProps: HTMLAttributes = { style, }; diff --git a/src/utils/useDOMRef.ts b/src/utils/useDOMRef.ts index 1ca8c7ae..48e2f8f8 100644 --- a/src/utils/useDOMRef.ts +++ b/src/utils/useDOMRef.ts @@ -29,7 +29,7 @@ export function createFocusableRef( export function useDOMRef( ref: DOMRef ): RefObject { - let domRef = useRef(null); + const domRef = useRef(null); useImperativeHandle(ref, () => createDOMRef(domRef)); return domRef; } @@ -38,7 +38,7 @@ export function useFocusableRef( ref: FocusableRef, focusableRef?: RefObject ): RefObject { - let domRef = useRef(null); + const domRef = useRef(null); useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef)); return domRef; } diff --git a/src/view/Content.tsx b/src/view/Content.tsx index fe150876..0d2c1015 100644 --- a/src/view/Content.tsx +++ b/src/view/Content.tsx @@ -1,7 +1,7 @@ -import { useDOMRef } from '../utils'; import { DOMRef } from '@react-types/shared'; import { filterDOMProps } from '@react-aria/utils'; import React, { forwardRef, ReactNode } from 'react'; +import { useDOMRef } from '../utils'; import { DOMProps } from '../types'; export interface ContentProps extends DOMProps { @@ -12,8 +12,8 @@ export interface ContentProps extends DOMProps { } function Content(props: ContentProps, ref: DOMRef) { - let { children, ...otherProps } = props; - let domRef = useDOMRef(ref); + const { children, ...otherProps } = props; + const domRef = useDOMRef(ref); return (