@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/internal/CustomComboBox/CustomComboBox.d.ts

@@ -1,20 +1,29 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
-import { Input } from '../../components/Input';
+import { Input, InputIconType } from '../../components/Input';
 import { Menu } from '../Menu';
 import { InputLikeText } from '../InputLikeText';
 import { MenuItemState } from '../../components/MenuItem';
+import { CommonProps } from '../CommonWrapper';
+import { DropdownContainerProps } from '../DropdownContainer';
+import { ComboBoxExtendedItem } from '../../components/ComboBox';
+import { SizeProp } from '../../lib/types/props';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
-export interface CustomComboBoxProps<T> {
+export interface CustomComboBoxProps<T> extends Pick<DropdownContainerProps, 'menuPos'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, CommonProps {
     align?: 'left' | 'center' | 'right';
     autoFocus?: boolean;
     borderless?: boolean;
     disablePortal?: boolean;
     disabled?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
     maxLength?: number;
     menuAlign?: 'left' | 'right';
     drawArrow?: boolean;
+    leftIcon?: InputIconType;
+    rightIcon?: InputIconType;
     searchOnFocus?: boolean;
     onValueChange?: (value: T) => void;
     onInputValueChange?: (value: string) => Nullable<string> | void;
@@ -26,27 +35,32 @@ export interface CustomComboBoxProps<T> {
     onMouseLeave?: (e: React.MouseEvent) => void;
     onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
     placeholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     totalCount?: number;
     value?: Nullable<T>;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     width?: string | number;
     maxMenuHeight?: number | string;
     renderNotFound?: () => React.ReactNode;
     renderTotalCount?: (found: number, total: number) => React.ReactNode;
     renderItem: (item: T, state?: MenuItemState) => React.ReactNode;
+    itemWrapper?: (item: T) => React.ComponentType<unknown>;
     renderValue: (value: T) => React.ReactNode;
     renderAddButton?: (query?: string) => React.ReactNode;
     valueToString: (value: T) => string;
     itemToValue: (item: T) => string | number;
-    getItems: (query: string) => Promise<T[]>;
+    getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
 }
 export interface CustomComboBoxState<T> {
     editing: boolean;
     loading: boolean;
     opened: boolean;
     textValue: string;
-    items: Nullable<T[]>;
+    items: Nullable<Array<ComboBoxExtendedItem<T>>>;
     inputChanged: boolean;
     focused: boolean;
     repeatRequest: () => void;
@@ -64,17 +78,24 @@ export declare const DefaultState: {
     textValue: string;
     repeatRequest: () => undefined;
     requestStatus: ComboBoxRequestStatus;
+    size: string;
+};
+export declare const CustomComboBoxDataTids: {
+    readonly comboBoxView: "ComboBoxView__root";
 };
 export declare class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     state: CustomComboBoxState<T>;
     input: Nullable<Input>;
     menu: Nullable<Menu>;
     inputLikeText: Nullable<InputLikeText>;
     requestId: number;
-    loaderShowDelay: Nullable<Promise<never>>;
+    loaderShowDelay: Nullable<Promise<void>>;
     private focused;
     private cancelationToken;
+    private isMobileLayout;
+    private featureFlags;
     private reducer;
     cancelLoaderDelay: () => void;
     /**
@@ -89,6 +110,7 @@ export declare class CustomComboBox<T> extends React.PureComponent<CustomComboBo
      * @public
      */
     blur: () => void;
+    private setRootNode;
     /**
      * @public
      */
@@ -118,6 +140,7 @@ export declare class CustomComboBox<T> extends React.PureComponent<CustomComboBo
     private getState;
     private handleValueChange;
     private handleFocus;
+    private handleMobileClose;
     private handleClickOutside;
     private handleBlur;
     private handleInputBlur;

package/internal/CustomComboBox/CustomComboBox.styles/CustomComboBox.styles.js

@@ -1,45 +1,18 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: -3px;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: -5px;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  root: function root() {
-    return css(_templateObject());
-  },
-  spinnerWrapper: function spinnerWrapper() {
-    return css(_templateObject2());
-  },
-  arrowWrapper: function arrowWrapper() {
-    return css(_templateObject3());
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+var _templateObject, _templateObject2, _templateObject3;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        position: relative;\n        line-height: normal;\n      "])));
+    },
+    spinnerWrapper: function spinnerWrapper() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        margin-right: -5px;\n      "])));
+    },
+    rightIconWrapper: function rightIconWrapper() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        margin-right: -3px;\n      "])));
+    }
+  });
+};

package/internal/CustomComboBox/CustomComboBox.styles/CustomComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CustomComboBox.styles.ts"],"names":["css","memoizeStyle","styles","root","spinnerWrapper","arrowWrapper","jsStyles"],"mappings":"ytBAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;AAID,GANY;;AAQbI,EAAAA,cARa,4BAQI;AACf,WAAOJ,GAAP;;;;AAID,GAbY;;AAebK,EAAAA,YAfa,0BAeE;AACb,WAAOL,GAAP;;;;AAID,GApBY,EAAf;;;AAuBA,OAAO,IAAMM,QAAQ,GAAGL,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      display: inline-block;\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  spinnerWrapper() {\r\n    return css`\r\n      display: inline-block;\r\n      margin-right: -5px;\r\n    `;\r\n  },\r\n\r\n  arrowWrapper() {\r\n    return css`\r\n      display: inline-block;\r\n      margin-right: -3px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["CustomComboBox.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","spinnerWrapper","rightIconWrapper"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;AAKD,OAPU;;AASXC,MAAAA,cATW,4BASM;AACf,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAdU;;AAgBXE,MAAAA,gBAhBW,8BAgBQ;AACjB,eAAOJ,OAAO,CAACE,GAAf;;;;AAID,OArBU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-block;\n        position: relative;\n        line-height: normal;\n      `;\n    },\n\n    spinnerWrapper() {\n      return emotion.css`\n        display: inline-block;\n        margin-right: -5px;\n      `;\n    },\n\n    rightIconWrapper() {\n      return emotion.css`\n        display: inline-block;\n        margin-right: -3px;\n      `;\n    },\n  });\n"]}

package/internal/CustomComboBox/CustomComboBox.styles.d.ts

@@ -1,5 +1,6 @@
-export declare const jsStyles: {
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     spinnerWrapper(): string;
-    arrowWrapper(): string;
+    rightIconWrapper(): string;
 };

package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import debounce from 'lodash.debounce';
 import isEqual from 'lodash.isequal';
+import { globalObject } from '@skbkontur/global-object';
+import { isNonNullable } from "../../../lib/utils";
 import { isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { DefaultState } from "../CustomComboBox";
@@ -8,24 +10,24 @@ import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
 var DEBOUNCE_DELAY = 300;
 
 var getValueString = function getValueString(value, valueToString) {
-  return value ? valueToString(value) : '';
+  return isNonNullable(value) ? valueToString(value) : '';
 };
 
 export var Effect = {
-  Search: function Search(query) {
+  search: function search(query) {
     return function (dispatch, getState, getProps, getInstance) {
       getInstance().search(query);
     };
   },
-  DebouncedSearch: debounce(function (dispatch, getState, getProps, getInstance) {
-    var searchEffect = Effect.Search(getState().textValue);
+  debouncedSearch: debounce(function (dispatch, getState, getProps, getInstance) {
+    var searchEffect = Effect.search(getState().textValue);
     searchEffect(dispatch, getState, getProps, getInstance);
   }, DEBOUNCE_DELAY),
-  CancelRequest: function CancelRequest(dispatch, getState, getProps, getInstance) {
-    Effect.DebouncedSearch.cancel();
+  cancelRequest: function cancelRequest(dispatch, getState, getProps, getInstance) {
+    Effect.debouncedSearch.cancel();
     getInstance().cancelSearch();
   },
-  Blur: function Blur(dispatch, getState, getProps) {
+  blur: function blur(dispatch, getState, getProps) {
     var _getProps = getProps(),
         onBlur = _getProps.onBlur;
 
@@ -33,7 +35,7 @@ export var Effect = {
       onBlur();
     }
   },
-  Focus: function Focus(dispatch, getState, getProps) {
+  focus: function focus(dispatch, getState, getProps) {
     var _getProps2 = getProps(),
         onFocus = _getProps2.onFocus;
 
@@ -41,7 +43,7 @@ export var Effect = {
       onFocus();
     }
   },
-  ValueChange: function ValueChange(value) {
+  valueChange: function valueChange(value) {
     return function (dispatch, getState, getProps) {
       var _getProps3 = getProps(),
           onValueChange = _getProps3.onValueChange;
@@ -51,7 +53,7 @@ export var Effect = {
       }
     };
   },
-  UnexpectedInput: function UnexpectedInput(textValue, items) {
+  unexpectedInput: function unexpectedInput(textValue, items) {
     return function (dispatch, getState, getProps) {
       var _getProps4 = getProps(),
           onUnexpectedInput = _getProps4.onUnexpectedInput,
@@ -84,7 +86,7 @@ export var Effect = {
       }
     };
   },
-  InputChange: function InputChange(dispatch, getState, getProps) {
+  inputChange: function inputChange(dispatch, getState, getProps) {
     var _getProps5 = getProps(),
         onInputValueChange = _getProps5.onInputValueChange;
 
@@ -102,7 +104,7 @@ export var Effect = {
       }
     }
   },
-  InputFocus: function InputFocus(dispatch, getState, getProps, getInstance) {
+  inputFocus: function inputFocus(dispatch, getState, getProps, getInstance) {
     var _getInstance = getInstance(),
         input = _getInstance.input;
 
@@ -112,7 +114,7 @@ export var Effect = {
 
     input.focus();
   },
-  HighlightMenuItem: function HighlightMenuItem(dispatch, getState, getProps, getInstance) {
+  highlightMenuItem: function highlightMenuItem(dispatch, getState, getProps, getInstance) {
     var _getProps6 = getProps(),
         value = _getProps6.value,
         itemToValue = _getProps6.itemToValue,
@@ -139,7 +141,7 @@ export var Effect = {
 
     var index = -1;
 
-    if (items && items.length && value) {
+    if (items && items.length && isNonNullable(value)) {
       index = items.findIndex(function (x) {
         return itemToValue(x) === itemToValue(value);
       });
@@ -148,21 +150,20 @@ export var Effect = {
     menu.highlightItem(index);
 
     if (index >= 0) {
-      // FIXME: accessing private props
-      // @ts-ignore
-      process.nextTick(function () {
+      // @ts-expect-error: Use of private property.
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
         return menu && menu.scrollToSelected();
       });
       return;
     }
 
     if (textValue !== valueString || requestStatus === ComboBoxRequestStatus.Failed) {
-      process.nextTick(function () {
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
         return menu && menu.down();
       });
     }
   },
-  SelectMenuItem: function SelectMenuItem(event) {
+  selectMenuItem: function selectMenuItem(event) {
     return function (dispatch, getState, getProps, getInstance) {
       var _getInstance3 = getInstance(),
           menu = _getInstance3.menu;
@@ -172,7 +173,7 @@ export var Effect = {
       }
     };
   },
-  MoveMenuHighlight: function MoveMenuHighlight(direction) {
+  moveMenuHighlight: function moveMenuHighlight(direction) {
     return function (dispatch, getState, getProps, getInstance) {
       var _getInstance4 = getInstance(),
           menu = _getInstance4.menu;
@@ -182,22 +183,22 @@ export var Effect = {
       }
     };
   },
-  ResetHighlightedMenuItem: function ResetHighlightedMenuItem(dispatch, getState, getProps, getInstance) {
+  resetHighlightedMenuItem: function resetHighlightedMenuItem(dispatch, getState, getProps, getInstance) {
     var combobox = getInstance();
 
     if (combobox.menu && combobox.menu.hasHighlightedItem()) {
       combobox.menu.reset();
     }
   },
-  Reflow: function Reflow() {
+  reflow: function reflow() {
     LayoutEvents.emit();
   },
-  SelectInputText: function SelectInputText(dispatch, getState, getProps, getInstance) {
+  selectInputText: function selectInputText(dispatch, getState, getProps, getInstance) {
     var combobox = getInstance();
     combobox.selectInputText();
   },
-  InputKeyDown: function InputKeyDown(event) {
-    return function (dispatch, getState, getProps, getInstance) {
+  inputKeyDown: function inputKeyDown(event) {
+    return function (dispatch, getState, getProps) {
       var _getProps7 = getProps(),
           onInputKeyDown = _getProps7.onInputKeyDown;
 
@@ -208,7 +209,7 @@ export var Effect = {
   }
 };
 
-var never = function never(_) {
+var never = function never() {
   return null;
 };
 
@@ -228,7 +229,7 @@ export function reducer(state, props, action) {
             editing: true,
             items: null,
             textValue: _textValue
-          }, [Effect.ValueChange(_value2), Effect.CancelRequest, Effect.InputFocus]];
+          }, [Effect.valueChange(_value2), Effect.cancelRequest, Effect.inputFocus]];
         }
 
         return [{
@@ -237,7 +238,7 @@ export function reducer(state, props, action) {
           editing: false,
           items: null,
           textValue: _textValue
-        }, [Effect.ValueChange(_value2), Effect.CancelRequest]];
+        }, [Effect.valueChange(_value2), Effect.cancelRequest]];
       }
 
     case 'TextChange':
@@ -251,10 +252,10 @@ export function reducer(state, props, action) {
           return [_extends({}, newState, {
             opened: false,
             items: null
-          }), [Effect.InputChange]];
+          }), [Effect.inputChange]];
         }
 
-        return [newState, [Effect.DebouncedSearch, Effect.InputChange]];
+        return [newState, [Effect.debouncedSearch, Effect.inputChange]];
       }
 
     case 'KeyPress':
@@ -265,16 +266,20 @@ export function reducer(state, props, action) {
 
         switch (true) {
           case isKeyEnter(e):
+            if (!state.opened) {
+              break;
+            }
+
             e.preventDefault();
-            effects.push(Effect.SelectMenuItem(e));
+            effects.push(Effect.selectMenuItem(e));
             break;
 
           case isKeyArrowVertical(e):
             e.preventDefault();
-            effects.push(Effect.MoveMenuHighlight(isKeyArrowUp(e) ? 'up' : 'down'));
+            effects.push(Effect.moveMenuHighlight(isKeyArrowUp(e) ? 'up' : 'down'));
 
             if (!state.opened) {
-              effects.push(Effect.Search(state.textValue));
+              effects.push(Effect.search(state.textValue));
             }
 
             break;
@@ -287,7 +292,7 @@ export function reducer(state, props, action) {
             break;
         }
 
-        return [nextState, [].concat(effects, [Effect.InputKeyDown(e)])];
+        return [nextState, [].concat(effects, [Effect.inputKeyDown(e)])];
       }
 
     case 'DidUpdate':
@@ -296,6 +301,30 @@ export function reducer(state, props, action) {
           return state;
         }
 
+        if (action.fixValueChange) {
+          var nextTextValue = getValueString(props.value, props.valueToString);
+
+          if (!state.focused) {
+            return [{
+              editing: false,
+              inputChanged: false,
+              textValue: nextTextValue
+            }, [Effect.cancelRequest]];
+          }
+
+          if (state.focused && state.opened) {
+            return [_extends({}, state, {
+              textValue: nextTextValue
+            }), [Effect.cancelRequest, Effect.search(nextTextValue)]];
+          }
+
+          if (state.focused) {
+            return _extends({}, state, {
+              textValue: nextTextValue
+            });
+          }
+        }
+
         return {
           opened: false,
           textValue: state.editing ? state.textValue : getValueString(props.value, props.valueToString)
@@ -317,20 +346,24 @@ export function reducer(state, props, action) {
         };
 
         if (!props.searchOnFocus) {
-          return [_newState, [Effect.Focus]];
+          return [_newState, [Effect.focus]];
         }
 
         if (state.editing) {
-          return [_newState, [Effect.Search(state.textValue), Effect.Focus]];
+          return [_newState, [Effect.search(state.textValue), Effect.focus]];
         }
 
-        return [_newState, [Effect.Search(''), Effect.Focus, Effect.SelectInputText]];
+        return [_newState, [Effect.search(''), Effect.focus, Effect.selectInputText]];
       }
 
     case 'InputClick':
       {
+        var _newState2 = {
+          inputChanged: false
+        };
+
         if (!state.opened && props.searchOnFocus) {
-          return [state, [Effect.Search('')]];
+          return [_newState2, [Effect.search('')]];
         }
 
         return state;
@@ -347,14 +380,14 @@ export function reducer(state, props, action) {
             opened: false,
             items: null,
             editing: false
-          }, [Effect.Blur, Effect.CancelRequest]];
+          }, [Effect.blur, Effect.cancelRequest]];
         }
 
         return [{
           focused: false,
           opened: false,
           items: null
-        }, [Effect.Blur, Effect.CancelRequest, Effect.UnexpectedInput(state.textValue, _items)]];
+        }, [Effect.blur, Effect.cancelRequest, Effect.unexpectedInput(state.textValue, _items)]];
       }
 
     case 'Reset':
@@ -379,7 +412,7 @@ export function reducer(state, props, action) {
 
     case 'Search':
       {
-        return [state, [Effect.Search(action.query)]];
+        return [state, [Effect.search(action.query)]];
       }
 
     case 'RequestItems':
@@ -399,7 +432,7 @@ export function reducer(state, props, action) {
           opened: true,
           items: action.items,
           requestStatus: ComboBoxRequestStatus.Success
-        }, [shouldResetMenuHighlight ? Effect.ResetHighlightedMenuItem : Effect.HighlightMenuItem, Effect.Reflow]];
+        }, [shouldResetMenuHighlight ? Effect.resetHighlightedMenuItem : Effect.highlightMenuItem, Effect.reflow]];
       }
 
     case 'RequestFailure':
@@ -410,7 +443,7 @@ export function reducer(state, props, action) {
           items: null,
           requestStatus: ComboBoxRequestStatus.Failed,
           repeatRequest: action.repeatRequest
-        }, [Effect.HighlightMenuItem]];
+        }, [Effect.highlightMenuItem]];
       }
 
     case 'CancelRequest':
@@ -423,7 +456,7 @@ export function reducer(state, props, action) {
 
     default:
       {
-        never(action);
+        never();
       }
   }