Skip to content

Commit c1e36d2

Browse files
committed
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
1 parent a4963e5 commit c1e36d2

32 files changed

Lines changed: 183 additions & 218 deletions

.storybook/preview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { Fragment } from 'react';
22
import { GlobalStyle } from './global-style';
3+
import type { DecoratorFn } from '@storybook/react';
34

45
// import react-toastify CSS files (overrides in react-toastify-override.ts)
56
import 'react-toastify/dist/ReactToastify.css';
67

7-
const withGlobalStyle = (Story) => (
8+
const withGlobalStyle: DecoratorFn = (Story) => (
89
<Fragment>
910
<GlobalStyle />
1011
<Story />

__stories__/helpers/constants/markup.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import {
88
AUTOSIZE_INPUT_CLS,
99
MENU_CONTAINER_CLS,
1010
SELECT_CONTAINER_CLS,
11-
CONTROL_CONTAINER_CLS
11+
CONTROL_CONTAINER_CLS,
12+
PLACEHOLDER_DEFAULT
1213
} from '../../../src/constants';
1314

1415
export const CLASS_NAME_HTML =
1516
`<div class="${SELECT_CONTAINER_CLS}">
1617
<div class="${CONTROL_CONTAINER_CLS}">
1718
<div>
18-
<div>Select option...</div>
19+
<div>${PLACEHOLDER_DEFAULT}</div>
1920
<input
2021
value=""
2122
type="text"

__stories__/helpers/constants/theme.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ const THEME_ANIMATIONS: Theme = {
2121
animation: FADE_IN_KEYFRAMES_STR
2222
}
2323
},
24-
placeholder: {
25-
animation: FADE_IN_KEYFRAMES_STR
26-
},
2724
};
2825

2926
export const ThemeEnum = {

__tests__/AriaLiveRegion.test.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react';
1+
import React, { type ComponentProps } from 'react';
22
import { render } from '@testing-library/react';
3+
import AriaLiveRegion from '../src/components/AriaLiveRegion';
34
import { getSelectedOptionMulti, ThemeTestHOC } from './helpers';
45
import type { FocusedOption, SelectedOption } from '../src/types';
56
import { ARIA_LIVE_CONTEXT_ID, ARIA_LIVE_SELECTION_ID } from '../src/constants';
6-
import AriaLiveRegion, { type AriaLiveRegionProps } from '../src/components/AriaLiveRegion';
7+
8+
type AriaLiveRegionProps = ComponentProps<typeof AriaLiveRegion>;
79

810
// ============================================
911
// Helper functions for AriaLiveRegion component
@@ -52,7 +54,6 @@ test('"ariaLive" prop can be passed as one of the accepted aria-live values and
5254
const ariaLive: AriaLiveRegionProps['ariaLive'] = 'assertive';
5355
const props = createAriaLiveRegionProps();
5456
const mergedProps = { ...props, ariaLive };
55-
5657
const { container } = renderAriaLiveRegion(mergedProps);
5758
const a11yTextRootSpanEl = container.firstChild;
5859

__tests__/AutosizeInput.test.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react';
1+
import React, { type ComponentProps } from 'react';
22
import { ThemeTestHOC } from './helpers';
33
import userEvent from '@testing-library/user-event';
44
import { render, fireEvent } from '@testing-library/react';
5+
import AutosizeInput from '../src/components/AutosizeInput';
56
import { AUTOSIZE_INPUT_CLS, AUTOSIZE_INPUT_TESTID } from '../src/constants';
6-
import AutosizeInput, { type AutosizeInputProps } from '../src/components/AutosizeInput';
7+
8+
type AutosizeInputProps = ComponentProps<typeof AutosizeInput>;
79

810
// ============================================
911
// Helper functions for AutosizeInput component

__tests__/IndicatorIcons.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React, { ReactNode } from 'react';
1+
import React, { type ReactNode, type ComponentProps } from 'react';
22
import { ThemeTestHOC } from './helpers';
33
import { render } from '@testing-library/react';
44
import userEvent from '@testing-library/user-event';
5+
import IndicatorIcons from '../src/components/IndicatorIcons';
56
import { CLEAR_ICON_CLS, CLEAR_ICON_TESTID, CARET_ICON_TESTID } from '../src/constants';
6-
import IndicatorIcons, { type IndicatorIconsProps } from '../src/components/IndicatorIcons';
7+
8+
type IndicatorIconsProps = ComponentProps<typeof IndicatorIcons>;
79

810
// ============================================
911
// Helper functions for IndicatorIcons component
@@ -107,7 +109,6 @@ test('clear icon can render as a ReactNode', async () => {
107109
const clearIconText = 'clear-icon-node';
108110
const clearIcon = <span>{clearIconText}</span>;
109111
const { props } = createIndicatorIconsProps();
110-
111112
const mergedProps = { ...props, clearIcon };
112113
const { getByText } = renderIndicatorIcons(mergedProps);
113114

@@ -130,7 +131,6 @@ test('caret icon can render as a ReactNode', async () => {
130131
const caretIconText = 'caret-icon-node';
131132
const caretIcon = <span>{caretIconText}</span>;
132133
const { props } = createIndicatorIconsProps();
133-
134134
const mergedProps = { ...props, caretIcon };
135135
const { getByText } = renderIndicatorIcons(mergedProps);
136136

__tests__/MenuList.test.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
1+
import React, { type ComponentProps } from 'react';
22
import { ThemeTestHOC } from './helpers';
33
import type { MenuOption } from '../src';
44
import { render } from '@testing-library/react';
5+
import MenuList from '../src/components/Menu/MenuList';
56
import { MENU_OPTIONS, RENDER_OPTION_LABEL_MOCK } from './helpers/utils';
6-
import MenuList, { type MenuListProps } from '../src/components/Menu/MenuList';
77
import {
88
MENU_ITEM_SIZE_DEFAULT,
99
MENU_MAX_HEIGHT_DEFAULT,
@@ -12,6 +12,8 @@ import {
1212
FOCUSED_OPTION_DEFAULT
1313
} from '../src/constants';
1414

15+
type MenuListProps = ComponentProps<typeof MenuList>;
16+
1517
// ============================================
1618
// Helper functions for Menu component
1719
// ============================================

__tests__/MultiValue.test.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React from 'react';
1+
import React, { type ComponentProps } from 'react';
22
import { render } from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
44
import { CLEAR_ICON_MV_TESTID } from '../src/constants';
5-
import MultiValue, { type MultiValueProps } from '../src/components/Value/MultiValue';
5+
import MultiValue from '../src/components/Value/MultiValue';
66
import { RENDER_OPTION_LABEL_MOCK, getOptionSingle, ThemeTestHOC, type Option } from './helpers';
77

8+
type MultiValueProps = ComponentProps<typeof MultiValue>;
9+
810
// ============================================
911
// Helper functions for MultiValue component
1012
// ============================================
@@ -48,7 +50,6 @@ test('"renderOptionLabel" callback should be executed and should render the sele
4850
const { props, renderOptionLabelSpy } = createMultiValueProps();
4951
const { getByText } = renderMultiValue(props);
5052
const { label } = props.data;
51-
5253
expect(renderOptionLabelSpy).toBeCalled();
5354
expect(getByText(label)).toBeInTheDocument();
5455
});

__tests__/Option.test.tsx

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -65,38 +65,25 @@ test('option parent element renders dynamic style attribute correctly', async ()
6565
const { container } = renderOption(props);
6666
const optionParentEl = container.querySelector('div');
6767
const optionCssProps = stringifyCSSProperties(OPTION_STYLE);
68-
6968
expect(optionParentEl).toHaveAttribute('style', optionCssProps);
7069
});
7170

7271
test('"renderOptionLabel" callback should be executed and the result rendered to DOM', async () => {
7372
const { props, renderOptionLabelSpy } = createOptionProps();
7473
const { label } = props.data.menuOptions[props.index];
7574
const { getByText } = renderOption(props);
76-
7775
expect(renderOptionLabelSpy).toHaveBeenCalled();
7876
expect(getByText(String(label))).toBeInTheDocument();
7977
});
8078

81-
test('option with "isDisabled" = FALSE should have a functioning onClick handler attached', async () => {
82-
const firstEnabledMenuOptionIndex = MENU_OPTIONS.findIndex((option) => !option.isDisabled);
83-
const { props, onClickSelectOptionSpy } = createOptionProps(firstEnabledMenuOptionIndex);
84-
const { user, container } = renderOption(props);
85-
const optionParentEl = container.querySelector('div') as HTMLDivElement;
86-
87-
await user.click(optionParentEl);
88-
89-
expect(onClickSelectOptionSpy).toBeCalled();
90-
});
91-
92-
test(`option with "isDisabled" = TRUE should not have an onClick handler attached and should have class - ${OPTION_DISABLED_CLS} - added to its classList`, async () => {
79+
test(`option with "isDisabled" = TRUE should have an onClick handler and the ${OPTION_DISABLED_CLS} class added to its classList`, async () => {
9380
const firstDisabledMenuOptionIndex = MENU_OPTIONS.findIndex((option) => !!option.isDisabled);
9481
const { props, onClickSelectOptionSpy } = createOptionProps(firstDisabledMenuOptionIndex);
9582
const { user, container } = renderOption(props);
9683
const optionParentEl = container.querySelector('div') as HTMLDivElement;
9784

9885
await user.click(optionParentEl);
9986

100-
expect(onClickSelectOptionSpy).not.toBeCalled();
87+
expect(onClickSelectOptionSpy).toBeCalled();
10188
expect(optionParentEl).toHaveClass(OPTION_DISABLED_CLS);
10289
});

__tests__/Select.test.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
2-
import { Select, type SelectProps } from '../src';
1+
import { Select } from '../src';
2+
import React, { type ComponentProps } from 'react';
33
import userEvent from '@testing-library/user-event';
44
import { render, fireEvent } from '@testing-library/react';
55
import {
@@ -12,6 +12,8 @@ import {
1212
CONTROL_CONTAINER_TESTID
1313
} from '../src/constants';
1414

15+
type SelectProps = ComponentProps<typeof Select>;
16+
1517
// ============================================
1618
// Helper functions for Select component
1719
// ============================================

0 commit comments

Comments
 (0)