Skip to content

Commit

Permalink
Merge branch 'main' into dkilgore-eightfold/tooltip-rounding-error-fixup
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold authored Mar 21, 2023
2 parents d3c0d65 + 1cba3fd commit 54eb55b
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 16 deletions.
114 changes: 105 additions & 9 deletions src/components/Select/Select.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,19 @@ describe('Select', () => {
await sleep(ANIMATION_DURATION);
const option = getByText('Option 1');
fireEvent.click(option);
expect(handleChange).toHaveBeenCalledWith(['option1']);
expect(handleChange).toHaveBeenCalledWith(
['option1'],
[
{
hideOption: false,
id: 'Option 1-0',
object: undefined,
selected: true,
text: 'Option 1',
value: 'option1',
},
]
);
});

test('Selects multiple options', async () => {
Expand All @@ -99,7 +111,27 @@ describe('Select', () => {
fireEvent.click(option1);
const option2 = getByText('Option 2');
fireEvent.click(option2);
expect(handleChange).toHaveBeenCalledWith(['option1', 'option2']);
expect(handleChange).toHaveBeenCalledWith(
['option1', 'option2'],
[
{
hideOption: false,
id: 'Option 1-0',
object: undefined,
selected: true,
text: 'Option 1',
value: 'option1',
},
{
hideOption: false,
id: 'Option 2-1',
object: undefined,
selected: true,
text: 'Option 2',
value: 'option2',
},
]
);
});

test('Renders with default value', () => {
Expand Down Expand Up @@ -128,7 +160,33 @@ describe('Select', () => {
await sleep(ANIMATION_DURATION);
const option1 = getByText('Option 1');
fireEvent.click(option1);
expect(handleChange).toHaveBeenCalledWith(['option1']);
expect(handleChange).toHaveBeenCalledWith([], []);
expect(handleChange).toHaveBeenCalledWith(
['option2'],
[
{
hideOption: false,
id: 'Option 2-1',
object: undefined,
selected: true,
text: 'Option 2',
value: 'option2',
},
]
);
expect(handleChange).toHaveBeenCalledWith(
['option1'],
[
{
hideOption: false,
id: 'Option 1-0',
object: undefined,
selected: true,
text: 'Option 1',
value: 'option1',
},
]
);
});

test('Renders with default values when multiple', () => {
Expand Down Expand Up @@ -160,11 +218,35 @@ describe('Select', () => {
await sleep(ANIMATION_DURATION);
const option1 = getByText('Option 1');
fireEvent.click(option1);
expect(handleChange).toHaveBeenCalledWith([
'option1',
'option2',
'option3',
]);
expect(handleChange).toHaveBeenCalledWith(
['option1', 'option2', 'option3'],
[
{
hideOption: false,
id: 'Option 1-0',
object: undefined,
selected: true,
text: 'Option 1',
value: 'option1',
},
{
hideOption: false,
id: 'Option 2-1',
object: undefined,
selected: true,
text: 'Option 2',
value: 'option2',
},
{
hideOption: false,
id: 'Option 3-2',
object: undefined,
selected: true,
text: 'Option 3',
value: 'option3',
},
]
);
});

test('Renders with clear button', () => {
Expand Down Expand Up @@ -192,7 +274,21 @@ describe('Select', () => {
await sleep(ANIMATION_DURATION);
const clearButton = container.querySelector('.clear-icon-button');
fireEvent.click(clearButton);
expect(handleChange).toHaveBeenCalledWith([]);
expect(handleChange).toHaveBeenCalledWith([], []);
expect(handleChange).toHaveBeenCalledWith(
['option2'],
[
{
hideOption: false,
id: 'Option 2-1',
object: undefined,
selected: true,
text: 'Option 2',
value: 'option2',
},
]
);
expect(handleChange).toHaveBeenCalledWith([], []);
});

test('Select clearable input value is cleared and clear button is no longer visible', async () => {
Expand Down
14 changes: 10 additions & 4 deletions src/components/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
selected: false,
hideOption: false,
id: option.text + '-' + index,
object: option.object,
...option,
}))
);
Expand All @@ -128,19 +129,23 @@ export const Select: FC<SelectProps> = React.forwardRef(
? size
: contextuallySized || size;

const getSelectedOptions = (): SelectOption['value'][] => {
const getSelectedOptionValues = (): SelectOption['value'][] => {
return options
.filter((option: SelectOption) => option.selected)
.map((option: SelectOption) => option.value);
};

const getSelectedOptions = (): SelectOption['value'][] => {
return options.filter((option: SelectOption) => option.selected);
};

const { count, filled, width } = useMaxVisibleSections(
inputRef,
pillRefs,
168,
8,
1,
getSelectedOptions().length
getSelectedOptionValues().length
);

useEffect(() => {
Expand All @@ -152,14 +157,15 @@ export const Select: FC<SelectProps> = React.forwardRef(
selected: !!selected.find((opt) => opt.value === option.value),
hideOption: false,
id: option.text + index,
object: option.object,
...option,
}))
);
}, [_options, isLoading]);

useEffect(() => {
onOptionsChange?.(getSelectedOptions());
}, [getSelectedOptions().join('')]);
onOptionsChange?.(getSelectedOptionValues(), getSelectedOptions());
}, [getSelectedOptionValues().join('')]);

useEffect(() => {
const updatedOptions = options.map((opt) => ({
Expand Down
11 changes: 8 additions & 3 deletions src/components/Select/Select.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,13 @@ export interface SelectOption extends MenuItemButtonProps {
*/
hideOption?: boolean;
/**
* The select option id.
* The select option element id.
*/
id?: string;
/**
* The optional select JSON object.
*/
object?: object;
/**
* The select option selected state.
*/
Expand Down Expand Up @@ -128,9 +132,10 @@ export interface SelectProps
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
/**
* Callback called when options are selected/unselected.
* @param options {SelectOption[]}
* @param values {SelectOption['value'].value[]}
* @param options {SelectOption['value'][]}
*/
onOptionsChange?: (options: SelectOption[]) => void;
onOptionsChange?: (values: SelectOption[], options?: SelectOption[]) => void;
/**
* The select options.
* @default []
Expand Down

0 comments on commit 54eb55b

Please sign in to comment.