From 522518fd442b0acb407237094c9c2e5b22ac0292 Mon Sep 17 00:00:00 2001 From: Dima Shugaev Date: Mon, 11 Nov 2024 19:11:06 +0300 Subject: [PATCH] feat(plasma): part 13 --- .../src/components/Select/Select.types.ts | 4 +- packages/plasma-web/api/plasma-web.api.md | 191 +----------------- .../src/components/Select/Select.tsx | 25 ++- packages/sdds-cs/api/sdds-cs.api.md | 2 +- .../sdds-cs/src/components/Select/Select.tsx | 9 +- 5 files changed, 37 insertions(+), 194 deletions(-) diff --git a/packages/plasma-new-hope/src/components/Select/Select.types.ts b/packages/plasma-new-hope/src/components/Select/Select.types.ts index 88544a588e..048be6eeb3 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.types.ts +++ b/packages/plasma-new-hope/src/components/Select/Select.types.ts @@ -57,7 +57,7 @@ type Target = helperText?: never; }; -type IsMultiselect = +type IsMultiselect = | { multiselect?: false; value?: string; @@ -80,7 +80,7 @@ type IsMultiselect = renderTarget?: (value: K[]) => React.ReactNode; }; -export interface BasicProps { +export interface BasicProps { /** * Список элементов. */ diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 6b3d7a3179..8d842009c8 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -129,7 +129,7 @@ import { DrawerHeaderProps } from '@salutejs/plasma-new-hope/styled-components'; import { DrawerProps } from '@salutejs/plasma-new-hope/styled-components'; import { DropdownItemProps } from '@salutejs/plasma-hope'; import { DropdownItem as DropdownItemType } from '@salutejs/plasma-hope'; -import { DropdownNodeSelect } from '@salutejs/plasma-new-hope/styled-components'; +import type { DropdownNodeSelect } from '@salutejs/plasma-new-hope'; import { DropdownNodeType } from '@salutejs/plasma-hope'; import { DropdownPopupProps } from '@salutejs/plasma-hope'; import { DropdownProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -172,6 +172,7 @@ import { MaskProps } from '@salutejs/plasma-new-hope/types/components/Mask/Mask. import { MaxLinesProps } from '@salutejs/plasma-core'; import { mediaQuery } from '@salutejs/plasma-hope'; import { MediaQueryFunction } from '@salutejs/plasma-hope'; +import type { MergedSelectProps } from '@salutejs/plasma-new-hope'; import { Modal } from '@salutejs/plasma-hope'; import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -315,7 +316,6 @@ import { TooltipProps } from '@salutejs/plasma-new-hope/styled-components'; import { transformStyles } from '@salutejs/plasma-core'; import { TypographyOldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Old/TypographyOld'; import { TypographyVariants } from '@salutejs/plasma-new-hope/types/components/Editable/Editable.types'; -import { UIEvent as UIEvent_2 } from 'react'; import { Upload } from '@salutejs/plasma-hope'; import { UploadAudio } from '@salutejs/plasma-hope'; import { UploadAudioProps } from '@salutejs/plasma-hope'; @@ -3605,191 +3605,10 @@ export { SegmentProvider } export { SegmentProviderProps } +// Warning: (ae-forgotten-export) The symbol "SelectProps_2" needs to be exported by the entry point index.d.ts +// // @public (undocumented) -export const Select: FunctionComponent & (({ -target?: "textfield-like" | undefined; -view?: "default" | "positive" | "warning" | "negative" | undefined; -contentLeft?: ReactNode; -labelPlacement?: "outer" | "inner" | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -} & { -multiselect?: false | undefined; -separator?: undefined; -} & { -value?: any; -onChange?: ((value: any) => void) | undefined; -listOverflow?: Property.Overflow | undefined; -listHeight?: Property.Height | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -disabled?: boolean | undefined; -items?: DropdownNodeSelect[] | undefined; -onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent) => void) | undefined; -children?: undefined; -isTargetAmount?: boolean | undefined; -renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined; -placement?: ("top" | "right" | "bottom" | "left" | "auto") | ("top" | "right" | "bottom" | "left")[] | undefined; -label?: string | undefined; -onScrollBottom?: ((e: UIEvent_2) => void) | undefined; -variant?: "normal" | "tight" | undefined; -listWidth?: Property.Width | undefined; -portal?: string | RefObject | undefined; -renderValue?: ((item: DropdownNodeSelect) => string) | undefined; -renderItem?: ((item: DropdownNodeSelect) => ReactNode) | undefined; -closeAfterSelect?: boolean | undefined; -size?: string | undefined; -view?: string | undefined; -chipView?: string | undefined; -status?: "warning" | "success" | "error" | undefined; -hasItems?: boolean | undefined; -isOpen?: boolean | undefined; -} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ -target?: "textfield-like" | undefined; -view?: "default" | "positive" | "warning" | "negative" | undefined; -contentLeft?: ReactNode; -labelPlacement?: "outer" | "inner" | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -} & { -multiselect?: true | undefined; -separator?: string | undefined; -} & { -value?: any; -onChange?: ((value: any) => void) | undefined; -listOverflow?: Property.Overflow | undefined; -listHeight?: Property.Height | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -disabled?: boolean | undefined; -items?: DropdownNodeSelect[] | undefined; -onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent) => void) | undefined; -children?: undefined; -isTargetAmount?: boolean | undefined; -renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined; -placement?: ("top" | "right" | "bottom" | "left" | "auto") | ("top" | "right" | "bottom" | "left")[] | undefined; -label?: string | undefined; -onScrollBottom?: ((e: UIEvent_2) => void) | undefined; -variant?: "normal" | "tight" | undefined; -listWidth?: Property.Width | undefined; -portal?: string | RefObject | undefined; -renderValue?: ((item: DropdownNodeSelect) => string) | undefined; -renderItem?: ((item: DropdownNodeSelect) => ReactNode) | undefined; -closeAfterSelect?: boolean | undefined; -size?: string | undefined; -view?: string | undefined; -chipView?: string | undefined; -status?: "warning" | "success" | "error" | undefined; -hasItems?: boolean | undefined; -isOpen?: boolean | undefined; -} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ -target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; -contentLeft?: undefined; -labelPlacement?: undefined; -placeholder?: undefined; -helperText?: undefined; -} & { -multiselect?: false | undefined; -separator?: undefined; -} & { -value?: any; -onChange?: ((value: any) => void) | undefined; -listOverflow?: Property.Overflow | undefined; -listHeight?: Property.Height | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -disabled?: boolean | undefined; -items?: DropdownNodeSelect[] | undefined; -onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent) => void) | undefined; -children?: undefined; -isTargetAmount?: boolean | undefined; -renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined; -placement?: ("top" | "right" | "bottom" | "left" | "auto") | ("top" | "right" | "bottom" | "left")[] | undefined; -label?: string | undefined; -onScrollBottom?: ((e: UIEvent_2) => void) | undefined; -variant?: "normal" | "tight" | undefined; -listWidth?: Property.Width | undefined; -portal?: string | RefObject | undefined; -renderValue?: ((item: DropdownNodeSelect) => string) | undefined; -renderItem?: ((item: DropdownNodeSelect) => ReactNode) | undefined; -closeAfterSelect?: boolean | undefined; -size?: string | undefined; -view?: string | undefined; -chipView?: string | undefined; -status?: "warning" | "success" | "error" | undefined; -hasItems?: boolean | undefined; -isOpen?: boolean | undefined; -} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ -target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; -contentLeft?: undefined; -labelPlacement?: undefined; -placeholder?: undefined; -helperText?: undefined; -} & { -multiselect?: true | undefined; -separator?: string | undefined; -} & { -value?: any; -onChange?: ((value: any) => void) | undefined; -listOverflow?: Property.Overflow | undefined; -listHeight?: Property.Height | undefined; -placeholder?: string | undefined; -helperText?: string | undefined; -disabled?: boolean | undefined; -items?: DropdownNodeSelect[] | undefined; -onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent) => void) | undefined; -children?: undefined; -isTargetAmount?: boolean | undefined; -renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined; -placement?: ("top" | "right" | "bottom" | "left" | "auto") | ("top" | "right" | "bottom" | "left")[] | undefined; -label?: string | undefined; -onScrollBottom?: ((e: UIEvent_2) => void) | undefined; -variant?: "normal" | "tight" | undefined; -listWidth?: Property.Width | undefined; -portal?: string | RefObject | undefined; -renderValue?: ((item: DropdownNodeSelect) => string) | undefined; -renderItem?: ((item: DropdownNodeSelect) => ReactNode) | undefined; -closeAfterSelect?: boolean | undefined; -size?: string | undefined; -view?: string | undefined; -chipView?: string | undefined; -status?: "warning" | "success" | "error" | undefined; -hasItems?: boolean | undefined; -isOpen?: boolean | undefined; -} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes))>; +export const Select: (props: SelectProps_2 & React_2.RefAttributes) => React_2.ReactNode | null; export { SelectGroup } diff --git a/packages/plasma-web/src/components/Select/Select.tsx b/packages/plasma-web/src/components/Select/Select.tsx index d61715e9c8..99c7b9b388 100644 --- a/packages/plasma-web/src/components/Select/Select.tsx +++ b/packages/plasma-web/src/components/Select/Select.tsx @@ -1,8 +1,31 @@ import { selectConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; +import React, { forwardRef, ComponentProps, ForwardedRef } from 'react'; +import type { DropdownNodeSelect, MergedSelectProps as MergedSelectPropsNewHope } from '@salutejs/plasma-new-hope'; import { config } from './Select.config'; const mergedConfig = mergeConfig(selectConfig, config); -const Select = component(mergedConfig); +const SelectNewHope = component(mergedConfig); + +type DistributiveOmit = T extends any ? Omit : never; +type DistributivePick = T extends unknown ? Pick : never; + +type SelectProps = DistributiveOmit< + MergedSelectPropsNewHope, + 'size' | 'view' | 'chipView' | 'disabled' +> & + DistributivePick, 'size' | 'view' | 'chipView' | 'disabled'>; + +function fixedForwardRef( + render: (props: P, ref: React.Ref) => React.ReactNode | null, +): (props: P & React.RefAttributes) => React.ReactNode | null { + return forwardRef(render as any) as any; +} + +const SelectComponent = (props: SelectProps, ref: ForwardedRef) => { + return ; +}; + +const Select = fixedForwardRef(SelectComponent); export { Select }; diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index 58352a0183..1e7d4f5545 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -3361,7 +3361,7 @@ export { SegmentProviderProps } // Warning: (ae-forgotten-export) The symbol "SelectProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const Select: (props: SelectProps & React_2.RefAttributes) => React_2.ReactElement | null; +export const Select: (props: SelectProps & React_2.RefAttributes) => React_2.ReactNode | null; // @public export const Sheet: FunctionComponent = T extends any ? Omit : never; - type DistributivePick = T extends unknown ? Pick : never; type SelectProps = DistributiveOmit< @@ -18,8 +17,8 @@ type SelectProps = DistributiveOmit< DistributivePick, 'size' | 'view' | 'chipView' | 'disabled'>; function fixedForwardRef( - render: (props: P, ref: React.Ref) => React.ReactElement | null, -): (props: P & React.RefAttributes) => React.ReactElement | null { + render: (props: P, ref: React.Ref) => React.ReactNode | null, +): (props: P & React.RefAttributes) => React.ReactNode | null { return forwardRef(render as any) as any; } @@ -27,4 +26,6 @@ const SelectComponent = (props: SelectProps, ref: return ; }; -export const Select = fixedForwardRef(SelectComponent); +const Select = fixedForwardRef(SelectComponent); + +export { Select };