Merge pull request #2467 from teamleadercrm/guild/typescript-select-p…

…rops

Use typed SelectProps

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [18.0.0] - 2022-11-29
+
+### Changed
+
+- [BREAKING] `Typescript`: All components and their props are typescript ([@qubis741](https://github.com/qubis741)) in [#2467](https://github.com/teamleadercrm/ui/pull/2467))
+
 ## [17.1.1] - 2022-11-23
 
 ### Changed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "17.1.1",
+  "version": "18.0.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/marketingMenuItem/marketingMenuItem.stories.tsx

@@ -6,8 +6,7 @@ import MarketingMenuItem from './MarketingMenuItem';
 import { IconExternalLinkSmallOutline } from '@teamleader/ui-icons';
 import Menu, { MenuDivider, MenuItem } from '../menu';
 import Box, { BoxProps } from '../box';
-import { MenuListProps } from 'react-select';
-import Select from '../select';
+import Select, { Option, SelectComponentsProps } from '../select';
 import { useCallback } from '@storybook/addons';
 
 export default {
@@ -36,7 +35,7 @@ const options = [
 
 export const DropdownWithUpsell: ComponentStory<typeof MarketingMenuItem> = (args) => {
   const MenuList = useCallback(
-    (props: MenuListProps) => {
+    (props: SelectComponentsProps['MenuList']) => {
       const { children, getStyles, innerRef, innerProps } = props;
 
       return (
@@ -57,8 +56,9 @@ export const DropdownWithUpsell: ComponentStory<typeof MarketingMenuItem> = (arg
     },
     [args],
   );
+  const handleChange = (option: Option) => console.log(option);
 
-  return <Select options={options} components={{ MenuList }} />;
+  return <Select options={options} onChange={handleChange} components={{ MenuList }} />;
 };
 
 DropdownWithUpsell.args = {

src/components/select/Select.tsx

@@ -38,17 +38,8 @@ const minHeightBySizeMap: Record<string, number> = {
 
 export interface SelectRef<Option extends OptionType = OptionType, IsMulti extends boolean = false>
   extends SelectType<Option, IsMulti> {}
+
 export interface SelectProps<
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Option extends OptionType = OptionType,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  IsMulti extends boolean = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  IsClearable extends boolean = false,
-> {
-  [key: string]: any;
-}
-export interface SelectPropsFull<
   Option extends OptionType = OptionType,
   IsMulti extends boolean = false,
   IsClearable extends boolean = false,

src/components/select/types.ts

@@ -32,7 +32,10 @@ export interface Option<V = Value> {
   [key: string]: any;
 }
 
-export interface GroupOption<O = Option> extends GroupBase<O> {}
+export interface GroupOption<O = Option> {
+  options: O[];
+  label?: string;
+}
 export interface SelectComponentsProps<
   OptionType extends Option = Option,
   IsMulti extends boolean = false,