feat(plasma): part 11

salute-developers · Nov 10, 2024 · 0284b5e · 0284b5e
1 parent 3428264
commit 0284b5e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 191 deletions.
diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md
@@ -102,7 +102,7 @@ import { FC } from 'react';
 import { Filter } from '@salutejs/plasma-new-hope/types/engines/types';
 import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType';
 import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType';
-import { ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { FunctionComponent } from 'react';
 import { GridProps } from '@salutejs/plasma-new-hope/styled-components';
@@ -179,7 +179,7 @@ import { SegmentGroupProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentItemProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProvider } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProviderProps } from '@salutejs/plasma-new-hope/styled-components';
-import type { SelectProps } from '@salutejs/plasma-new-hope';
+import type { SelectProps as SelectProps_2 } from '@salutejs/plasma-new-hope';
 import { sheetClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { SheetProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ShowToastArgs } from '@salutejs/plasma-new-hope/styled-components';
@@ -220,7 +220,6 @@ import { ToastRole } from '@salutejs/plasma-new-hope/styled-components';
 import { ToolbarProps } from '@salutejs/plasma-new-hope/styled-components';
 import { toolbarTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { TooltipProps } from '@salutejs/plasma-new-hope/styled-components';
-import { UIEvent as UIEvent_2 } from 'react';
 import { usePopupContext } from '@salutejs/plasma-new-hope/styled-components';
 import { useSegment } from '@salutejs/plasma-new-hope/styled-components';
 import { useToast } from '@salutejs/plasma-new-hope/styled-components';
@@ -3357,182 +3356,10 @@ export { SegmentProvider }
 
 export { SegmentProviderProps }
 
-// Warning: (ae-forgotten-export) The symbol "SelectNewHope" needs to be exported by the entry point index.d.ts
+// 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 = ItemOptionSelect>(props: Omit<SelectProps<K>, "view" | "size" | "disabled" | "labelPlacement" | "chipView"> & Pick<PropsType<    {
-view: {
-default: PolymorphicClassName;
-negative: PolymorphicClassName;
-};
-size: {
-s: PolymorphicClassName;
-};
-labelPlacement: {
-inner: PolymorphicClassName;
-outer: PolymorphicClassName;
-};
-chipView: {
-default: PolymorphicClassName;
-};
-disabled: {
-true: PolymorphicClassName;
-};
-}> & (({
-    target?: "textfield-like" | undefined;
-    view?: "default" | "negative" | "positive" | "warning" | 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;
-    status?: "warning" | "success" | "error" | undefined;
-    placeholder?: string | undefined;
-    helperText?: string | undefined;
-    disabled?: boolean | undefined;
-    items?: DropdownNodeSelect[] | undefined;
-    onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => void) | undefined;
-    hasItems?: boolean | undefined;
-    children?: undefined;
-    isOpen?: boolean | undefined;
-    isTargetAmount?: boolean | undefined;
-    renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined;
-    placement?: ("top" | "bottom" | "right" | "left" | "auto") | ("top" | "bottom" | "right" | "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;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-    target?: "textfield-like" | undefined;
-    view?: "default" | "negative" | "positive" | "warning" | 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;
-    status?: "warning" | "success" | "error" | undefined;
-    placeholder?: string | undefined;
-    helperText?: string | undefined;
-    disabled?: boolean | undefined;
-    items?: DropdownNodeSelect[] | undefined;
-    onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => void) | undefined;
-    hasItems?: boolean | undefined;
-    children?: undefined;
-    isOpen?: boolean | undefined;
-    isTargetAmount?: boolean | undefined;
-    renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined;
-    placement?: ("top" | "bottom" | "right" | "left" | "auto") | ("top" | "bottom" | "right" | "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;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-    target?: "button-like" | undefined;
-    view?: "default" | "accent" | "negative" | "clear" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | 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;
-    status?: "warning" | "success" | "error" | undefined;
-    placeholder?: string | undefined;
-    helperText?: string | undefined;
-    disabled?: boolean | undefined;
-    items?: DropdownNodeSelect[] | undefined;
-    onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => void) | undefined;
-    hasItems?: boolean | undefined;
-    children?: undefined;
-    isOpen?: boolean | undefined;
-    isTargetAmount?: boolean | undefined;
-    renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined;
-    placement?: ("top" | "bottom" | "right" | "left" | "auto") | ("top" | "bottom" | "right" | "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;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
-    target?: "button-like" | undefined;
-    view?: "default" | "accent" | "negative" | "clear" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | 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;
-    status?: "warning" | "success" | "error" | undefined;
-    placeholder?: string | undefined;
-    helperText?: string | undefined;
-    disabled?: boolean | undefined;
-    items?: DropdownNodeSelect[] | undefined;
-    onItemSelect?: ((e: DropdownNodeSelect, event: SyntheticEvent<Element, Event>) => void) | undefined;
-    hasItems?: boolean | undefined;
-    children?: undefined;
-    isOpen?: boolean | undefined;
-    isTargetAmount?: boolean | undefined;
-    renderTarget?: ((item: DropdownNodeSelect | DropdownNodeSelect[]) => ReactNode) | undefined;
-    placement?: ("top" | "bottom" | "right" | "left" | "auto") | ("top" | "bottom" | "right" | "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;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>)), "view" | "size" | "disabled" | "labelPlacement" | "chipView"> & {
-    ref?: ForwardedRef<HTMLButtonElement> | undefined;
-}) => ReturnType<typeof SelectNewHope>;
+export const Select: <K extends ItemOptionSelect>(props: SelectProps<K> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactElement | 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
@@ -1,27 +1,30 @@
 import { selectConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 import type { SelectProps as SelectPropsNewHope, ItemOptionSelect } from '@salutejs/plasma-new-hope';
-import { forwardRef, ComponentProps, ForwardedRef } from 'react';
+import React, { forwardRef, ComponentProps, ForwardedRef } from 'react';
 
 import { config } from './Select.config';
 
 const mergedConfig = mergeConfig(selectConfig, config);
 const SelectNewHope = component(mergedConfig);
 
-type SelectProps<K extends ItemOptionSelect> = Omit<
+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<
     SelectPropsNewHope<K>,
-    'size' | 'view' | 'chipView' | 'labelPlacement' | 'disabled'
+    'size' | 'view' | 'chipView' | 'disabled'
 > &
-    Pick<ComponentProps<typeof SelectNewHope>, 'size' | 'view' | 'chipView' | 'labelPlacement' | 'disabled'>;
+    DistributivePick<ComponentProps<typeof SelectNewHope>, 'size' | 'view' | 'chipView' | 'disabled'>;
 
-// eslint-disable-next-line max-len
-// const SelectComponent = <K extends ItemOptionSelect>(props: SelectProps<K>, ref: ForwardedRef<HTMLButtonElement>) => (
-//     <SelectNewHope ref={ref} {...(props as any)} />
-// );
-//
-// const Select = forwardRef(SelectComponent);
+function fixedForwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
+): (props: P & React.RefAttributes<T>) => React.ReactElement | null {
+    return forwardRef(render as any) as any;
+}
 
-const Select = forwardRef(SelectNewHope as any) as <K extends ItemOptionSelect = ItemOptionSelect>(
-    props: SelectProps<K> & { ref?: ForwardedRef<HTMLButtonElement> },
-) => ReturnType<typeof SelectNewHope>;
+const SelectComponent = <K extends ItemOptionSelect>(props: SelectProps<K>, ref: ForwardedRef<HTMLButtonElement>) => {
+    return <SelectNewHope ref={ref} {...(props as any)} />;
+};
 
-export { Select };
+export const Select = fixedForwardRef(SelectComponent);