@edvisor/product-language 0.3.1 → 0.4.0

package/lib/components/index.d.ts

@@ -13,5 +13,6 @@ export * from './tabs';
 export * from './icon';
 export * from './flag';
 export * from './spinner';
+export * from './select';
 export * from './molecules';
 export * from './organisms';

package/lib/components/select/components/menu-container.d.ts

@@ -0,0 +1,3 @@
+import { FC } from '@helpers';
+import { IMenuContainerProps } from '../types';
+export declare const MenuContainer: FC<IMenuContainerProps>;

package/lib/components/select/components/menu-row.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { IMenuComponentProps } from '../types';
+interface IMenuRowProps {
+    index: number;
+    style: CSSProperties;
+    data: IMenuComponentProps;
+}
+export declare const MenuRow: import("react").MemoExoticComponent<({ index, style, data }: IMenuRowProps) => JSX.Element>;
+export {};

package/lib/components/select/components/menu.d.ts

@@ -0,0 +1,2 @@
+import { IMenuComponentProps } from '../types';
+export declare const Menu: (props: IMenuComponentProps) => JSX.Element;

package/lib/components/select/components/option.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IOptionComponentProps } from '../types';
+interface IOptionItemProps {
+    active?: IOptionComponentProps['active'];
+    selected?: IOptionComponentProps['selected'];
+    height?: IOptionComponentProps['height'];
+}
+export declare const OptionItem: import("styled-components").StyledComponent<"div", any, IOptionItemProps, never>;
+export declare const OptionComponent: import("react").MemoExoticComponent<(props: IOptionComponentProps) => JSX.Element>;
+export {};

package/lib/components/select/components/select-label.d.ts

@@ -0,0 +1 @@
+export declare const SelectLabel: import("styled-components").StyledComponent<import("../../../helpers").FC<import("components/typography").ITextComponentProps & import("../../../foundations").ILabelProps, {}>, any, {}, never>;

package/lib/components/select/components/value-component-multi.d.ts

@@ -0,0 +1,3 @@
+import { IValueComponentMultiProps } from '../types';
+declare const _default: <T>(props: IValueComponentMultiProps<T>) => JSX.Element;
+export default _default;

package/lib/components/select/components/value-component-single.d.ts

@@ -0,0 +1,4 @@
+import { IValueComponentSingleProps } from '../types';
+import { FC } from '@helpers';
+declare const _default: FC<IValueComponentSingleProps<any>, {}>;
+export default _default;

package/lib/components/select/components/value.d.ts

@@ -0,0 +1,4 @@
+import { FC } from '@helpers';
+import { IValueProps } from '../types';
+declare const _default: FC<IValueProps, {}>;
+export default _default;

package/lib/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from './select';

package/lib/components/select/select.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PropsWithChildren } from '@helpers';
+import { ISelectProps } from './types';
+export declare const SelectImpl: <T>(props: ISelectProps<T>, ref: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+export declare const Select: <T>(props: ISelectProps<T> & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof SelectImpl>;

package/lib/components/select/types.d.ts

@@ -0,0 +1,124 @@
+/// <reference types="react" />
+import { FC } from '@helpers';
+export interface ISelectProps<T = any> {
+    className?: string;
+    options?: IOption<T>[];
+    value?: T | T[];
+    placeholder?: string;
+    emptyText?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    multi?: boolean;
+    invalid?: boolean;
+    errors?: {
+        message: string;
+    }[];
+    rowHeight?: number;
+    menuHeight?: number;
+    menuPosition?: 'top' | 'bottom';
+    label?: string;
+    labelPosition?: 'top' | 'side';
+    labelComponent?: FC<LabelComponentProps<T>>;
+    menuComponent?: FC<IMenuComponentProps>;
+    onChange?(value: T[] | T | undefined, option?: IOption<T>): void;
+    onSearch?(value: string): void;
+    onOpen?(): void;
+    onClose?(): void;
+}
+export interface IValueProps {
+    options: ISelectProps['options'];
+    value: ISelectProps['value'];
+    placeholder: ISelectProps['placeholder'];
+    clearable: ISelectProps['clearable'];
+    searchable: ISelectProps['searchable'];
+    labelComponent: ISelectProps['labelComponent'];
+    multi: ISelectProps['multi'];
+    disabled: ISelectProps['disabled'];
+    invalid: ISelectProps['invalid'];
+    errors: ISelectProps['errors'];
+    search?: string;
+    open: boolean;
+    focused?: boolean;
+    label: ISelectProps['label'];
+    labelPosition: ISelectProps['labelPosition'];
+    onClear(): void;
+    onClick(): void;
+    onSearch(search: string): void;
+    onSearchFocus(): void;
+    onSearchBlur(): void;
+    onOptionRemove(value: any): void;
+}
+export interface IMenuContainerProps {
+    className?: string;
+    menuTop?: number;
+    menuHeight?: RectSize;
+    menuPosition?: ISelectProps['menuPosition'];
+    invalid?: boolean;
+    labelPosition?: string;
+    label?: string;
+    children?: React.ReactNode;
+    onRef?(el: HTMLDivElement | undefined): void;
+    onClick?(el: React.MouseEvent<HTMLDivElement>): void;
+}
+declare type RectSize = number | 'auto';
+export interface IRect {
+    left: number;
+    top: number;
+    width: RectSize;
+    height: RectSize;
+}
+export interface IValueComponentMultiProps<T = any> extends IValueComponentSingleProps<T> {
+    options: IOption<T>[];
+    onRemove(value: T): void;
+}
+export declare type LabelComponentProps<T = any> = IOption<T> & {
+    active: boolean;
+    type: 'value-single' | 'value-multi' | 'option';
+};
+export interface IValueComponentSingleProps<T = any> {
+    className?: string;
+    option: IOption<T>;
+    labelComponent: ISelectProps['labelComponent'];
+}
+export interface IOptionComponentProps<T extends IOption = any> {
+    className?: string;
+    option: T;
+    active?: boolean;
+    selected?: boolean;
+    height?: number;
+    labelComponent: ISelectProps['labelComponent'];
+    search?: string;
+    onSelect(value: T['value'], option?: T): void;
+}
+export interface IOption<T = any> {
+    value: T;
+    disabled?: boolean;
+    label: string;
+    [key: string]: any;
+}
+export interface IMenuComponentProps<T = any> {
+    options: ISelectProps['options'];
+    value: ISelectProps['value'];
+    labelComponent: ISelectProps['labelComponent'];
+    menuComponent: ISelectProps['menuComponent'];
+    emptyText: ISelectProps['emptyText'];
+    multi: ISelectProps['multi'];
+    rowHeight: ISelectProps['rowHeight'];
+    menuHeight: ISelectProps['menuHeight'];
+    menuPosition: ISelectProps['menuPosition'];
+    invalid: ISelectProps['invalid'];
+    selectedIndex?: number;
+    open: boolean;
+    search?: string;
+    labelPosition?: string;
+    label?: string;
+    onSelect(value: T extends any[] ? T[] : T, option?: T): void;
+}
+export interface IPosition {
+    menuPosition?: 'top' | 'bottom';
+    menuHeight?: RectSize;
+    label?: string;
+    labelPosition?: string;
+}
+export {};

package/lib/components/select/utils.d.ts

@@ -0,0 +1,15 @@
+import { IOption, IPosition } from './types';
+export declare function getDocument(): Document | undefined;
+export declare function equal(valueA: any, valueB: any): boolean;
+export declare function getValueOptions(options: IOption[], value: any, multi: boolean | undefined): IOption<any>[];
+export declare const keys: {
+    ARROW_UP: string;
+    ARROW_DOWN: string;
+    ENTER: string;
+    TAB: string;
+    ESC: string;
+    BACKSPACE: string;
+    SPACE: string;
+};
+export declare function toKey(value: any): string | number;
+export declare const topPosition: (props: IPosition) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",
@@ -14,6 +14,7 @@
     "release": "*",
     "styled-components": "5.3.5",
     "react": "18.2.0",
+    "react-window": "^1.8.8",
     "@storybook/addon-docs": "^6.5.10"
   },
   "release-it": {