Skip to content

Commit c1e36d2

Browse files
based-ghostbased-ghost
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

+183
-218
lines changed

‎.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
// ============================================

‎__tests__/Value.test.tsx

Lines changed: 4 additions & 2 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';
2+
import Value from '../src/components/Value';
23
import { render } from '@testing-library/react';
34
import type { SelectedOption } from '../src/types';
4-
import Value, { type ValueProps } from '../src/components/Value';
55
import { PLACEHOLDER_DEFAULT, EMPTY_ARRAY } from '../src/constants';
66
import { RENDER_OPTION_LABEL_MOCK, RENDER_MULTI_OPTIONS_MOCK, getSelectedOptionSingle, ThemeTestHOC } from './helpers';
77

8+
type ValueProps = ComponentProps<typeof Value>;
9+
810
// ============================================
911
// Helper functions for Value component
1012
// ============================================

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,21 +73,21 @@
7373
"@types/react-dom": "^18.0.8",
7474
"@types/react-window": "^1.8.5",
7575
"@types/styled-components": "^5.1.26",
76-
"@typescript-eslint/eslint-plugin": "^5.42.0",
77-
"@typescript-eslint/parser": "^5.42.0",
78-
"babel-jest": "^29.2.2",
76+
"@typescript-eslint/eslint-plugin": "^5.42.1",
77+
"@typescript-eslint/parser": "^5.42.1",
78+
"babel-jest": "^29.3.1",
7979
"babel-loader": "^9.1.0",
8080
"babel-plugin-styled-components": "^2.0.7",
8181
"chromatic": "^6.11.4",
8282
"cross-env": "^7.0.3",
8383
"enzyme": "^3.11.0",
84-
"eslint": "^8.26.0",
84+
"eslint": "^8.27.0",
8585
"eslint-config-prettier": "^8.5.0",
8686
"eslint-plugin-prettier": "^4.2.1",
8787
"eslint-plugin-react": "^7.31.10",
8888
"eslint-plugin-react-hooks": "^4.6.0",
89-
"jest": "^29.2.2",
90-
"jest-environment-jsdom": "^29.2.2",
89+
"jest": "^29.3.1",
90+
"jest-environment-jsdom": "^29.3.1",
9191
"jest-enzyme": "^7.1.2",
9292
"npm-run-all": "^4.1.5",
9393
"prettier": "^2.7.1",
@@ -101,7 +101,7 @@
101101
"rollup-plugin-terser": "^7.0.2",
102102
"styled-components": "^5.3.6",
103103
"typescript": "^4.8.4",
104-
"webpack": "^5.74.0"
104+
"webpack": "^5.75.0"
105105
},
106106
"peerDependencies": {
107107
"react": ">=16.8.6",

0 commit comments

Comments
 (0)