diff --git a/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.tsx b/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.tsx index 59f5a2873..1b218cfce 100644 --- a/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.tsx +++ b/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 | [string, string] | null @@ -16,7 +15,7 @@ interface SelectWithRangePickerProps 'open' | 'value' | 'dropdownRender' | 'defaultValue' | 'mode' > { value: SelectWithRangePickerValue - rangePickerProps?: Omit + rangePickerProps?: Omit rangePickerLabel?: React.ReactNode formatOptions?: IDateRangeStringProps['formatOptions'] } @@ -25,7 +24,7 @@ const DEFAULT_PICKER_LABEL = Custom date range, - OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType, + OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType, >({ value, rangePickerProps = {}, diff --git a/docs/UX Patterns/Table/Filters.stories.tsx b/docs/UX Patterns/Table/Filters.stories.tsx index 8b3bac047..138eb3423 100644 --- a/docs/UX Patterns/Table/Filters.stories.tsx +++ b/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)) }, diff --git a/package-lock.json b/package-lock.json index d7c44e700..b7e8613fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.34.0", + "version": "1.34.1-chore-better-select-prop-types.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.34.0", + "version": "1.34.1-chore-better-select-prop-types.2", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" diff --git a/package.json b/package.json index 34c879ebd..a944659af 100644 --- a/package.json +++ b/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": [ diff --git a/src/components/data-entry/DatePicker/DatePicker.tsx b/src/components/data-entry/DatePicker/DatePicker.tsx index 248410be9..33153ce99 100644 --- a/src/components/data-entry/DatePicker/DatePicker.tsx +++ b/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 ( diff --git a/src/components/data-entry/QueryItem/Qualifier.tsx b/src/components/data-entry/QueryItem/Qualifier.tsx index 8730e45bb..b70507f52 100644 --- a/src/components/data-entry/QueryItem/Qualifier.tsx +++ b/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 ? : 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) diff --git a/src/components/data-entry/Select/Select.tsx b/src/components/data-entry/Select/Select.tsx index 7c1e332a4..0bd297307 100644 --- a/src/components/data-entry/Select/Select.tsx +++ b/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 {} + SelectValueType = unknown, + SelectOptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType, +> extends AntSelectProps {} -export const Select = (props: ISelectProps) => { +export const Select = < + SelectValueType, + SelectOptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType, +>( + props: ISelectProps, +) => { return ( - + } {...props} /> ) } diff --git a/src/components/index.ts b/src/components/index.ts index 6b89922da..d33abfaa8 100644 --- a/src/components/index.ts +++ b/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'