fix: minor single-select issues (#1152)

* feat: add react-select component * feat: implement new single select component * chore: remove row select component * chore: fix single select prop types * chore: add deprecated select component * fix: minor single select issues * chore: bump version
TimeChimp · Jul 14, 2023 · 20d7e89 · 20d7e89
1 parent 681bddd
commit 20d7e89
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "9.0.1",
+  "version": "9.0.2",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import { Modal, ModalHeader, ModalBody, ModalFooter, ModalProps, ModalSize } from './';
-import { Button } from 'components';
-import { ButtonKind, ButtonType } from 'models';
+import { Button, MultiSelect, SingleSelect } from '../';
+import { ButtonKind } from '../../models';
 
 export default {
   title: 'Components/Modal',
@@ -26,6 +26,13 @@ const Template: Story<ModalProps> = (args) => (
       Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus
       ex, non facilisis nisl. Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi.
       Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
+      <SingleSelect
+        options={[
+          { id: '1', name: 'test' },
+          { id: '2', name: 'test 2' },
+        ]}
+        creatable
+      />
     </ModalBody>
     <ModalFooter>
       <Button kind={ButtonKind.secondary}>Cancel</Button>

diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
-import { Select } from './multi-select';
+import { MultiSelect } from './multi-select';
 import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select';
 import { OPTIONS } from './test-data';
-import { SelectProps } from './multi-select/types';
+import { MultiSelectProps } from './multi-select/types';
 
 export default {
   title: 'Components/Select',
 } as Meta;
 
-const Template: Story<SelectProps> = (args) => <Select {...args} />;
+const Template: Story<MultiSelectProps> = (args) => <MultiSelect {...args} />;
 Template.parameters = {
   design: {
     type: 'figma',

diff --git a/src/components/select/single-select/SingleSelect.tsx b/src/components/select/single-select/SingleSelect.tsx
@@ -10,13 +10,18 @@ import {
   getInputBorderColor,
   getInputBackgroundColor,
   padding,
+  margin,
 } from '../../../utils';
 import { SingleSelectProps, Option } from './types';
 
 export const DEFAULT_VALUE_KEY = 'id';
 export const DEFAULT_LABEL_KEY = 'name';
 
-export const SingleSelect = <ValueType extends string, ValueKey extends string, LabelKey extends string>({
+export const SingleSelect = <
+  ValueType extends string | number | Date,
+  ValueKey extends string,
+  LabelKey extends string,
+>({
   valueKey,
   labelKey,
   defaultValue,
@@ -33,6 +38,7 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
   onChange,
   placeholder,
   createText = (inputValue: string) => `Create ${inputValue}`,
+  noOptionsMessage = () => 'No options',
   onCreateOption,
 }: SingleSelectProps<ValueType, ValueKey, LabelKey>) => {
   const {
@@ -83,7 +89,12 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       return option[labelKey ?? DEFAULT_LABEL_KEY];
     },
     getOptionValue: (option: Option<ValueType, ValueKey, LabelKey>) => option[valueKey ?? DEFAULT_VALUE_KEY],
+    noOptionsMessage,
     styles: {
+      container: (provided) => ({
+        ...provided,
+        width: '100%',
+      }),
       control: (provided, { isFocused }) => ({
         ...provided,
         backgroundColor: getInputBackgroundColor({ disabled, customColors, colors }),
@@ -135,15 +146,19 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       }),
       menu: (provided) => ({
         ...provided,
-        zIndex: 99999,
         ...borderRadius(radius200),
         ...border(border300),
         boxShadow: 'none',
+        ...margin(scale100, '0'),
       }),
       menuList: (provided) => ({
         ...provided,
         ...padding(),
       }),
+      menuPortal: (provided) => ({
+        ...provided,
+        zIndex: 99999,
+      }),
       option: (provided, { isSelected }) => ({
         ...provided,
         ...borderBottom(border300),
@@ -188,7 +203,13 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       {showSkeleton ? (
         <Skeleton width="100%" height={scale975} animation />
       ) : (
-        <>{creatable ? <SelectCreatable {...props} onCreateOption={onCreateOption} /> : <Select {...props} />}</>
+        <>
+          {creatable ? (
+            <SelectCreatable {...props} onCreateOption={onCreateOption} menuPortalTarget={document.body} />
+          ) : (
+            <Select {...props} menuPortalTarget={document.body} />
+          )}
+        </>
       )}
     </>
   );

diff --git a/src/components/select/single-select/types.ts b/src/components/select/single-select/types.ts
@@ -23,5 +23,6 @@ export interface SingleSelectProps<ValueType, ValueKey extends string, LabelKey
   error?: boolean;
   success?: boolean;
   createText?: (inputValue: string) => string;
+  noOptionsMessage?: () => string;
   onCreateOption?: (inputValue: string) => void;
 }
diff --git a/src/components/select/test-data.ts b/src/components/select/test-data.ts
@@ -5,4 +5,46 @@ export const OPTIONS = [
   { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
   { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
   { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
 ];