@megafon/ui-core 2.0.0-beta.98 → 2.1.1

package/dist/lib/components/Select/Select.css

@@ -5,84 +5,106 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-select {
+.mfui-select {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
-  color: #333333;
-  min-height: 40px;
   position: relative;
   z-index: 1;
+  min-height: 40px;
+  color: #333333;
 }
-.mfui-beta-select__inner {
+.mfui-select__inner {
   position: relative;
 }
-.mfui-beta-select__control {
-  width: 100%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-select__control {
   position: relative;
   z-index: 11;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
   height: 48px;
-  cursor: pointer;
   border: 1px solid #D8D8D8;
   background-color: #FFFFFF;
   outline: none;
+  cursor: pointer;
 }
-.mfui-beta-select__combobox {
+.mfui-select__control:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 27px;
+  display: block;
+  border-top: 6px solid;
+  border-right: 5px solid transparent;
+  border-bottom: none;
+  border-left: 5px solid transparent;
+  color: #333333;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  cursor: pointer;
+}
+.mfui-select__combobox {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  cursor: text;
   position: relative;
   z-index: 1;
-  background-color: transparent;
-  border: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: 0 45px 0 20px;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+  background-color: transparent;
   outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: text;
   opacity: 1;
-  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  overflow: auto;
 }
-.mfui-beta-select_no-touch .mfui-beta-select__control:hover {
+.mfui-select_no-touch .mfui-select__control:hover {
   border-color: #333333;
 }
-.mfui-beta-select__title {
+.mfui-select__title {
+  position: relative;
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  position: relative;
-  z-index: 1;
   width: 100%;
   height: 100%;
   outline: none;
 }
-.mfui-beta-select__title_placeholder {
+.mfui-select__title_placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select__title-inner {
+.mfui-select__title-inner {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  position: relative;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+  margin: 0 45px 0 20px;
   overflow: hidden;
   white-space: nowrap;
-  margin: 0 45px 0 20px;
 }
-.mfui-beta-select__title-inner:after {
+.mfui-select__title-inner:after {
   content: '';
   position: absolute;
   top: 0;
@@ -92,92 +114,66 @@ h5 {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
 }
-.mfui-beta-select__arrow-wrap {
-  cursor: pointer;
-  height: 100%;
-  width: 25px;
-  position: absolute;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  top: 0;
-  right: 20px;
-  z-index: 11;
-  outline: none;
-}
-.mfui-beta-select__arrow {
-  color: #333333;
-  border-bottom: none;
-  border-top: 6px solid;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.mfui-beta-select__require-mark {
+.mfui-select__require-mark {
+  margin-left: 1px;
+  color: #F62434;
   font-size: 20px;
   line-height: 0;
-  color: #F62434;
-  margin-left: 1px;
 }
-.mfui-beta-select input::-webkit-input-placeholder {
+.mfui-select input::-webkit-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input::-moz-placeholder {
+.mfui-select input::-moz-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input:-moz-placeholder {
+.mfui-select input:-moz-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select input:-ms-input-placeholder {
+.mfui-select input:-ms-input-placeholder {
   color: #b3b3b3;
 }
-.mfui-beta-select__list {
-  display: none;
+.mfui-select__list {
   position: absolute;
-  z-index: 10;
   top: 100%;
   right: 0;
   left: 0;
+  z-index: 10;
+  display: none;
   background-color: #FFFFFF;
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
-.mfui-beta-select__list-inner {
-  padding: 12px 0;
+.mfui-select__list-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
+  padding: 12px 0;
   overflow-y: auto;
 }
-.mfui-beta-select__list-item {
+.mfui-select__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  cursor: pointer;
   background-color: #FFFFFF;
+  cursor: pointer;
 }
-.mfui-beta-select__list-item_active {
+.mfui-select__list-item_active {
   background-color: #F6F6F6;
 }
-.mfui-beta-select__item-title {
+.mfui-select__item-title {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   overflow: hidden;
   white-space: nowrap;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  position: relative;
 }
-.mfui-beta-select__item-title:after {
+.mfui-select__item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -187,57 +183,57 @@ h5 {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
 }
-.mfui-beta-select__list-item_active .mfui-beta-select__item-title:after {
+.mfui-select__list-item_active .mfui-select__item-title:after {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
 }
-.mfui-beta-select__not-found {
+.mfui-select__not-found {
   padding: 8px 32px;
   opacity: 0.5;
 }
-.mfui-beta-select__text {
+.mfui-select__text {
+  margin-top: 4px;
   font-size: 12px;
   line-height: 16px;
-  margin-top: 4px;
 }
-.mfui-beta-select__highlighted-fragment {
+.mfui-select__highlighted-fragment {
   font-weight: bold;
 }
-.mfui-beta-select_open {
+.mfui-select_open {
   z-index: 100;
 }
-.mfui-beta-select_open .mfui-beta-select__arrow {
+.mfui-select_open .mfui-select__control:after {
   border-top: none;
   border-bottom: 6px solid;
 }
-.mfui-beta-select_open .mfui-beta-select__list {
+.mfui-select_open .mfui-select__list {
   display: block;
   border-color: #333333;
 }
-.mfui-beta-select_open .mfui-beta-select__control {
+.mfui-select_open .mfui-select__control {
   border-color: #333333;
 }
-.mfui-beta-select_valid .mfui-beta-select__control {
+.mfui-select_valid .mfui-select__control {
   border-color: #00B956 !important;
 }
-.mfui-beta-select_valid .mfui-beta-select__text {
+.mfui-select_valid .mfui-select__text {
   color: #00B956;
 }
-.mfui-beta-select_error .mfui-beta-select__control {
+.mfui-select_error .mfui-select__control {
   border-color: #F62434 !important;
 }
-.mfui-beta-select_error .mfui-beta-select__text {
+.mfui-select_error .mfui-select__text {
   color: #F62434;
 }
-.mfui-beta-select_disabled .mfui-beta-select__control {
-  background-color: #EDEDED;
+.mfui-select_disabled .mfui-select__control {
   border-color: #EDEDED;
-  pointer-events: none;
+  background-color: #EDEDED;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  pointer-events: none;
 }
-.mfui-beta-select_disabled .mfui-beta-select__title-inner:after {
+.mfui-select_disabled .mfui-select__title-inner:after {
   display: none;
 }

package/dist/lib/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './Select.less';
-import { IDataAttributes } from './../../utils/dataAttrs';
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -13,26 +13,35 @@ export declare const SelectTypes: {
 };
 declare type SelectTypesType = typeof SelectTypes[keyof typeof SelectTypes];
 export declare type SelectItemValueType = number | string | undefined;
-export interface ISelectItem {
+declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element | string;
+declare type ViewCallbackArguments = {
+    filterValue: string;
+};
+export interface ISelectItem<T extends SelectItemValueType> {
+    /** Заголовок элемента в выпадающем списке  */
     title: string;
-    value: SelectItemValueType;
-    view?: JSX.Element[] | Element[] | JSX.Element | string | Element;
+    /** Значение value элемента */
+    value: T;
+    /** Настраиваемое отображение элементов в выпадающем списке  */
+    view?: ElementOrString | ((data: ViewCallbackArguments) => ElementOrString);
+    /** Настраиваемое отображение выбранного элемента в поле селекта  */
+    selectedView?: JSX.Element | Element | React.ReactElement;
 }
-export interface ISelectProps extends IDataAttributes {
+export interface ISelectProps<T extends SelectItemValueType> extends IFilterDataAttrs {
     /** Тип компонента */
     type?: SelectTypesType;
     /** Заголовок поля */
     label?: string;
     /** HTML идентификатор для заголовка поля */
     labelId?: string;
-    /** Текущий выбранный элемент селекта */
-    currentValue?: SelectItemValueType;
+    /** Текущий выбранный элемент селекта (extends SelectItemValueType) */
+    currentValue?: T;
     /** Результат проверки данных */
     verification?: VerificationType;
     /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
     noticeText?: string;
     /** Управление возможностью взаимодействия с компонентом */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Делает поле обязательным */
     required?: boolean;
     /** Текст внутри поля по умолчанию */
@@ -40,28 +49,35 @@ export interface ISelectProps extends IDataAttributes {
     /** Текст при отсутствии результатов поиска */
     notFoundText?: string;
     /** Массив элементов селекта */
-    items: ISelectItem[];
+    items: Array<ISelectItem<T>>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         root?: string;
         control?: string;
+        title?: string;
+        titleInner?: string;
         list?: string;
         listItem?: string;
         listItemTitle?: string;
     };
     /** Обработчик выбора элемента селекта */
-    onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, dataItem: ISelectItem) => void;
+    onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
+    /** Обработчик при открытом селекте */
+    onOpened?: () => void;
+    /** Обработчик при закрытом селекте */
+    onClosed?: () => void;
 }
-interface ISelectState {
+interface ISelectState<T extends SelectItemValueType> {
     isOpened: boolean;
     activeIndex: number;
-    filteredItems: ISelectItem[];
+    filteredItems: Array<ISelectItem<T>>;
     comparableInputValue: string;
     inputValue: string;
+    isChoosenItem: boolean;
 }
-declare class Select extends React.Component<ISelectProps, ISelectState> {
+declare class Select<T extends SelectItemValueType> extends React.Component<ISelectProps<T>, ISelectState<T>> {
     static propTypes: {
         type: PropTypes.Requireable<"classic" | "combobox">;
         label: PropTypes.Requireable<string>;
@@ -69,7 +85,7 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
         currentValue: PropTypes.Requireable<string | number>;
         verification: PropTypes.Requireable<"error" | "valid">;
         noticeText: PropTypes.Requireable<string>;
-        isDisabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
         required: PropTypes.Requireable<boolean>;
         placeholder: PropTypes.Requireable<string>;
         notFoundText: PropTypes.Requireable<string>;
@@ -77,31 +93,43 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
         classes: PropTypes.Requireable<PropTypes.InferProps<{
             root: PropTypes.Requireable<string>;
             control: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            titleInner: PropTypes.Requireable<string>;
             list: PropTypes.Requireable<string>;
             listItem: PropTypes.Requireable<string>;
             listItemTitle: PropTypes.Requireable<string>;
         }>>;
-        items: PropTypes.Requireable<(PropTypes.InferProps<{
-            view: PropTypes.Requireable<string | number | PropTypes.ReactElementLike>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            value: PropTypes.Requireable<string | number>;
-        }> | null | undefined)[]>;
+        items: PropTypes.Validator<(Required<PropTypes.InferProps<{
+            view: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
+            selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
+            title: PropTypes.Validator<string>;
+            value: PropTypes.Validator<string | number>;
+        }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         dataAttrs: PropTypes.Requireable<{
             [x: string]: string;
         }>;
+        onOpened: PropTypes.Requireable<(...args: any[]) => any>;
+        onClosed: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+        required: boolean;
+        type: string;
+        notFoundText: string;
     };
-    static defaultProps: Partial<ISelectProps>;
     itemWrapperNode: HTMLDivElement;
     itemsNodeList: HTMLDivElement[];
     selectNode: HTMLDivElement;
     isTouch: boolean;
     debouncedComboboxChange: any;
-    constructor(props: ISelectProps);
+    constructor(props: ISelectProps<T>);
     componentDidMount(): void;
-    componentDidUpdate({ items: prevItems }: ISelectProps): void;
+    componentDidUpdate({ items: prevItems }: ISelectProps<T>): void;
     componentWillUnmount(): void;
-    isEqualItems: (items: ISelectItem[], prevItems: ISelectItem[]) => boolean;
+    isEqualItems: (items: ISelectItem<T>[], prevItems: ISelectItem<T>[]) => boolean;
+    handleOpened: () => void;
+    handleClosed: () => void;
     handleClickOutside: (e: MouseEvent) => void;
     handleOpenDropdown: () => void;
     handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
@@ -109,11 +137,11 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
     handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => boolean;
-    scrollList(activeIndex: number): void;
-    highlightString: (title: any, view: any) => any;
-    getItemWrapper: (node: any) => any;
-    getSelectNode: (node: any) => any;
+    highlightString: (title: string, view?: string | Element | JSX.Element | JSX.Element[] | Element[] | ((data: ViewCallbackArguments) => ElementOrString) | undefined) => ElementOrString;
+    getItemWrapper: (node: any) => void;
+    getSelectNode: (node: any) => void;
     getNodeList: (node: any) => number;
+    scrollList(activeIndex: number): void;
     renderTitle(): JSX.Element;
     renderCombobox(): JSX.Element;
     renderChildren(): JSX.Element;