chore: better select prop types to match antd exports (#486)

Co-authored-by: mparticle-automation <[email protected]>
Co-authored-by: Daniel Siemens <[email protected]>

docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { Select } from 'antd'
 import { useMemo, useState } from 'react'
 import { DateRangeString, type IDateRangeStringProps } from './DateRangeString'
-import type { RangePickerProps } from 'antd/es/date-picker'
-import type { BaseOptionType, DefaultOptionType } from 'antd/es/select'
 import dayjs from 'dayjs'
-import { DatePicker, Divider, Flex, type ISelectProps, Typography } from 'src/components'
+import { Select, DatePicker, Divider, Flex, type ISelectProps, Typography } from 'src/components'
+import type { IRangePickerProps } from 'src/components/data-entry/DatePicker/DatePicker'
+import type { SelectBaseOptionType, SelectDefaultOptionType } from 'src/components/data-entry/Select/Select'
 
 export type SelectWithRangePickerValue<ValueType> = ValueType | [string, string] | null
 
@@ -16,7 +15,7 @@ interface SelectWithRangePickerProps<ValueType, OptionType>
     'open' | 'value' | 'dropdownRender' | 'defaultValue' | 'mode'
   > {
   value: SelectWithRangePickerValue<ValueType>
-  rangePickerProps?: Omit<RangePickerProps, 'value' | 'onChange'>
+  rangePickerProps?: Omit<IRangePickerProps, 'value' | 'onChange'>
   rangePickerLabel?: React.ReactNode
   formatOptions?: IDateRangeStringProps['formatOptions']
 }
@@ -25,7 +24,7 @@ const DEFAULT_PICKER_LABEL = <Typography.Text>Custom date range</Typography.Text
 
 export const SelectWithRangePicker = <
   ValueType = SelectWithRangePickerValue<unknown>,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType,
 >({
   value,
   rangePickerProps = {},

docs/UX Patterns/Table/Filters.stories.tsx

@@ -257,7 +257,7 @@ export const WithComplexFilters: Story = {
                 showHour: true,
                 showMinute: true,
                 showSecond: false,
-                disabledDate: antdDayJS => {
+                disabledDate: (antdDayJS: any) => {
                   const fourteenDaysInMs = 14 * 24 * 60 * 60 * 1000
                   return antdDayJS.isBefore(new Date(Date.now() - fourteenDaysInMs))
                 },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mparticle/aquarium",
-  "version": "1.34.0",
+  "version": "1.34.1-chore-better-select-prop-types.2",
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [

src/components/data-entry/DatePicker/DatePicker.tsx

@@ -1,7 +1,9 @@
 import { DatePicker as AntDatePicker, type DatePickerProps as AntDatePickerProps } from 'antd'
+import type { RangePickerProps as AntRangePickerProps } from 'antd/es/date-picker'
 import { ConfigProvider } from 'src/components'
 
 export interface IDatePickerProps extends AntDatePickerProps {}
+export interface IRangePickerProps extends AntRangePickerProps {}
 
 export const DatePicker = (props: IDatePickerProps) => {
   return (

src/components/data-entry/QueryItem/Qualifier.tsx

@@ -21,6 +21,8 @@ const Qualifier = (props: IQueryItemQualifierProps) => {
     defaultValue: props.options?.length ? props.options[0].value : undefined,
     menuItemSelectedIcon: node =>
       node.isSelected ? <CheckIcon className="query-item-qualifier__item-selected-icon" /> : null,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error Introduced when we properly typed the Select value and option generics from Aquarium. Need to double check to fix this.
     onChange: props.onChange,
     onDropdownVisibleChange: () => {
       setIsOpen(!isOpen)

src/components/data-entry/Select/Select.tsx

@@ -1,19 +1,25 @@
 import { Select as AntSelect } from 'antd'
-import { type SelectProps as AntSelectProps } from 'antd'
-import { type BaseOptionType, type DefaultOptionType } from 'antd/es/select'
-import { ConfigProvider } from 'src/components'
+import type { SelectProps as AntSelectProps } from 'antd'
+import type { BaseOptionType as AntBaseOptionType, DefaultOptionType as AntDefaultOptionType } from 'antd/es/select'
+import { ConfigProvider, Icon } from 'src/components'
 
-export type { DefaultOptionType }
+export type SelectBaseOptionType = AntBaseOptionType
+export type SelectDefaultOptionType = AntDefaultOptionType
 
 export interface ISelectProps<
-  ValueType = any,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
-> extends AntSelectProps<ValueType, OptionType> {}
+  SelectValueType = unknown,
+  SelectOptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType,
+> extends AntSelectProps<SelectValueType, SelectOptionType> {}
 
-export const Select = (props: ISelectProps) => {
+export const Select = <
+  SelectValueType,
+  SelectOptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType,
+>(
+  props: ISelectProps<SelectValueType, SelectOptionType>,
+) => {
   return (
     <ConfigProvider>
-      <AntSelect {...props} />
+      <AntSelect suffixIcon={<Icon name="dropdownOpen" size="sm" />} {...props} />
     </ConfigProvider>
   )
 }

src/components/index.ts

@@ -4,7 +4,12 @@ export { Icon, type IIconProps } from './general/Icon/Icon'
 export { Rate, type IRateProps } from './not-prod-ready/Rate/Rate'
 export { Form, type IFormProps, type FormInstance } from './data-entry/Form/Form'
 export { TreeSelect, type ITreeSelectProps } from './data-entry/TreeSelect/TreeSelect'
-export { Select, type ISelectProps, type DefaultOptionType } from './data-entry/Select/Select'
+export {
+  Select,
+  type ISelectProps,
+  type SelectDefaultOptionType,
+  type SelectBaseOptionType,
+} from './data-entry/Select/Select'
 export { Mentions, type IMentionsProps } from './not-prod-ready/Mentions/Mentions'
 export { Radio, type IRadioProps } from './data-entry/Radio/Radio'
 export { ColorPicker, type IColorPickerProps } from './not-prod-ready/ColorPicker/ColorPicker'