updates: remove placeholder key from theme object (contained an animation property) - BREAKING; remove export of type 'SelectProps' from package (this can be accomplished by creating a new type using 'React.ComponentProps<typeof Select>' - BREAKING

Author: based-ghost

.storybook/preview.tsx

@@ -1,10 +1,11 @@
 import React, { Fragment } from 'react';
 import { GlobalStyle } from './global-style';
+import type { DecoratorFn } from '@storybook/react';
 
 // import react-toastify CSS files (overrides in react-toastify-override.ts)
 import 'react-toastify/dist/ReactToastify.css';
 
-const withGlobalStyle = (Story) => (
+const withGlobalStyle: DecoratorFn = (Story) => (
   <Fragment>
     <GlobalStyle />
     <Story />

__stories__/helpers/constants/markup.ts

@@ -8,14 +8,15 @@ import {
   AUTOSIZE_INPUT_CLS,
   MENU_CONTAINER_CLS,
   SELECT_CONTAINER_CLS,
-  CONTROL_CONTAINER_CLS
+  CONTROL_CONTAINER_CLS,
+  PLACEHOLDER_DEFAULT
 } from '../../../src/constants';
 
 export const CLASS_NAME_HTML =
   `<div class="${SELECT_CONTAINER_CLS}">
   <div class="${CONTROL_CONTAINER_CLS}">
     <div>
-      <div>Select option...</div>
+      <div>${PLACEHOLDER_DEFAULT}</div>
       <input
         value=""
         type="text"

__stories__/helpers/constants/theme.ts

@@ -21,9 +21,6 @@ const THEME_ANIMATIONS: Theme = {
       animation: FADE_IN_KEYFRAMES_STR
     }
   },
-  placeholder: {
-    animation: FADE_IN_KEYFRAMES_STR
-  },
 };
 
 export const ThemeEnum = {

__tests__/AriaLiveRegion.test.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { render } from '@testing-library/react';
+import AriaLiveRegion from '../src/components/AriaLiveRegion';
 import { getSelectedOptionMulti, ThemeTestHOC } from './helpers';
 import type { FocusedOption, SelectedOption } from '../src/types';
 import { ARIA_LIVE_CONTEXT_ID, ARIA_LIVE_SELECTION_ID } from '../src/constants';
-import AriaLiveRegion, { type AriaLiveRegionProps } from '../src/components/AriaLiveRegion';
+
+type AriaLiveRegionProps = ComponentProps<typeof AriaLiveRegion>;
 
 // ============================================
 // Helper functions for AriaLiveRegion component
@@ -52,7 +54,6 @@ test('"ariaLive" prop can be passed as one of the accepted aria-live values and
   const ariaLive: AriaLiveRegionProps['ariaLive'] = 'assertive';
   const props = createAriaLiveRegionProps();
   const mergedProps = { ...props, ariaLive };
-
   const { container } = renderAriaLiveRegion(mergedProps);
   const a11yTextRootSpanEl = container.firstChild;
 

__tests__/AutosizeInput.test.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { ThemeTestHOC } from './helpers';
 import userEvent from '@testing-library/user-event';
 import { render, fireEvent } from '@testing-library/react';
+import AutosizeInput from '../src/components/AutosizeInput';
 import { AUTOSIZE_INPUT_CLS, AUTOSIZE_INPUT_TESTID } from '../src/constants';
-import AutosizeInput, { type AutosizeInputProps } from '../src/components/AutosizeInput';
+
+type AutosizeInputProps = ComponentProps<typeof AutosizeInput>;
 
 // ============================================
 // Helper functions for AutosizeInput component

__tests__/IndicatorIcons.test.tsx

@@ -1,9 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode, type ComponentProps } from 'react';
 import { ThemeTestHOC } from './helpers';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import IndicatorIcons from '../src/components/IndicatorIcons';
 import { CLEAR_ICON_CLS, CLEAR_ICON_TESTID, CARET_ICON_TESTID } from '../src/constants';
-import IndicatorIcons, { type IndicatorIconsProps } from '../src/components/IndicatorIcons';
+
+type IndicatorIconsProps = ComponentProps<typeof IndicatorIcons>;
 
 // ============================================
 // Helper functions for IndicatorIcons component
@@ -107,7 +109,6 @@ test('clear icon can render as a ReactNode', async () => {
   const clearIconText = 'clear-icon-node';
   const clearIcon = <span>{clearIconText}</span>;
   const { props } = createIndicatorIconsProps();
-
   const mergedProps = { ...props, clearIcon };
   const { getByText } = renderIndicatorIcons(mergedProps);
 
@@ -130,7 +131,6 @@ test('caret icon can render as a ReactNode', async () => {
   const caretIconText = 'caret-icon-node';
   const caretIcon = <span>{caretIconText}</span>;
   const { props } = createIndicatorIconsProps();
-
   const mergedProps = { ...props, caretIcon };
   const { getByText } = renderIndicatorIcons(mergedProps);
 

__tests__/MenuList.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { ThemeTestHOC } from './helpers';
 import type { MenuOption } from '../src';
 import { render } from '@testing-library/react';
+import MenuList from '../src/components/Menu/MenuList';
 import { MENU_OPTIONS, RENDER_OPTION_LABEL_MOCK } from './helpers/utils';
-import MenuList, { type MenuListProps } from '../src/components/Menu/MenuList';
 import {
   MENU_ITEM_SIZE_DEFAULT,
   MENU_MAX_HEIGHT_DEFAULT,
@@ -12,6 +12,8 @@ import {
   FOCUSED_OPTION_DEFAULT
 } from '../src/constants';
 
+type MenuListProps = ComponentProps<typeof MenuList>;
+
 // ============================================
 // Helper functions for Menu component
 // ============================================

__tests__/MultiValue.test.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CLEAR_ICON_MV_TESTID } from '../src/constants';
-import MultiValue, { type MultiValueProps } from '../src/components/Value/MultiValue';
+import MultiValue from '../src/components/Value/MultiValue';
 import { RENDER_OPTION_LABEL_MOCK, getOptionSingle, ThemeTestHOC, type Option } from './helpers';
 
+type MultiValueProps = ComponentProps<typeof MultiValue>;
+
 // ============================================
 // Helper functions for MultiValue component
 // ============================================
@@ -48,7 +50,6 @@ test('"renderOptionLabel" callback should be executed and should render the sele
   const { props, renderOptionLabelSpy } = createMultiValueProps();
   const { getByText } = renderMultiValue(props);
   const { label } = props.data;
-
   expect(renderOptionLabelSpy).toBeCalled();
   expect(getByText(label)).toBeInTheDocument();
 });

__tests__/Option.test.tsx

@@ -65,38 +65,25 @@ test('option parent element renders dynamic style attribute correctly', async ()
   const { container } = renderOption(props);
   const optionParentEl = container.querySelector('div');
   const optionCssProps = stringifyCSSProperties(OPTION_STYLE);
-
   expect(optionParentEl).toHaveAttribute('style', optionCssProps);
 });
 
 test('"renderOptionLabel" callback should be executed and the result rendered to DOM', async () => {
   const { props, renderOptionLabelSpy } = createOptionProps();
   const { label } = props.data.menuOptions[props.index];
   const { getByText } = renderOption(props);
-
   expect(renderOptionLabelSpy).toHaveBeenCalled();
   expect(getByText(String(label))).toBeInTheDocument();
 });
 
-test('option with "isDisabled" = FALSE should have a functioning onClick handler attached', async () => {
-  const firstEnabledMenuOptionIndex = MENU_OPTIONS.findIndex((option) => !option.isDisabled);
-  const { props, onClickSelectOptionSpy } = createOptionProps(firstEnabledMenuOptionIndex);
-  const { user, container } = renderOption(props);
-  const optionParentEl = container.querySelector('div') as HTMLDivElement;
-
-  await user.click(optionParentEl);
-
-  expect(onClickSelectOptionSpy).toBeCalled();
-});
-
-test(`option with "isDisabled" = TRUE should not have an onClick handler attached and should have class - ${OPTION_DISABLED_CLS} - added to its classList`, async () => {
+test(`option with "isDisabled" = TRUE should have an onClick handler and the ${OPTION_DISABLED_CLS} class added to its classList`, async () => {
   const firstDisabledMenuOptionIndex = MENU_OPTIONS.findIndex((option) => !!option.isDisabled);
   const { props, onClickSelectOptionSpy } = createOptionProps(firstDisabledMenuOptionIndex);
   const { user, container } = renderOption(props);
   const optionParentEl = container.querySelector('div') as HTMLDivElement;
 
   await user.click(optionParentEl);
 
-  expect(onClickSelectOptionSpy).not.toBeCalled();
+  expect(onClickSelectOptionSpy).toBeCalled();
   expect(optionParentEl).toHaveClass(OPTION_DISABLED_CLS);
 });

__tests__/Select.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Select, type SelectProps } from '../src';
+import { Select } from '../src';
+import React, { type ComponentProps } from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, fireEvent } from '@testing-library/react';
 import {
@@ -12,6 +12,8 @@ import {
   CONTROL_CONTAINER_TESTID
 } from '../src/constants';
 
+type SelectProps = ComponentProps<typeof Select>;
+
 // ============================================
 // Helper functions for Select component
 // ============================================