@moda/om 21.1.1 → 21.2.1

package/src/components/Select/Select.tsx

@@ -11,6 +11,8 @@ import { useSelect } from './useSelect';
 
 import './Select.scss';
 
+export type SelectExtraOption = { callback: () => void; disabled?: boolean; label: string };
+
 export type SelectableOption = {
   value: string;
   label: string;
@@ -39,6 +41,7 @@ export type SelectProps = Omit<
   value?: string | undefined;
   dataTestId?: string;
   colorSwatch?: TextColor;
+  extraOption?: SelectExtraOption;
 };
 
 export const Select: React.FC<SelectProps> = ({
@@ -60,6 +63,7 @@ export const Select: React.FC<SelectProps> = ({
   value,
   dataTestId,
   colorSwatch,
+  extraOption,
   ...rest
 }) => {
   const { state, dispatch, Mode, selectRef } = useSelect({ value, defaultValue });
@@ -165,6 +169,7 @@ export const Select: React.FC<SelectProps> = ({
             onSelect={handleSelect}
             onFocus={handleFocus}
             selectedOption={selected}
+            extraOption={extraOption}
           />
         )}
       </div>

package/src/components/Select/SelectOptions.scss

@@ -21,4 +21,11 @@
     @include om.overflow-scroll();
     max-height: om.space(12);
   }
+
+  &__extra-option {
+    left: 50%;
+    margin-bottom: om.space(1);
+    margin-top: om.space(2);
+    transform: translate(-50%);
+  }
 }

package/src/components/Select/SelectOptions.tsx

@@ -4,8 +4,9 @@ import { useKeyboardListNavigation } from '../../hooks/useKeyboardListNavigation
 import { useUpdateEffect } from '../../hooks/useUpdateEffect';
 import { Text } from '../Text';
 import { SearchInput } from '../SearchInput';
+import { ControlLink } from '../ControlLink';
 import { SelectOption } from './SelectOption';
-import { SelectableOption } from './Select';
+import { SelectableOption, SelectExtraOption } from './Select';
 
 import './SelectOptions.scss';
 
@@ -21,6 +22,7 @@ export type SelectOptionsProps = Omit<
   onFocus?(option: SelectableOption): void;
   onSelect(option: SelectableOption): void;
   dataTestId?: string;
+  extraOption?: SelectExtraOption;
 };
 
 export const SelectOptions: React.FC<SelectOptionsProps> = ({
@@ -33,6 +35,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
   onFocus,
   className,
   dataTestId,
+  extraOption,
   ...rest
 }) => {
   const [searchPhrase, setSearchPhrase] = useState('');
@@ -92,6 +95,16 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
             onClick={onSelect}
           />
         ))}
+
+        {extraOption && (
+          <ControlLink
+            className='SelectOptions__extra-option'
+            disabled={extraOption.disabled}
+            onClick={extraOption.callback}
+          >
+            {extraOption.label}
+          </ControlLink>
+        )}
       </ul>
 
       {options.length === 0 && (

package/src/components/SelectableButton/SelectableButton.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import { States } from '../../utilities';
 import { Stack } from '../Stack';

package/src/components/Tag/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Tag, TagProps } from './Tag';
 

package/src/components/Tag/Tag.test.tsx

@@ -11,6 +11,6 @@ describe('Tag', () => {
     expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button'));
-    expect(onRemove).toBeCalled();
+    expect(onRemove).toHaveBeenCalled();
   });
 });

package/src/components/Toast/Toast.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Toast, ToastProps } from './Toast';
 

package/src/components/Toast/Toast.test.tsx

@@ -15,6 +15,6 @@ describe('Toast', () => {
     expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
-    expect(onRemove).toBeCalled();
+    expect(onRemove).toHaveBeenCalled();
   });
 });

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -153,7 +153,7 @@ describe('useKeyboardListNavigation', () => {
 
     fireEvent.keyDown(window, { key: 'Enter' });
 
-    expect(onEnter).toBeCalledTimes(1);
+    expect(onEnter).toHaveBeenCalledTimes(1);
     expect(onEnter).toHaveBeenCalledWith({
       element: 'first',
       event: expect.anything(),
@@ -166,7 +166,7 @@ describe('useKeyboardListNavigation', () => {
 
     fireEvent.keyDown(window, { key: 'Enter' });
 
-    expect(onEnter).toBeCalledTimes(2);
+    expect(onEnter).toHaveBeenCalledTimes(2);
     expect(onEnter).toHaveBeenLastCalledWith({
       element: 'third',
       event: expect.anything(),
@@ -220,13 +220,13 @@ describe('useKeyboardListNavigation', () => {
 
       fireEvent.keyDown(window, { key: 'Enter' });
 
-      expect(onEnter).toBeCalledTimes(0);
+      expect(onEnter).toHaveBeenCalledTimes(0);
 
       fireEvent.keyDown(window, { key: 'ArrowDown' });
 
       fireEvent.keyDown(window, { key: 'Enter' });
 
-      expect(onEnter).toBeCalledTimes(1);
+      expect(onEnter).toHaveBeenCalledTimes(1);
     });
   });
 });