@bitrise/bitkit 13.344.0 → 13.345.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.344.0",
+  "version": "13.345.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -55,7 +55,7 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@bitrise/eslint-plugin": "^2.12.0",
+    "@bitrise/eslint-plugin": "^4.1.0",
     "@google-cloud/storage": "^7.18.0",
     "@storybook/addon-docs": "^9.1.17",
     "@storybook/addon-links": "^9.1.17",
@@ -69,11 +69,9 @@
     "@types/luxon": "^3.7.1",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "axios": "^1.13.2",
     "chakra-ui-2--cli": "npm:@chakra-ui/cli@2.5.8",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.2",
     "glob": "^11.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/Components/Accordion/AccordionItem.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import {
   AccordionButton,
   AccordionIcon,
@@ -8,6 +7,7 @@ import {
   CollapseProps,
   useAccordionStyles,
 } from 'chakra-ui-2--react';
+import { ReactNode } from 'react';
 
 export interface AccordionItemProps {
   buttonContent: ReactNode | ((props: { isExpanded: boolean; isDisabled: boolean }) => ReactNode);

package/src/Components/Avatar/Avatar.theme.ts

@@ -1,4 +1,5 @@
 import type { ComponentStyleConfig } from 'chakra-ui-2--theme';
+
 import { rem } from '../../utils/utils';
 import { AvatarProps, AvatarSizes, AvatarVariant } from './Avatar';
 

package/src/Components/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from 'chakra-ui-2--react';
+import { useState } from 'react';
+
 import Icon, { TypeIconName } from '../Icon/Icon';
 
 export type AvatarSizes = '24' | '32' | '40' | '48' | '64' | '128';

package/src/Components/Badge/Badge.theme.ts

@@ -1,4 +1,5 @@
 import { SystemStyleObject } from 'chakra-ui-2--styled-system';
+
 import { BadgeColorScheme, BadgeProps } from './Badge';
 
 const baseStyle: SystemStyleObject = {

package/src/Components/Badge/Badge.tsx

@@ -1,4 +1,5 @@
 import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps, forwardRef } from 'chakra-ui-2--react';
+
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
 

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,3 @@
-import { Children } from 'react';
 import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem,
@@ -6,8 +5,10 @@ import {
   BreadcrumbSeparator,
   forwardRef,
 } from 'chakra-ui-2--react';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import { Children } from 'react';
+
 import { useResponsive } from '../../hooks';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface BreadcrumbProps extends ChakraBreadcrumbProps {
   hasSeparatorAfterLast?: boolean;

package/src/Components/Button/Button.theme.ts

@@ -1,4 +1,5 @@
 import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from 'chakra-ui-2--styled-system';
+
 import { rem } from '../../utils/utils';
 import { ButtonProps } from './Button';
 

package/src/Components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef } from 'chakra-ui-2--react';
+
 import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {

package/src/Components/Card/Card.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, HTMLChakraProps, useStyleConfig } from 'chakra-ui-2--react';
+
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {

package/src/Components/CloseButton/CloseButton.theme.ts

@@ -4,7 +4,6 @@ const sizes = {
   small: { h: '24', w: '24' },
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
 const _disabled = {
   background: 'transparent',
   cursor: 'not-allowed',

package/src/Components/CloseButton/CloseButton.tsx

@@ -3,6 +3,7 @@ import {
   CloseButtonProps as ChakraCloseButtonProps,
   forwardRef,
 } from 'chakra-ui-2--react';
+
 import Icon from '../Icon/Icon';
 import CloseButtonTheme from './CloseButton.theme';
 

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -1,4 +1,5 @@
 import { defineStyle, defineStyleConfig, SystemStyleObject } from 'chakra-ui-2--styled-system';
+
 import { rem } from '../../utils/utils';
 import { CodeSnippetProps } from './CodeSnippet';
 

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react';
 import { CollapseProps, useClipboard, useMultiStyleConfig } from 'chakra-ui-2--react';
+import { useState } from 'react';
+
 import Box, { BoxProps } from '../Box/Box';
-import Tooltip from '../Tooltip/Tooltip';
 import Button from '../Button/Button';
 import Collapse from '../Collapse/Collapse';
 import IconButton from '../IconButton/IconButton';
+import Tooltip from '../Tooltip/Tooltip';
 
 export interface CodeSnippetProps extends Omit<BoxProps, 'children'> {
   children: string;

package/src/Components/ColorButton/ColorButton.tsx

@@ -4,6 +4,7 @@ import {
   forwardRef,
   useStyleConfig,
 } from 'chakra-ui-2--react';
+
 import { ColorScheme } from '../../types/bitkit';
 
 export interface ColorButtonProps extends ChakraButtonProps {

package/src/Components/ControlButton/ControlButton.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'chakra-ui-2--react';
+
 import IconButton, { IconButtonProps } from '../IconButton/IconButton';
 
 export interface ControlButtonProps extends Omit<IconButtonProps, 'iconSize' | 'size' | 'variant'> {

package/src/Components/DataWidget/DataWidget.theme.ts

@@ -1,4 +1,5 @@
 import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
+
 import { rem } from '../../utils/utils';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['container', 'title', 'items']);

package/src/Components/DataWidget/DataWidget.tsx

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
+import { ReactNode } from 'react';
+
 import Box from '../Box/Box';
 import Card, { CardProps } from '../Card/Card';
-import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
 
 export interface DataWidgetProps extends CardProps {

package/src/Components/DatePicker/DatePicker.context.ts

@@ -1,7 +1,8 @@
 import { createContext } from 'chakra-ui-2--react-utils';
 import { DateTime } from 'luxon';
-import { DateRange } from './useDateRange';
+
 import type { DatePickerDayViewProps } from './DatePickerDay';
+import { DateRange } from './useDateRange';
 
 interface Context {
   dayTooltip?: DatePickerDayViewProps['tooltip'];

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,22 +1,23 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { PopoverAnchor } from 'chakra-ui-2--react';
 import { DateTime } from 'luxon';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import FocusLock from 'react-focus-lock';
-import { PopoverAnchor } from 'chakra-ui-2--react';
+
+import useResponsive from '../../hooks/useResponsive';
 import { useObjectMemo } from '../../utils/utils';
-import Popover from '../Popover/Popover';
-import PopoverContent from '../Popover/PopoverContent';
 import Box from '../Box/Box';
-import useResponsive from '../../hooks/useResponsive';
 import Button from '../Button/Button';
-import DatePickerMonth from './DatePickerMonth';
+import Popover from '../Popover/Popover';
+import PopoverContent from '../Popover/PopoverContent';
 import { DatePickerContext } from './DatePicker.context';
+import { DatePickerDayViewProps } from './DatePickerDay';
+import DatePickerFooter from './DatePickerFooter';
+import DatePickerMonth from './DatePickerMonth';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
 import useDateRange, { DateRange } from './useDateRange';
 import useViewDate from './useViewDate';
-import DatePickerFooter from './DatePickerFooter';
-import { DatePickerDayViewProps } from './DatePickerDay';
 
-export { useDateRange, DateRange };
+export { DateRange, useDateRange };
 
 export type DatePickerProps = {
   children?: React.ReactNode;
@@ -128,6 +129,7 @@ const DatePicker = (props: DatePickerProps) => {
   );
 
   const handleSelect = useCallback(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     (date: DateTime) => {
       let previewNew: 'from' | 'to' | undefined;
       let dateFromNew = dateFrom;
@@ -188,6 +190,7 @@ const DatePicker = (props: DatePickerProps) => {
   const onMonthClickLeft = useCallback(() => setIsMonthSelector('left'), []);
   const onMonthClickRight = useCallback(() => setIsMonthSelector('right'), []);
   const onMonthSelected = useCallback(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     (month: number, year: number) => {
       if (isMonthSelector === 'left') {
         updateLeftViewDate({ month, year });

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -1,7 +1,8 @@
-import { ReactNode, useCallback } from 'react';
-import { DateTime, Settings } from 'luxon';
 import { BoxProps, useMultiStyleConfig } from 'chakra-ui-2--react';
 import { createContext } from 'chakra-ui-2--react-utils';
+import { DateTime, Settings } from 'luxon';
+import { ReactNode, useCallback } from 'react';
+
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
@@ -139,12 +140,12 @@ const DatePickerDay = ({ n }: { n: number }) => {
     } else if (isNextMonth) {
       onNextMonth();
     }
-  }, [isPreviousMonth, isSelectable, onSelect, date, onPreviousMonth, onNextMonth]);
+  }, [isPreviousMonth, isNextMonth, isSelectable, onSelect, date, onPreviousMonth, onNextMonth]);
   const onMouseEnter = useCallback(() => {
     if (isSelectable) {
       onPreview(date);
     }
-  }, [onSelect, isSelectable, date]);
+  }, [onPreview, isSelectable, date]);
 
   if (isNextMonth && !showOutsideDays) {
     return null;

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -1,9 +1,9 @@
 import Box from '../Box/Box';
-import Text from '../Text/Text';
 import Button from '../Button/Button';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
-import { DateRange } from './useDateRange';
+import Text from '../Text/Text';
 import { useDatePickerContext } from './DatePicker.context';
+import { DateRange } from './useDateRange';
 
 const DatePickerFooter = ({
   mode,

package/src/Components/DatePicker/DatePickerGrid.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import Box, { BoxProps } from '../Box/Box';
 
 type Props = BoxProps;

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
 import { createContext } from 'chakra-ui-2--react-utils';
+import { ReactNode } from 'react';
+
 import { useObjectMemo } from '../../utils/utils';
 import Box, { BoxProps } from '../Box/Box';
 import IconButton from '../IconButton/IconButton';

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -1,5 +1,3 @@
-import { createElement, Fragment, useCallback, useId } from 'react';
-import { DateTime, Info } from 'luxon';
 import {
   NumberDecrementStepper,
   NumberIncrementStepper,
@@ -7,13 +5,16 @@ import {
   NumberInputField,
   NumberInputStepper,
 } from 'chakra-ui-2--react';
+import { DateTime, Info } from 'luxon';
+import { createElement, Fragment, useCallback, useId } from 'react';
+
 import { useObjectMemo } from '../../utils/utils';
-import Button from '../Button/Button';
 import Box from '../Box/Box';
+import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
-import DatePickerGrid from './DatePickerGrid';
 import DatePickerDay, { DatePickerDayContext } from './DatePickerDay';
+import DatePickerGrid from './DatePickerGrid';
 import DatePickerHeader, {
   DatePickerHeaderContent,
   DatePickerHeaderNext,
@@ -33,7 +34,7 @@ interface Props {
 const days = createElement(
   Fragment,
   {},
-  ...Array.from({ length: daysCount }).map((_, i) => <DatePickerDay n={i + 1} />),
+  ...Array.from({ length: daysCount }).map((_, i) => <DatePickerDay key={i} n={i + 1} />),
 );
 
 export const datePickerMinYear = 1990;

package/src/Components/DatePicker/DatePickerMonthSelector.tsx

@@ -1,4 +1,3 @@
-import { ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
 import {
   NumberDecrementStepper,
   NumberIncrementStepper,
@@ -8,9 +7,11 @@ import {
   useMultiStyleConfig,
 } from 'chakra-ui-2--react';
 import { DateTime, Info } from 'luxon';
+import { ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
+
 import Box from '../Box/Box';
-import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
 import DatePickerHeader, {
   DatePickerHeaderContent,
   DatePickerHeaderNext,
@@ -68,6 +69,7 @@ const DatePickerMonthSelector = ({
   const onNextYear = useCallback(() => setSelectedYear((year) => year + 1), []);
   const yearRef = useRef<HTMLInputElement>(null);
   useEffect(() => yearRef.current?.focus(), []);
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const monthClicked = useCallback((m: number) => onMonthSelected(m, selectedYear), [selectedYear]);
   const monthId = useId();
   return (

package/src/Components/DatePicker/useDateRange.ts

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { DateTime } from 'luxon';
+import { useMemo } from 'react';
 
 export class DateRange {
   public from?: DateTime;
@@ -53,7 +53,9 @@ function useDateRange(arg1?: DateTime | [DateTime | undefined, DateTime | undefi
   const fromParts = from?.toObject();
   const toParts = to?.toObject();
   return useMemo(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     () => new DateRange(from as DateTime | undefined, to as DateTime | undefined),
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     [fromParts?.year, fromParts?.month, fromParts?.day, toParts?.year, toParts?.month, toParts?.day],
   );
 }

package/src/Components/DatePicker/useViewDate.ts

@@ -1,5 +1,5 @@
-import { useCallback, useReducer } from 'react';
 import { DateObjectUnits, DateTime } from 'luxon';
+import { useCallback, useReducer } from 'react';
 
 function useViewDate({ initalView }: { initalView?: DateTime }): {
   leftViewDate: DateTime;

package/src/Components/DefinitionTooltip/DefinitionTooltip.theme.ts

@@ -1,4 +1,5 @@
 import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
+
 import { rem } from '../../utils/utils';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['content', 'trigger']);

package/src/Components/DefinitionTooltip/DefinitionTooltip.tsx

@@ -1,8 +1,9 @@
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
+
+import Box, { BoxProps } from '../Box/Box';
 import Popover, { PopoverProps } from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import PopoverTrigger from '../Popover/PopoverTrigger';
-import Box, { BoxProps } from '../Box/Box';
 
 export interface DefinitionTooltipProps extends Omit<PopoverProps, 'children'> {
   children: string;

package/src/Components/Dialog/Dialog.context.tsx

@@ -1,4 +1,5 @@
 import { createContext, ReactNode, useContext } from 'react';
+
 import { DialogProps } from './DialogProps';
 
 export type DialogContextValueType = {

package/src/Components/Dialog/Dialog.tsx

@@ -1,4 +1,3 @@
-import { useId } from 'react';
 import {
   ComponentWithAs,
   Modal,
@@ -9,6 +8,8 @@ import {
   useBreakpointValue,
   usePrefersReducedMotion,
 } from 'chakra-ui-2--react';
+import { useId } from 'react';
+
 import { BREAKPOINTS } from '../../types/bitkit';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';

package/src/Components/Dialog/DialogBody.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
 import { ModalBody, ModalBodyProps, useModalContext } from 'chakra-ui-2--react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 import Box, { BoxProps } from '../Box/Box';
 import Icon from '../Icon/Icon';
 import { useDialogContext } from './Dialog.context';
@@ -32,6 +33,7 @@ const ScrollableDialogBody = (props: DialogBodyProps) => {
 
   const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
 
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const updateScrollButtonVisibility = useCallback(() => {
     const content = contentRef.current;
 

package/src/Components/Dot/Dot.tsx

@@ -1,4 +1,5 @@
 import { BoxProps, forwardRef } from 'chakra-ui-2--react';
+
 import Box from '../Box/Box';
 
 export interface DotProps extends BoxProps {

package/src/Components/DraggableCard/DraggableCard.theme.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
 
 const keys = ['card', 'wrapper', 'handler'];

package/src/Components/DraggableCard/DraggableCard.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-underscore-dangle */
-import { ForwardedRef, forwardRef } from 'react';
+
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
+import { ForwardedRef, forwardRef } from 'react';
+
 import Box from '../Box/Box';
 import Card, { CardProps } from '../Card/Card';
 
@@ -13,7 +14,15 @@ export interface DraggableCardProps extends CardProps {
 }
 
 const DraggableCard = forwardRef<HTMLDivElement, DraggableCardProps>((props, ref) => {
-  const { activatorListeners, activatorRef, children, cursor, isDragging, isOverlay, ...rest } = props;
+  const {
+    activatorListeners,
+    activatorRef,
+    children,
+    cursor: _cursor,
+    isDragging,
+    isOverlay: _isOverlay,
+    ...rest
+  } = props;
 
   const style = useMultiStyleConfig('DraggableCard', props);
 
@@ -36,4 +45,6 @@ const DraggableCard = forwardRef<HTMLDivElement, DraggableCardProps>((props, ref
   );
 });
 
+DraggableCard.displayName = 'DraggableCard';
+
 export default DraggableCard;

package/src/Components/Drawer/Drawer.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import {
   BoxProps,
   Drawer as ChakraDrawer,
@@ -15,6 +14,8 @@ import {
   ModalHeaderProps,
   ModalOverlayProps,
 } from 'chakra-ui-2--react';
+import { ReactNode } from 'react';
+
 import Icon from '../Icon/Icon';
 
 export interface DrawerProps extends Pick<

package/src/Components/Drawer/useDrawer.tsx

@@ -1,4 +1,3 @@
-import { ReactNode, useState } from 'react';
 import {
   DrawerContentProps,
   DrawerProps as ChakraDrawerProps,
@@ -8,6 +7,8 @@ import {
   ModalOverlayProps,
   useDisclosure,
 } from 'chakra-ui-2--react';
+import { ReactNode, useState } from 'react';
+
 import Drawer from './Drawer';
 
 export type UseDrawerProps = {

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -1,6 +1,7 @@
-import { ComponentProps, ReactNode } from 'react';
 import { createStylesContext } from 'chakra-ui-2--react';
 import { createContext } from 'chakra-ui-2--react-utils';
+import { ComponentProps, ReactNode } from 'react';
+
 import { DropdownProps } from './DropdownProps';
 
 const [DropdownStylesProvider, useDropdownStyles] = createStylesContext('Dropdown');

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,3 +1,13 @@
+import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import {
+  chakra,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  useControllableState,
+  useMergeRefs,
+  useMultiStyleConfig,
+} from 'chakra-ui-2--react';
 import React, {
   cloneElement,
   createContext,
@@ -12,32 +22,23 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  chakra,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  useControllableState,
-  useMergeRefs,
-  useMultiStyleConfig,
-} from 'chakra-ui-2--react';
-import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+
+import { getDataAttributes } from '../../utils/utils';
+import { AvatarProps } from '../Avatar/Avatar';
+import Box from '../Box/Box';
+import FormLabel from '../Form/FormLabel';
+import IconButton from '../IconButton/IconButton';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 import SearchInput from '../SearchInput/SearchInput';
-import FormLabel from '../Form/FormLabel';
-import { AvatarProps } from '../Avatar/Avatar';
-import { getDataAttributes } from '../../utils/utils';
 import Tag from '../Tag/Tag';
-import Box from '../Box/Box';
 import Text from '../Text/Text';
-import IconButton from '../IconButton/IconButton';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
-import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
+import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
+import { DropdownProps } from './DropdownProps';
 import useFloatingDropdown from './hooks/useFloatingDropdown';
 import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
-import { DropdownProps } from './DropdownProps';
 
 const MultiSelectContext = createContext<
   | {
@@ -98,7 +99,7 @@ const DropdownSearch = ({
     />
   );
 };
-export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };
+export { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownSearch, NoResultsFound };
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   return useMemo(() => {
@@ -108,6 +109,7 @@ function useOptionListWithIndexes({ children }: { children: ReactNode }) {
       if (React.isValidElement(ch)) {
         if (ch.type === DropdownOption || ch.type === DropdownDetailedOption) {
           const index = idx;
+          // eslint-disable-next-line react-hooks/immutability
           idx += 1;
           return cloneElement(ch, {
             ...ch.props,
@@ -614,6 +616,8 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   },
 );
 
+Dropdown.displayName = 'Dropdown';
+
 export function typedDropdown<T>() {
   return {
     Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,

package/src/Components/Dropdown/DropdownButton.tsx

@@ -1,7 +1,8 @@
-import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from 'chakra-ui-2--react';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import { forwardRef, ReactNode } from 'react';
+
 import Avatar, { AvatarProps } from '../Avatar/Avatar';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { useDropdownStyles } from './Dropdown.context';
 import { DropdownProps } from './DropdownProps';
 
@@ -26,7 +27,7 @@ const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     {
       avatar,
       blurHandler,
-      children,
+      children: _,
       disabled,
       formLabel,
       iconName,
@@ -93,4 +94,6 @@ const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
   },
 );
 
+DropdownButton.displayName = 'DropdownButton';
+
 export default DropdownButton;