feat(plasma): part 13

salute-developers · Nov 11, 2024 · 522518f · 522518f
1 parent af24c68
commit 522518f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 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
@@ -57,7 +57,7 @@ type Target =
           helperText?: never;
       };
 
-type IsMultiselect<K extends ItemOption = ItemOption> =
+type IsMultiselect<K extends ItemOption> =
     | {
           multiselect?: false;
           value?: string;
@@ -80,7 +80,7 @@ type IsMultiselect<K extends ItemOption = ItemOption> =
           renderTarget?: (value: K[]) => React.ReactNode;
       };
 
-export interface BasicProps<K extends ItemOption = ItemOption> {
+export interface BasicProps<K extends ItemOption> {
     /**
      * Список элементов.
      */

diff --git 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<PropsType<    {
-view: {
-default: PolymorphicClassName;
-positive: PolymorphicClassName;
-warning: PolymorphicClassName;
-negative: PolymorphicClassName;
-accent: PolymorphicClassName;
-secondary: PolymorphicClassName;
-clear: PolymorphicClassName;
-dark: PolymorphicClassName;
-black: PolymorphicClassName;
-white: PolymorphicClassName;
-};
-size: {
-l: PolymorphicClassName;
-m: PolymorphicClassName;
-s: PolymorphicClassName;
-xs: PolymorphicClassName;
-};
-labelPlacement: {
-inner: PolymorphicClassName;
-outer: PolymorphicClassName;
-};
-chipView: {
-default: PolymorphicClassName;
-secondary: PolymorphicClassName;
-accent: PolymorphicClassName;
-};
-disabled: {
-true: PolymorphicClassName;
-};
-}> & (({
-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<string | number> | undefined;
-placeholder?: string | undefined;
-helperText?: string | undefined;
-disabled?: boolean | undefined;
-items?: DropdownNodeSelect[] | undefined;
-onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => 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<HTMLUListElement, UIEvent>) => void) | undefined;
-variant?: "normal" | "tight" | undefined;
-listWidth?: Property.Width<string | number> | undefined;
-portal?: string | RefObject<HTMLElement> | 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<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-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<string | number> | undefined;
-placeholder?: string | undefined;
-helperText?: string | undefined;
-disabled?: boolean | undefined;
-items?: DropdownNodeSelect[] | undefined;
-onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => 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<HTMLUListElement, UIEvent>) => void) | undefined;
-variant?: "normal" | "tight" | undefined;
-listWidth?: Property.Width<string | number> | undefined;
-portal?: string | RefObject<HTMLElement> | 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<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-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<string | number> | undefined;
-placeholder?: string | undefined;
-helperText?: string | undefined;
-disabled?: boolean | undefined;
-items?: DropdownNodeSelect[] | undefined;
-onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => 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<HTMLUListElement, UIEvent>) => void) | undefined;
-variant?: "normal" | "tight" | undefined;
-listWidth?: Property.Width<string | number> | undefined;
-portal?: string | RefObject<HTMLElement> | 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<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-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<string | number> | undefined;
-placeholder?: string | undefined;
-helperText?: string | undefined;
-disabled?: boolean | undefined;
-items?: DropdownNodeSelect[] | undefined;
-onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => 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<HTMLUListElement, UIEvent>) => void) | undefined;
-variant?: "normal" | "tight" | undefined;
-listWidth?: Property.Width<string | number> | undefined;
-portal?: string | RefObject<HTMLElement> | 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<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>))>;
+export const Select: <K extends DropdownNodeSelect>(props: SelectProps_2<K> & React_2.RefAttributes<HTMLButtonElement>) => 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
@@ -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, K extends keyof any> = T extends any ? Omit<T, K> : never;
+type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
+
+type SelectProps<K extends DropdownNodeSelect> = DistributiveOmit<
+    MergedSelectPropsNewHope<K>,
+    'size' | 'view' | 'chipView' | 'disabled'
+> &
+    DistributivePick<ComponentProps<typeof SelectNewHope>, 'size' | 'view' | 'chipView' | 'disabled'>;
+
+function fixedForwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
+): (props: P & React.RefAttributes<T>) => React.ReactNode | null {
+    return forwardRef(render as any) as any;
+}
+
+const SelectComponent = <K extends DropdownNodeSelect>(props: SelectProps<K>, ref: ForwardedRef<HTMLButtonElement>) => {
+    return <SelectNewHope ref={ref} {...(props as any)} />;
+};
+
+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
@@ -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: <K extends ItemOptionSelect>(props: SelectProps<K> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactElement | null;
+export const Select: <K extends ItemOptionSelect>(props: SelectProps<K> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactNode | null;
 
 // @public
 export const Sheet: FunctionComponent<PropsType<    {

diff --git a/packages/sdds-cs/src/components/Select/Select.tsx b/packages/sdds-cs/src/components/Select/Select.tsx
@@ -8,7 +8,6 @@ const mergedConfig = mergeConfig(selectConfig, config);
 const SelectNewHope = component(mergedConfig);
 
 type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
-
 type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
 
 type SelectProps<K extends ItemOptionSelect> = DistributiveOmit<
@@ -18,13 +17,15 @@ type SelectProps<K extends ItemOptionSelect> = DistributiveOmit<
     DistributivePick<ComponentProps<typeof SelectNewHope>, 'size' | 'view' | 'chipView' | 'disabled'>;
 
 function fixedForwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
-): (props: P & React.RefAttributes<T>) => React.ReactElement | null {
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
+): (props: P & React.RefAttributes<T>) => React.ReactNode | null {
     return forwardRef(render as any) as any;
 }
 
 const SelectComponent = <K extends ItemOptionSelect>(props: SelectProps<K>, ref: ForwardedRef<HTMLButtonElement>) => {
     return <SelectNewHope ref={ref} {...(props as any)} />;
 };
 
-export const Select = fixedForwardRef(SelectComponent);
+const Select = fixedForwardRef(SelectComponent);
+
+export { Select };