@consta/uikit 4.1.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/__internal__/src/components/AutoCompleteCanary/AutoCompleteCanary.d.ts +3 -0
- package/__internal__/src/components/AutoCompleteCanary/AutoCompleteCanary.js +2 -0
- package/__internal__/src/components/AutoCompleteCanary/AutoCompleteCanary.js.map +1 -0
- package/__internal__/src/components/AutoCompleteCanary/helpers.d.ts +44 -0
- package/__internal__/src/components/AutoCompleteCanary/helpers.js +2 -0
- package/__internal__/src/components/AutoCompleteCanary/helpers.js.map +1 -0
- package/__internal__/src/components/AutoCompleteCanary/types.d.ts +51 -0
- package/__internal__/src/components/AutoCompleteCanary/types.js +2 -0
- package/__internal__/src/components/AutoCompleteCanary/types.js.map +1 -0
- package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.d.ts +50 -0
- package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js +2 -0
- package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js.map +1 -0
- package/__internal__/src/components/Combobox/Combobox.js +1 -1
- package/__internal__/src/components/Combobox/Combobox.js.map +1 -1
- package/__internal__/src/components/ContextMenu/ContextMenuLevels/ContextMenuLevels.js +1 -1
- package/__internal__/src/components/ContextMenu/ContextMenuLevels/ContextMenuLevels.js.map +1 -1
- package/__internal__/src/components/ContextMenu/helpers.d.ts +2 -2
- package/__internal__/src/components/ContextMenu/types.d.ts +1 -1
- package/__internal__/src/components/ContextMenu/types.js.map +1 -1
- package/__internal__/src/components/Select/Select.js +1 -1
- package/__internal__/src/components/Select/Select.js.map +1 -1
- package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.css +1 -1
- package/__internal__/src/components/TagBase/TagBase.d.ts +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js.map +1 -1
- package/__internal__/src/docs/aboutConsta/components/AboutData/AboutData.css +1 -1
- package/__internal__/src/docs/aboutConsta/components/AboutData/AboutData.js +1 -1
- package/__internal__/src/docs/aboutConsta/components/AboutData/AboutData.js.map +1 -1
- package/__internal__/src/docs/tableComparison/components/AboutData/AboutData.css +1 -0
- package/__internal__/src/docs/tableComparison/components/AboutData/AboutData.d.ts +2 -0
- package/__internal__/src/docs/tableComparison/components/AboutData/AboutData.js +2 -0
- package/__internal__/src/docs/tableComparison/components/AboutData/AboutData.js.map +1 -0
- package/__internal__/src/docs/tableComparison/tableComparison.stand.d.ts +2 -0
- package/__internal__/src/docs/tableComparison/tableComparison.stand.js +2 -0
- package/__internal__/src/docs/tableComparison/tableComparison.stand.js.map +1 -0
- package/__internal__/src/hooks/useSelect/useSelect.d.ts +2 -0
- package/__internal__/src/hooks/useSelect/useSelect.js +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js.map +1 -1
- package/__internal__/src/uiKit/components/ComponentsGridWithData/data/additionalData.js +1 -1
- package/__internal__/src/uiKit/components/ComponentsGridWithData/data/additionalData.js.map +1 -1
- package/__internal__/src/utils/bem.d.ts +2 -0
- package/__internal__/src/utils/bem.js +1 -1
- package/__internal__/src/utils/bem.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# [Дизайн-система Consta](http://consta.gazprom-neft.ru/) | Библиотека интерфейсных компонентов
|
|
2
2
|
|
|
3
|
-
Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/)
|
|
3
|
+
Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).
|
|
4
4
|
|
|
5
5
|
В дизайн-систему входит несколько библиотек. **Здесь — библиотека интерфейсных компонентов:** простые контролы, сложные блоки, темы и хуки. Все библиотеки представлены в виде компонентов и макетов в Figma.
|
|
6
6
|
|
|
@@ -8,17 +8,17 @@ Consta — дизайн-система для разработки интерф
|
|
|
8
8
|
|
|
9
9
|
### Библиотека компонентов
|
|
10
10
|
|
|
11
|
-
[Репозиторий](https://github.com/consta-design-system/uikit) | [NPM](https://www.npmjs.com/package/@consta/uikit) | [Документация и стенд](http://uikit.
|
|
11
|
+
[Репозиторий](https://github.com/consta-design-system/uikit) | [NPM](https://www.npmjs.com/package/@consta/uikit) | [Документация и стенд](http://uikit.consta.design/) | [Макеты](https://www.figma.com/community/file/853774806786762374)
|
|
12
12
|
|
|
13
13
|
### Библиотека графиков
|
|
14
14
|
|
|
15
|
-
[Репозиторий](https://github.com/consta-design-system/charts) | [NPM](https://www.npmjs.com/package/@consta/charts) | [Документация и стенд](http://charts.
|
|
15
|
+
[Репозиторий](https://github.com/consta-design-system/charts) | [NPM](https://www.npmjs.com/package/@consta/charts) | [Документация и стенд](http://charts.consta.design) | [Макеты](https://www.figma.com/community/file/982611119114314434)
|
|
16
16
|
|
|
17
|
-
[>> Посмотреть все библиотеки](
|
|
17
|
+
[>> Посмотреть все библиотеки](https://github.com/consta-design-system)
|
|
18
18
|
|
|
19
19
|
<hr>
|
|
20
20
|
|
|
21
|
-
Подробности — на [на сайте дизайн-системы Consta](http://consta.
|
|
21
|
+
Подробности — на [на сайте дизайн-системы Consta](http://consta.design/)
|
|
22
22
|
|
|
23
23
|
Следите за новостями и релизами в [телеграм-канале дизайн-системы](https://t.me/consta_ui_releases)
|
|
24
24
|
|
|
@@ -46,18 +46,18 @@ const App = () => (
|
|
|
46
46
|
);
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
-
[Что такое темы и как с ними работать](http://uikit.
|
|
49
|
+
[Что такое темы и как с ними работать](http://uikit.consta.design/?path=/docs/thematization-what-are-themes--page)
|
|
50
50
|
|
|
51
51
|
## Документация и стенд
|
|
52
52
|
|
|
53
53
|
На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.
|
|
54
54
|
|
|
55
|
-
[Вперёд, к стенду](http://uikit.
|
|
55
|
+
[Вперёд, к стенду](http://uikit.consta.design/)
|
|
56
56
|
|
|
57
57
|
## Контрибьюторам
|
|
58
58
|
|
|
59
|
-
Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](
|
|
59
|
+
Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](https://uikit.consta.design/libs/uikit/custom-contribute).
|
|
60
60
|
|
|
61
61
|
## Лицензия
|
|
62
62
|
|
|
63
|
-
Дизайн-систему можно использовать бесплатно, она распространяется
|
|
63
|
+
Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой [лицензии MIT](https://consta.gazprom-neft.ru/static/licence_mit.pdf).
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","groups","disabled","getItemLabel","getItemKey","isLoading","getItemGroupKey","getGroupKey","getGroupLabel","onBlur","inputRef","onFocus","dropdownRef","dropdownClassName","dropdownForm","value","form","view","size","onChange","inputContainerRef","style","renderItem","searchFunction","id","name","className"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useRef}from"react";import{SelectDropdown}from"../SelectComponents/SelectDropdown/SelectDropdown";import{SelectItem}from"../SelectComponents/SelectItem/SelectItem";import{defaultPropForm,defaultPropSize,defaultPropView}from"../SelectComponents/types";import{TextField}from"../TextField/TextField";import{useForkRef}from"../../hooks/useForkRef";import{cnCanary}from"../../utils/bem";import{withDefaultGetters}from"./helpers";import{useAutoComplete}from"./useAutoComplete";var cnAutoComplete=cnCanary("AutoComplete"),AutoCompleteRender=function(a,b){var c=useRef(null),d=useRef(null),e=useRef(null),f=withDefaultGetters(a),g=f.items,h=f.groups,i=void 0===h?[]:h,j=f.disabled,k=f.getItemLabel,l=f.getItemKey,m=f.isLoading,n=f.getItemGroupKey,o=f.getGroupKey,p=f.getGroupLabel,q=f.onBlur,r=f.inputRef,s=f.onFocus,t=f.dropdownRef,u=void 0===t?c:t,v=f.dropdownClassName,w=f.dropdownForm,x=void 0===w?"default":w,y=f.value,z=f.form,A=void 0===z?defaultPropForm:z,B=f.view,C=void 0===B?defaultPropView:B,D=f.size,E=void 0===D?defaultPropSize:D,F=f.onChange,G=f.inputContainerRef,H=f.style,I=f.renderItem,J=f.searchFunction,K=f.id,L=f.name,M=f.className,N=_objectWithoutProperties(f,_excluded),O=function(a){var b=a.e,c=a.value,d=_objectSpread({},b),e=c?k(c):c;null===F||void 0===F?void 0:F({e:d,value:e,id:K,name:L})},P=useAutoComplete({items:g,groups:i,onChange:function(a){var b=a.e,c=a.value;return O({e:b,value:Array.isArray(c)?c[0]:c})},dropdownRef:u,controlRef:d,disabled:j,searchValue:null!==y&&void 0!==y?y:"",getItemLabel:k,getItemKey:l,getItemGroupKey:n,getGroupKey:o,onBlur:q,onFocus:s,searchFunction:J}),Q=P.getOptionProps,R=P.isOpen,S=P.getKeyProps,T=P.visibleItems,U=P.handleInputFocus,V=P.handleInputBlur,W=P.inputRef;return React.createElement(React.Fragment,null,React.createElement(TextField,Object.assign({},S(),{form:A,view:C,id:K,className:cnAutoComplete(null,[M]),name:L,disabled:j,ref:useForkRef([d,b]),inputRef:useForkRef([r,W]),onBlur:V,inputContainerRef:useForkRef([e,G]),onFocus:U,onChange:F,value:y,style:H},N)),React.createElement(SelectDropdown,{isOpen:R,size:E,controlRef:e,getOptionProps:Q,dropdownRef:u,form:x,className:cnAutoComplete("List",[v]),renderItem:I||function renderItemDefault(a){var b=a.item,c=a.active,d=a.hovered,e=a.onClick,f=a.onMouseEnter;return React.createElement(SelectItem,{label:k(b),active:c,hovered:d,multiple:!1,disabled:j,size:E,indent:"round"===x?"increased":"normal",onClick:e,onMouseEnter:f})},getGroupLabel:p,visibleItems:T,isLoading:m,hasItems:0!==g.length,style:"number"==typeof(null===H||void 0===H?void 0:H.zIndex)?{zIndex:H.zIndex+1}:void 0}))};export var AutoComplete=React.forwardRef(AutoCompleteRender);export*from"./types";
|
|
2
|
+
//# sourceMappingURL=AutoCompleteCanary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AutoCompleteCanary.js","names":["React","useRef","SelectDropdown","SelectItem","defaultPropForm","defaultPropSize","defaultPropView","TextField","useForkRef","cnCanary","withDefaultGetters","useAutoComplete","cnAutoComplete","AutoCompleteRender","props","ref","defaultDropdownRef","controlRef","containerRef","items","groups","disabled","getItemLabel","getItemKey","isLoading","getItemGroupKey","getGroupKey","getGroupLabel","onBlur","inputRef","onFocus","dropdownRef","dropdownClassName","dropdownForm","value","form","view","size","onChange","inputContainerRef","style","renderItem","searchFunction","id","name","className","otherProps","handleSelectChange","e","copyEvent","newValue","Array","isArray","searchValue","getOptionProps","isOpen","getKeyProps","visibleItems","handleInputFocus","handleInputBlur","inputControlRef","renderItemDefault","item","active","hovered","onClick","onMouseEnter","length","zIndex","AutoComplete","forwardRef"],"sources":["../../../../../src/components/AutoCompleteCanary/AutoCompleteCanary.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { PropRenderItem } from '##/components/Select';\nimport { SelectDropdown } from '##/components/SelectComponents/SelectDropdown/SelectDropdown';\nimport { SelectItem } from '##/components/SelectComponents/SelectItem/SelectItem';\nimport {\n defaultPropForm,\n defaultPropSize,\n defaultPropView,\n} from '##/components/SelectComponents/types';\nimport { TextField } from '##/components/TextField/TextField';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { cnCanary } from '##/utils/bem';\n\nimport { withDefaultGetters } from './helpers';\nimport {\n AutoCompleteComponent,\n AutoCompleteGroupDefault,\n AutoCompleteItemDefault,\n AutoCompleteProps,\n} from './types';\nimport { useAutoComplete } from './useAutoComplete';\n\nconst cnAutoComplete = cnCanary('AutoComplete');\n\nconst AutoCompleteRender = <\n TYPE extends string,\n ITEM = AutoCompleteItemDefault,\n GROUP = AutoCompleteGroupDefault,\n>(\n props: AutoCompleteProps<TYPE, ITEM, GROUP>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const defaultDropdownRef = useRef<HTMLDivElement | null>(null);\n const controlRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const {\n items,\n groups = [],\n disabled,\n getItemLabel,\n getItemKey,\n isLoading,\n getItemGroupKey,\n getGroupKey,\n getGroupLabel,\n onBlur,\n inputRef,\n onFocus,\n dropdownRef = defaultDropdownRef,\n dropdownClassName,\n dropdownForm = 'default',\n value,\n form = defaultPropForm,\n view = defaultPropView,\n size = defaultPropSize,\n onChange,\n inputContainerRef,\n style,\n renderItem,\n searchFunction,\n id,\n name,\n className,\n ...otherProps\n } = withDefaultGetters(props);\n\n const handleSelectChange = ({\n e,\n value,\n }: {\n value: ITEM | null;\n e: React.SyntheticEvent;\n }) => {\n const copyEvent = { ...e } as React.KeyboardEvent;\n const newValue = (value ? getItemLabel(value) : value) as string;\n onChange?.({ e: copyEvent, value: newValue, id, name });\n };\n\n const {\n getOptionProps,\n isOpen,\n getKeyProps,\n visibleItems,\n handleInputFocus,\n handleInputBlur,\n inputRef: inputControlRef,\n } = useAutoComplete({\n items,\n groups,\n onChange: ({ e, value }) =>\n handleSelectChange({ e, value: Array.isArray(value) ? value[0] : value }),\n dropdownRef,\n controlRef,\n disabled,\n searchValue: value ?? '',\n getItemLabel,\n getItemKey,\n getItemGroupKey,\n getGroupKey,\n onBlur,\n onFocus,\n searchFunction,\n });\n\n const renderItemDefault: PropRenderItem<ITEM> = (props) => {\n const { item, active, hovered, onClick, onMouseEnter } = props;\n\n return (\n <SelectItem\n label={getItemLabel(item)}\n active={active}\n hovered={hovered}\n multiple={false}\n disabled={disabled}\n size={size}\n indent={dropdownForm === 'round' ? 'increased' : 'normal'}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n />\n );\n };\n\n return (\n <>\n <TextField\n {...getKeyProps()}\n form={form}\n view={view}\n id={id}\n className={cnAutoComplete(null, [className])}\n name={name}\n disabled={disabled}\n ref={useForkRef([controlRef, ref])}\n inputRef={useForkRef([inputRef, inputControlRef])}\n onBlur={handleInputBlur}\n inputContainerRef={useForkRef([containerRef, inputContainerRef])}\n onFocus={handleInputFocus}\n onChange={onChange}\n value={value}\n style={style}\n {...otherProps}\n />\n <SelectDropdown\n isOpen={isOpen}\n size={size}\n controlRef={containerRef}\n getOptionProps={getOptionProps}\n dropdownRef={dropdownRef}\n form={dropdownForm}\n className={cnAutoComplete('List', [dropdownClassName])}\n renderItem={renderItem || renderItemDefault}\n getGroupLabel={getGroupLabel}\n visibleItems={visibleItems}\n isLoading={isLoading}\n hasItems={items.length !== 0}\n style={\n typeof style?.zIndex === 'number'\n ? { zIndex: style.zIndex + 1 }\n : undefined\n }\n />\n </>\n );\n};\n\nexport const AutoComplete = React.forwardRef(\n AutoCompleteRender,\n) as AutoCompleteComponent;\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AutoCompleteGroupDefault, AutoCompleteItemDefault, AutoCompletePropGetGroupId, AutoCompletePropGetGroupLabel, AutoCompletePropGetItemGroupId, AutoCompletePropGetItemKey, AutoCompletePropGetItemLabel, AutoCompleteProps } from './types';
|
|
3
|
+
export declare const defaultGetItemKey: AutoCompletePropGetItemKey<AutoCompleteItemDefault>;
|
|
4
|
+
export declare const defaultGetItemLabel: AutoCompletePropGetItemLabel<AutoCompleteItemDefault>;
|
|
5
|
+
export declare const defaultGetItemGroupKey: AutoCompletePropGetItemGroupId<AutoCompleteItemDefault>;
|
|
6
|
+
export declare const defaultGetGroupKey: AutoCompletePropGetGroupId<AutoCompleteGroupDefault>;
|
|
7
|
+
export declare const defaultGetGroupLabel: AutoCompletePropGetGroupLabel<AutoCompleteGroupDefault>;
|
|
8
|
+
export declare function withDefaultGetters<TYPE extends string, ITEM = AutoCompleteItemDefault, GROUP = AutoCompleteGroupDefault>(props: AutoCompleteProps<TYPE, ITEM, GROUP>): {
|
|
9
|
+
items: ITEM[];
|
|
10
|
+
groups?: GROUP[] | undefined;
|
|
11
|
+
renderItem?: import("../Select").PropRenderItem<ITEM> | undefined;
|
|
12
|
+
dropdownClassName?: string | undefined;
|
|
13
|
+
dropdownForm?: import("./types").AutoCompletePropDropdownForm | undefined;
|
|
14
|
+
isLoading?: boolean | undefined;
|
|
15
|
+
searchFunction?: import("./types").AutoCompletePropSearchFunction<ITEM> | undefined;
|
|
16
|
+
dropdownRef?: import("react").RefObject<HTMLDivElement> | undefined;
|
|
17
|
+
getItemLabel?: AutoCompletePropGetItemLabel<ITEM> | undefined;
|
|
18
|
+
getItemKey?: AutoCompletePropGetItemKey<ITEM> | undefined;
|
|
19
|
+
getItemGroupKey?: AutoCompletePropGetItemGroupId<ITEM> | undefined;
|
|
20
|
+
getGroupLabel?: AutoCompletePropGetGroupLabel<GROUP> | undefined;
|
|
21
|
+
getGroupKey?: AutoCompletePropGetGroupId<GROUP> | undefined;
|
|
22
|
+
} & Omit<import("../TextField").TextFieldProps<TYPE>, "step" | "max" | "min" | "incrementButtons"> & (ITEM extends {
|
|
23
|
+
label: string;
|
|
24
|
+
} ? {} : {
|
|
25
|
+
getItemLabel: AutoCompletePropGetItemLabel<ITEM>;
|
|
26
|
+
}) & (ITEM extends {
|
|
27
|
+
id: string | number;
|
|
28
|
+
} ? {} : {
|
|
29
|
+
getItemKey: AutoCompletePropGetItemKey<ITEM>;
|
|
30
|
+
}) & (GROUP extends {
|
|
31
|
+
label: string;
|
|
32
|
+
} ? {} : {
|
|
33
|
+
getGroupLabel: AutoCompletePropGetGroupLabel<GROUP>;
|
|
34
|
+
}) & (GROUP extends {
|
|
35
|
+
id: string | number;
|
|
36
|
+
} ? {} : {
|
|
37
|
+
getGroupKey: AutoCompletePropGetGroupId<GROUP>;
|
|
38
|
+
}) & {
|
|
39
|
+
getItemLabel: AutoCompletePropGetItemLabel<AutoCompleteItemDefault> | AutoCompletePropGetItemLabel<ITEM>;
|
|
40
|
+
getItemKey: AutoCompletePropGetItemKey<AutoCompleteItemDefault> | AutoCompletePropGetItemKey<ITEM>;
|
|
41
|
+
getItemGroupKey: AutoCompletePropGetItemGroupId<AutoCompleteItemDefault> | AutoCompletePropGetItemGroupId<ITEM>;
|
|
42
|
+
getGroupLabel: AutoCompletePropGetGroupLabel<AutoCompleteGroupDefault> | AutoCompletePropGetGroupLabel<GROUP>;
|
|
43
|
+
getGroupKey: AutoCompletePropGetGroupId<AutoCompleteGroupDefault> | AutoCompletePropGetGroupId<GROUP>;
|
|
44
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}export var defaultGetItemKey=function(a){return a.id};export var defaultGetItemLabel=function(a){return a.label};export var defaultGetItemGroupKey=function(a){return a.groupId};export var defaultGetGroupKey=function(a){return a.id};export var defaultGetGroupLabel=function(a){return a.label};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemKey:a.getItemKey||defaultGetItemKey,getItemGroupKey:a.getItemGroupKey||defaultGetItemGroupKey,getGroupLabel:a.getGroupLabel||defaultGetGroupLabel,getGroupKey:a.getGroupKey||defaultGetGroupKey})}
|
|
2
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["defaultGetItemKey","item","id","defaultGetItemLabel","label","defaultGetItemGroupKey","groupId","defaultGetGroupKey","group","defaultGetGroupLabel","withDefaultGetters","props","getItemLabel","getItemKey","getItemGroupKey","getGroupLabel","getGroupKey"],"sources":["../../../../../src/components/AutoCompleteCanary/helpers.ts"],"sourcesContent":["import {\n AutoCompleteGroupDefault,\n AutoCompleteItemDefault,\n AutoCompletePropGetGroupId,\n AutoCompletePropGetGroupLabel,\n AutoCompletePropGetItemGroupId,\n AutoCompletePropGetItemKey,\n AutoCompletePropGetItemLabel,\n AutoCompleteProps,\n} from './types';\n\nexport const defaultGetItemKey: AutoCompletePropGetItemKey<\n AutoCompleteItemDefault\n> = (item) => item.id;\nexport const defaultGetItemLabel: AutoCompletePropGetItemLabel<\n AutoCompleteItemDefault\n> = (item) => item.label;\nexport const defaultGetItemGroupKey: AutoCompletePropGetItemGroupId<\n AutoCompleteItemDefault\n> = (item) => item.groupId;\n\nexport const defaultGetGroupKey: AutoCompletePropGetGroupId<\n AutoCompleteGroupDefault\n> = (group) => group.id;\nexport const defaultGetGroupLabel: AutoCompletePropGetGroupLabel<\n AutoCompleteGroupDefault\n> = (group) => group.label;\n\nexport function withDefaultGetters<\n TYPE extends string,\n ITEM = AutoCompleteItemDefault,\n GROUP = AutoCompleteGroupDefault,\n>(props: AutoCompleteProps<TYPE, ITEM, GROUP>) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemKey: props.getItemKey || defaultGetItemKey,\n getItemGroupKey: props.getItemGroupKey || defaultGetItemGroupKey,\n getGroupLabel: props.getGroupLabel || defaultGetGroupLabel,\n getGroupKey: props.getGroupKey || defaultGetGroupKey,\n };\n}\n"],"mappings":"qqBAWA,MAAO,IAAMA,kBAEZ,CAAG,SAACC,CAAD,QAAUA,EAAI,CAACC,EAAf,CAFG,CAGP,MAAO,IAAMC,oBAEZ,CAAG,SAACF,CAAD,QAAUA,EAAI,CAACG,KAAf,CAFG,CAGP,MAAO,IAAMC,uBAEZ,CAAG,SAACJ,CAAD,QAAUA,EAAI,CAACK,OAAf,CAFG,CAIP,MAAO,IAAMC,mBAEZ,CAAG,SAACC,CAAD,QAAWA,EAAK,CAACN,EAAjB,CAFG,CAGP,MAAO,IAAMO,qBAEZ,CAAG,SAACD,CAAD,QAAWA,EAAK,CAACJ,KAAjB,CAFG,CAIP,MAAO,SAASM,mBAAT,CAILC,CAJK,CAIwC,CAC7C,sCACKA,CADL,MAEEC,YAAY,CAAED,CAAK,CAACC,YAAN,EAAsBT,mBAFtC,CAGEU,UAAU,CAAEF,CAAK,CAACE,UAAN,EAAoBb,iBAHlC,CAIEc,eAAe,CAAEH,CAAK,CAACG,eAAN,EAAyBT,sBAJ5C,CAKEU,aAAa,CAAEJ,CAAK,CAACI,aAAN,EAAuBN,oBALxC,CAMEO,WAAW,CAAEL,CAAK,CAACK,WAAN,EAAqBT,kBANpC,EAQD"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropRenderItem } from "../Select";
|
|
3
|
+
import { TextFieldProps } from "../TextField";
|
|
4
|
+
export declare type AutoCompleteItemDefault = {
|
|
5
|
+
id: string | number;
|
|
6
|
+
label: string;
|
|
7
|
+
groupId?: number;
|
|
8
|
+
};
|
|
9
|
+
export declare type AutoCompleteGroupDefault = {
|
|
10
|
+
label: string;
|
|
11
|
+
id: number | string;
|
|
12
|
+
};
|
|
13
|
+
export declare type AutoCompletePropDropdownForm = 'default' | 'brick' | 'round';
|
|
14
|
+
export declare type AutoCompletePropGetItemLabel<ITEM> = (item: ITEM) => string;
|
|
15
|
+
export declare type AutoCompletePropGetItemKey<ITEM> = (item: ITEM) => string | number;
|
|
16
|
+
export declare type AutoCompletePropGetItemGroupId<ITEM> = (item: ITEM) => number | undefined;
|
|
17
|
+
export declare type AutoCompletePropGetGroupLabel<GROUP> = (group: GROUP) => string;
|
|
18
|
+
export declare type AutoCompletePropGetGroupId<GROUP> = (group: GROUP) => number | string;
|
|
19
|
+
export declare type AutoCompletePropSearchFunction<ITEM> = (item: ITEM, searchValue: string) => boolean;
|
|
20
|
+
export declare type AutoCompleteProps<TYPE extends string, ITEM = AutoCompleteItemDefault, GROUP = AutoCompleteGroupDefault> = {
|
|
21
|
+
items: ITEM[];
|
|
22
|
+
groups?: GROUP[];
|
|
23
|
+
renderItem?: PropRenderItem<ITEM>;
|
|
24
|
+
dropdownClassName?: string;
|
|
25
|
+
dropdownForm?: AutoCompletePropDropdownForm;
|
|
26
|
+
isLoading?: boolean;
|
|
27
|
+
searchFunction?: AutoCompletePropSearchFunction<ITEM>;
|
|
28
|
+
dropdownRef?: React.RefObject<HTMLDivElement>;
|
|
29
|
+
getItemLabel?: AutoCompletePropGetItemLabel<ITEM>;
|
|
30
|
+
getItemKey?: AutoCompletePropGetItemKey<ITEM>;
|
|
31
|
+
getItemGroupKey?: AutoCompletePropGetItemGroupId<ITEM>;
|
|
32
|
+
getGroupLabel?: AutoCompletePropGetGroupLabel<GROUP>;
|
|
33
|
+
getGroupKey?: AutoCompletePropGetGroupId<GROUP>;
|
|
34
|
+
} & Omit<TextFieldProps<TYPE>, 'max' | 'min' | 'step' | 'incrementButtons'> & (ITEM extends {
|
|
35
|
+
label: AutoCompleteItemDefault['label'];
|
|
36
|
+
} ? {} : {
|
|
37
|
+
getItemLabel: AutoCompletePropGetItemLabel<ITEM>;
|
|
38
|
+
}) & (ITEM extends {
|
|
39
|
+
id: AutoCompleteItemDefault['id'];
|
|
40
|
+
} ? {} : {
|
|
41
|
+
getItemKey: AutoCompletePropGetItemKey<ITEM>;
|
|
42
|
+
}) & (GROUP extends {
|
|
43
|
+
label: AutoCompleteGroupDefault['label'];
|
|
44
|
+
} ? {} : {
|
|
45
|
+
getGroupLabel: AutoCompletePropGetGroupLabel<GROUP>;
|
|
46
|
+
}) & (GROUP extends {
|
|
47
|
+
id: AutoCompleteGroupDefault['id'];
|
|
48
|
+
} ? {} : {
|
|
49
|
+
getGroupKey: AutoCompletePropGetGroupId<GROUP>;
|
|
50
|
+
});
|
|
51
|
+
export declare type AutoCompleteComponent = <TYPE extends string, ITEM = AutoCompleteItemDefault, GROUP = AutoCompleteGroupDefault>(props: AutoCompleteProps<TYPE, ITEM, GROUP>) => React.ReactElement | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/components/AutoCompleteCanary/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropRenderItem } from '##/components/Select';\nimport { TextFieldProps } from '##/components/TextField';\n\nexport type AutoCompleteItemDefault = {\n id: string | number;\n label: string;\n groupId?: number;\n};\n\nexport type AutoCompleteGroupDefault = {\n label: string;\n id: number | string;\n};\n\nexport type AutoCompletePropDropdownForm = 'default' | 'brick' | 'round';\n\nexport type AutoCompletePropGetItemLabel<ITEM> = (item: ITEM) => string;\nexport type AutoCompletePropGetItemKey<ITEM> = (item: ITEM) => string | number;\nexport type AutoCompletePropGetItemGroupId<ITEM> = (\n item: ITEM,\n) => number | undefined;\nexport type AutoCompletePropGetGroupLabel<GROUP> = (group: GROUP) => string;\nexport type AutoCompletePropGetGroupId<GROUP> = (\n group: GROUP,\n) => number | string;\n\nexport type AutoCompletePropSearchFunction<ITEM> = (\n item: ITEM,\n searchValue: string,\n) => boolean;\n\nexport type AutoCompleteProps<\n TYPE extends string,\n ITEM = AutoCompleteItemDefault,\n GROUP = AutoCompleteGroupDefault,\n> = {\n items: ITEM[];\n groups?: GROUP[];\n renderItem?: PropRenderItem<ITEM>;\n dropdownClassName?: string;\n dropdownForm?: AutoCompletePropDropdownForm;\n isLoading?: boolean;\n searchFunction?: AutoCompletePropSearchFunction<ITEM>;\n dropdownRef?: React.RefObject<HTMLDivElement>;\n getItemLabel?: AutoCompletePropGetItemLabel<ITEM>;\n getItemKey?: AutoCompletePropGetItemKey<ITEM>;\n getItemGroupKey?: AutoCompletePropGetItemGroupId<ITEM>;\n getGroupLabel?: AutoCompletePropGetGroupLabel<GROUP>;\n getGroupKey?: AutoCompletePropGetGroupId<GROUP>;\n} & Omit<TextFieldProps<TYPE>, 'max' | 'min' | 'step' | 'incrementButtons'> &\n (ITEM extends { label: AutoCompleteItemDefault['label'] }\n ? {}\n : {\n getItemLabel: AutoCompletePropGetItemLabel<ITEM>;\n }) &\n (ITEM extends { id: AutoCompleteItemDefault['id'] }\n ? {}\n : { getItemKey: AutoCompletePropGetItemKey<ITEM> }) &\n (GROUP extends { label: AutoCompleteGroupDefault['label'] }\n ? {}\n : { getGroupLabel: AutoCompletePropGetGroupLabel<GROUP> }) &\n (GROUP extends { id: AutoCompleteGroupDefault['id'] }\n ? {}\n : { getGroupKey: AutoCompletePropGetGroupId<GROUP> });\n\nexport type AutoCompleteComponent = <\n TYPE extends string,\n ITEM = AutoCompleteItemDefault,\n GROUP = AutoCompleteGroupDefault,\n>(\n props: AutoCompleteProps<TYPE, ITEM, GROUP>,\n) => React.ReactElement | null;\n"],"mappings":""}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type GetItemGroupKey<ITEM> = (item: ITEM) => string | number | undefined;
|
|
3
|
+
declare type GetGroupKey<GROUP> = (item: GROUP) => string | number | undefined;
|
|
4
|
+
declare type OnChangeProp<ITEM> = (props: {
|
|
5
|
+
value: ITEM | null;
|
|
6
|
+
e: React.SyntheticEvent;
|
|
7
|
+
}) => void;
|
|
8
|
+
declare type UseAutoCompleteProps<ITEM, GROUP> = {
|
|
9
|
+
getItemGroupKey?: GetItemGroupKey<ITEM> | undefined;
|
|
10
|
+
getGroupKey?: GetGroupKey<GROUP>;
|
|
11
|
+
groups?: GROUP[];
|
|
12
|
+
items: ITEM[];
|
|
13
|
+
dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
14
|
+
controlRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
getItemLabel: (item: ITEM) => string;
|
|
17
|
+
getItemKey: (item: ITEM) => string | number;
|
|
18
|
+
searchFunction?: (item: ITEM, searchValue: string) => boolean;
|
|
19
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
20
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
21
|
+
searchValue?: string;
|
|
22
|
+
onChange: OnChangeProp<ITEM>;
|
|
23
|
+
};
|
|
24
|
+
declare type OptionProps<ITEM> = {
|
|
25
|
+
index: number;
|
|
26
|
+
item: ITEM;
|
|
27
|
+
};
|
|
28
|
+
declare type GetOptionPropsResult = {
|
|
29
|
+
onClick: (e: React.SyntheticEvent) => void;
|
|
30
|
+
onMouseEnter: (e: React.SyntheticEvent) => void;
|
|
31
|
+
active: boolean;
|
|
32
|
+
hovered: boolean;
|
|
33
|
+
key: string | number;
|
|
34
|
+
};
|
|
35
|
+
export declare function useAutoComplete<ITEM, GROUP>(params: UseAutoCompleteProps<ITEM, GROUP>): {
|
|
36
|
+
isOpen: boolean;
|
|
37
|
+
visibleItems: {
|
|
38
|
+
items: ITEM[];
|
|
39
|
+
key: string | number;
|
|
40
|
+
group?: GROUP | undefined;
|
|
41
|
+
groupIndex: number;
|
|
42
|
+
}[];
|
|
43
|
+
getOptionProps: ({ index, item, }: OptionProps<ITEM>) => GetOptionPropsResult;
|
|
44
|
+
handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
45
|
+
handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
46
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
47
|
+
getKeyProps: (rest?: import("../../hooks/useKeys").KeyProps | undefined) => import("../../hooks/useKeys").KeyProps;
|
|
48
|
+
hasItems: boolean;
|
|
49
|
+
};
|
|
50
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){throw a}),f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){h=!0,f=a}),f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useClickOutside}from"../../hooks/useClickOutside";import{useFlag}from"../../hooks/useFlag";import{useKeys}from"../../hooks/useKeys";import{getGroups}from"../../utils/getGroups";export function useAutoComplete(a){var b=a.items,c=a.dropdownRef,d=a.controlRef,e=a.disabled,f=void 0!==e&&e,g=a.getItemLabel,h=a.getItemKey,i=a.searchFunction,j=a.getItemGroupKey,k=a.groups,l=a.getGroupKey,m=a.onFocus,n=a.onBlur,o=a.searchValue,p=useRef(null),q=useFlag(),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(0),v=_slicedToArray(u,2),w=v[0],x=v[1],y=function(a,b){return-1!==g(a).toLocaleLowerCase().indexOf(b.toLocaleLowerCase())},z=useMemo(function(){if(o&&""!==o.trim()){var a=b.filter(function(a){return i?i(a,o):y(a,o)});return a}return b},[b,o]),A=useMemo(function(){var a=getGroups(z,null!==k&&void 0!==k&&k.length?j:void 0,k,l,void 0);return a},[z,k,j,l]),B=useMemo(function(){return!!A.find(function(a){return 0<a.items.length})},[A]),C=useCallback(function(a){x(Math.min(Math.max(0,"function"==typeof a?a(w):a),z.length-1))},[z,w]),D=function(b,c){f||a.onChange({value:c,e:b})},E=function(a,b){b.preventDefault(),C(function(a){return a-1})},F=function(a,b){b.preventDefault(),C(function(a){return a+1})},G=useKeys({ArrowUp:E,ArrowDown:F,PageUp:E,PageDown:F,Home:E,End:F,Enter:function Enter(a,b){if(s){(o||z[w])&&b.preventDefault();var c=function(a){var b,c=0,d=_createForOfIteratorHelper(A);try{for(d.s();!(b=d.n()).done;){var e=b.value;if(e.items.length+c>a)return e.items[a-c];c+=e.items.length}}catch(a){d.e(a)}finally{d.f()}},d=c(w);d&&D(b,d)}},Escape:function Escape(){t.off()},Tab:function Tab(){t.off()}});useClickOutside({isActive:s,ignoreClicksInsideRefs:[c,d],handler:function handler(){t.off()}}),useEffect(function(){if(f){var a;t.off(),null===(a=p.current)||void 0===a?void 0:a.blur()}},[f]);return{isOpen:s&&B,visibleItems:A,getOptionProps:function getOptionProps(a){var b=a.index,c=a.item,d=h(c);return{onClick:function onClick(a){D(a,c)},onMouseEnter:function onMouseEnter(){C(b)},active:!1,hovered:b===w,key:d}},handleInputFocus:function handleInputFocus(a){f||(!s&&t.on(),"function"==typeof m&&m(a))},handleInputBlur:function handleInputBlur(a){if(s){var b;return void(null===(b=p.current)||void 0===b?void 0:b.focus())}"function"==typeof n&&n(a)},inputRef:p,getKeyProps:G,hasItems:B}}
|
|
2
|
+
//# sourceMappingURL=useAutoComplete.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAutoComplete.js","names":["useCallback","useEffect","useMemo","useRef","useState","useClickOutside","useFlag","useKeys","getGroups","useAutoComplete","params","items","dropdownRef","controlRef","disabled","getItemLabel","getItemKey","searchFunction","getItemGroupKey","groups","getGroupKey","onFocus","onBlur","searchValue","inputRef","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchFunctionDefault","item","toLocaleLowerCase","indexOf","filteredOptions","trim","fiteredOptions","filter","visibleItems","resultGroups","length","hasItems","find","group","highlightIndex","indexForHighlight","Math","min","max","onChange","e","value","ArrowUp","_","preventDefault","old","ArrowDown","getKeyProps","PageUp","PageDown","Home","End","Enter","getItem","index","couter","Escape","off","Tab","isActive","ignoreClicksInsideRefs","handler","current","blur","getOptionProps","key","onClick","onMouseEnter","active","hovered","handleInputFocus","on","handleInputBlur","focus"],"sources":["../../../../../src/components/AutoCompleteCanary/useAutoComplete.ts"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useFlag } from '##/hooks/useFlag';\nimport { KeyHandler, useKeys } from '##/hooks/useKeys';\nimport { getGroups } from '##/utils/getGroups';\n\ntype IndexForHighlight = number | ((oldIndex: number) => number);\n\ntype GetItemGroupKey<ITEM> = (item: ITEM) => string | number | undefined;\ntype GetGroupKey<GROUP> = (item: GROUP) => string | number | undefined;\n\ntype OnChangeProp<ITEM> = (props: {\n value: ITEM | null;\n e: React.SyntheticEvent;\n}) => void;\n\ntype UseAutoCompleteProps<ITEM, GROUP> = {\n getItemGroupKey?: GetItemGroupKey<ITEM> | undefined;\n getGroupKey?: GetGroupKey<GROUP>;\n groups?: GROUP[];\n items: ITEM[];\n dropdownRef: React.MutableRefObject<HTMLDivElement | null>;\n controlRef: React.MutableRefObject<HTMLDivElement | null>;\n disabled?: boolean;\n getItemLabel: (item: ITEM) => string;\n getItemKey: (item: ITEM) => string | number;\n searchFunction?: (item: ITEM, searchValue: string) => boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n searchValue?: string;\n onChange: OnChangeProp<ITEM>;\n};\n\ntype OptionProps<ITEM> = {\n index: number;\n item: ITEM;\n};\n\ntype GetOptionPropsResult = {\n onClick: (e: React.SyntheticEvent) => void;\n onMouseEnter: (e: React.SyntheticEvent) => void;\n active: boolean;\n hovered: boolean;\n key: string | number;\n};\n\nexport function useAutoComplete<ITEM, GROUP>(\n params: UseAutoCompleteProps<ITEM, GROUP>,\n) {\n const {\n items,\n dropdownRef,\n controlRef,\n disabled = false,\n getItemLabel,\n getItemKey,\n searchFunction,\n getItemGroupKey,\n groups,\n getGroupKey,\n onFocus,\n onBlur,\n searchValue,\n } = params;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOpen, setIsOpen] = useFlag();\n const [highlightedIndex, setHighlightedIndex] = useState<number>(0);\n\n const searchFunctionDefault = (item: ITEM, searchValue: string) =>\n getItemLabel(item)\n .toLocaleLowerCase()\n .indexOf(searchValue.toLocaleLowerCase()) !== -1;\n\n const filteredOptions = useMemo(() => {\n if (searchValue && searchValue.trim() !== '') {\n const fiteredOptions = items.filter((item) =>\n searchFunction\n ? searchFunction(item, searchValue)\n : searchFunctionDefault(item, searchValue),\n );\n\n return fiteredOptions;\n }\n return items;\n }, [items, searchValue]);\n\n const visibleItems = useMemo(() => {\n const resultGroups = getGroups(\n filteredOptions,\n groups?.length ? getItemGroupKey : undefined,\n groups,\n getGroupKey,\n undefined,\n );\n\n return resultGroups;\n }, [filteredOptions, groups, getItemGroupKey, getGroupKey]);\n\n const hasItems = useMemo(() => {\n return !!visibleItems.find((group) => group.items.length > 0);\n }, [visibleItems]);\n\n const highlightIndex = useCallback(\n (indexForHighlight: IndexForHighlight) => {\n setHighlightedIndex(\n Math.min(\n Math.max(\n 0,\n typeof indexForHighlight === 'function'\n ? indexForHighlight(highlightedIndex)\n : indexForHighlight,\n ),\n filteredOptions.length - 1,\n ),\n );\n },\n [filteredOptions, highlightedIndex],\n );\n\n const onChange = (e: React.SyntheticEvent, item: ITEM) => {\n if (!disabled) {\n params.onChange({ value: item, e });\n }\n };\n\n // Prop Getters\n\n const ArrowUp: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old - 1);\n };\n\n const ArrowDown: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old + 1);\n };\n\n const Enter: KeyHandler = (_, e): void => {\n if (isOpen) {\n if (searchValue || filteredOptions[highlightedIndex]) {\n e.preventDefault();\n }\n\n const getItem = (index: number) => {\n let couter = 0;\n for (const group of visibleItems) {\n if (group.items.length + couter > index) {\n return group.items[index - couter];\n }\n couter += group.items.length;\n }\n return undefined;\n };\n\n const item = getItem(highlightedIndex);\n\n if (item) {\n onChange(e, item);\n }\n }\n };\n\n const Escape = (): void => {\n setIsOpen.off();\n };\n\n const Tab = (): void => {\n setIsOpen.off();\n };\n\n const getKeyProps = useKeys({\n ArrowUp,\n ArrowDown,\n PageUp: ArrowUp,\n PageDown: ArrowDown,\n Home: ArrowUp,\n End: ArrowDown,\n Enter,\n Escape,\n Tab,\n });\n\n const getOptionProps = ({\n index,\n item,\n }: OptionProps<ITEM>): GetOptionPropsResult => {\n const key = getItemKey(item);\n return {\n onClick: (e: React.SyntheticEvent) => {\n onChange(e, item);\n },\n onMouseEnter: () => {\n highlightIndex(index);\n },\n active: false,\n hovered: index === highlightedIndex,\n key,\n };\n };\n\n useClickOutside({\n isActive: isOpen,\n ignoreClicksInsideRefs: [dropdownRef, controlRef],\n handler: () => {\n setIsOpen.off();\n },\n });\n\n useEffect(() => {\n if (disabled) {\n setIsOpen.off();\n inputRef.current?.blur();\n }\n }, [disabled]);\n\n const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (!disabled) {\n if (!isOpen) {\n setIsOpen.on();\n }\n if (typeof onFocus === 'function') {\n onFocus(e);\n }\n }\n };\n\n const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (isOpen) {\n inputRef.current?.focus();\n return;\n }\n\n if (typeof onBlur === 'function') {\n onBlur(e);\n }\n };\n\n return {\n isOpen: isOpen && hasItems,\n visibleItems,\n getOptionProps,\n handleInputFocus,\n handleInputBlur,\n inputRef,\n getKeyProps,\n hasItems,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","required","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValue","onCreate","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","onInputChange","searchFunction","isLoading","multiple","style","dropdownForm"];import"../SelectComponents/Select.css";import React,{forwardRef,useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useSelect}from"../../hooks/useSelect/useSelect";import{IconClose}from"../../icons/IconClose/IconClose";import{IconSelect}from"../../icons/IconSelect/IconSelect";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnSelect}from"../SelectComponents/cnSelect";import{defaultlabelForCreate,defaultLabelForEmptyItems,defaultlabelForNotFound,getInputWidth}from"../SelectComponents/helpers";import{SelectContainer}from"../SelectComponents/SelectContainer/SelectContainer";import{SelectDropdown}from"../SelectComponents/SelectDropdown/SelectDropdown";import{SelectItem}from"../SelectComponents/SelectItem/SelectItem";import{SelectValueTag}from"../SelectComponents/SelectValueTag/SelectValueTag";import{defaultPropForm,defaultPropSize,defaultPropView}from"../SelectComponents/types";import{isMultipleParams,isNotMultipleParams,withDefaultGetters}from"./helpers";export var COMPONENT_NAME="Combobox";var ComboboxRender=function(a,b){var c=useRef(null),d=useRef(null),e=useRef(null),f=useRef(null),g=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),f),h=g.placeholder,i=g.onBlur,j=g.onFocus,k=g.items,l=g.onChange,m=g.value,n=g.disabled,o=g.ariaLabel,p=g.id,q=g.required,r=g.dropdownRef,s=void 0===r?c:r,t=g.form,u=void 0===t?defaultPropForm:t,v=g.view,w=void 0===v?defaultPropView:v,x=g.size,y=void 0===x?defaultPropSize:x,z=g.dropdownClassName,A=g.name,B=g.groups,C=void 0===B?[]:B,D=g.getItemLabel,E=g.getItemKey,F=g.getItemGroupKey,G=g.getItemDisabled,H=g.getGroupKey,I=g.getGroupLabel,J=g.renderItem,K=g.renderValue,L=g.onCreate,M=g.inputRef,N=g.labelForNotFound,O=void 0===N?defaultlabelForNotFound:N,P=g.labelForCreate,Q=void 0===P?defaultlabelForCreate:P,R=g.labelForEmptyItems,S=void 0===R?defaultLabelForEmptyItems:R,T=g.onInputChange,U=g.searchFunction,V=g.isLoading,W=g.multiple,X=void 0!==W&&W,Y=g.style,Z=g.dropdownForm,$=void 0===Z?"default":Z,_=_objectWithoutProperties(g,_excluded),aa=useSelect({items:k,groups:C,value:m,onChange:l,dropdownRef:s,controlRef:f,disabled:n,getItemLabel:D,getItemKey:E,getGroupKey:H,getItemGroupKey:F,getItemDisabled:G,multiple:X,onBlur:i,onFocus:j,onCreate:L,searchFunction:U}),ba=aa.getKeyProps,ca=aa.getOptionProps,da=aa.isOpen,ea=aa.visibleItems,fa=aa.isFocused,ga=aa.handleInputFocus,ha=aa.handleInputBlur,ia=aa.handleToggleDropdown,ja=aa.inputRef,ka=aa.handleInputClick,la=aa.handleInputChange,ma=aa.searchValue,na=aa.clearValue,oa=aa.getHandleRemoveValue,pa=aa.notFound,qa=aa.hasItems,ra=K||(X?function renderValueDefaultMultiple(a){var b=a.item,c=a.handleRemove;return React.createElement(SelectValueTag,{label:D(b),key:E(b),size:y,handleRemove:n?void 0:c})}:function renderValueDefaultNotMultiple(a){var b=D(a.item);return React.createElement("span",{className:cnSelect("ControlValue"),title:b},b)}),sa=useForkRef([ja,M]),ta=function(a){la(a);var b=a.target.value;n||(null===T||void 0===T?void 0:T({e:a,id:p,name:A,value:b||null}))},ua=function(){var b=X?getInputWidth(d,e):void 0;return React.createElement(React.Fragment,null,isMultipleParams(a)&&Array.isArray(a.value)&&a.value.map(function(a){return ra({item:a,handleRemove:oa(a)})}),isNotMultipleParams(a)&&a.value&&ra({item:a.value}),(!m||Array.isArray(m)&&0===m.length)&&!ma&&h&&React.createElement("span",{className:cnSelect("Placeholder"),title:"placeholder"},h),React.createElement("input",Object.assign({},ba(),{type:"text",name:A,onFocus:ga,onBlur:ha,"aria-label":o,onChange:ta,ref:sa,className:cnSelect("Input",{size:y,hide:!X&&!!m,multiple:X}),value:ma,style:{width:b}})))};return React.createElement(SelectContainer,Object.assign({focused:fa,disabled:n,size:y,view:w,required:q,form:u,multiple:X,ref:b,type:"combobox",style:Y},_),React.createElement("div",{className:cnSelect("Control",{hasInput:!0}),ref:f,"aria-expanded":da,"aria-haspopup":"listbox",id:p},React.createElement("div",{className:cnSelect("ControlInner"),onClick:ka,role:"button",ref:d,"aria-hidden":"true"},React.createElement("div",{className:cnSelect("ControlValueContainer")},X?React.createElement("div",{className:cnSelect("ControlValue")},ua()):ua())),React.createElement("span",{className:cnSelect("Indicators")},m&&React.createElement("button",{type:"button",onClick:na,className:cnSelect("ClearIndicator",[cnMixFocus()])},React.createElement(IconClose,{size:"xs",className:cnSelect("ClearIndicatorIcon")})),React.createElement("span",{className:cnSelect("Delimiter")}),React.createElement("button",{type:"button",className:cnSelect("IndicatorsDropdown"),tabIndex:-1,onClick:ia},React.createElement(IconSelect,{size:"xs",className:cnSelect("DropdownIndicatorIcon")})))),React.createElement(SelectDropdown,{isOpen:da,size:y,controlRef:f,getOptionProps:ca,dropdownRef:s,form:$,className:z,renderItem:J||function renderItemDefault(a){var b=a.item,c=a.active,d=a.hovered,e=a.onClick,f=a.onMouseEnter;return React.createElement(SelectItem,{label:D(b),active:c,hovered:d,multiple:X,size:y,indent:"round"===$?"increased":"normal",onClick:e,onMouseEnter:f,disabled:G(b)})},getGroupLabel:I,visibleItems:ea,labelForNotFound:O,labelForCreate:Q,isLoading:V,labelForEmptyItems:S,notFound:pa,hasItems:qa,style:"number"==typeof(null===Y||void 0===Y?void 0:Y.zIndex)?{zIndex:Y.zIndex+1}:void 0})
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","required","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValue","onCreate","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","onInputChange","searchFunction","isLoading","multiple","style","dropdownForm"];import"../SelectComponents/Select.css";import React,{forwardRef,useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useSelect}from"../../hooks/useSelect/useSelect";import{IconClose}from"../../icons/IconClose/IconClose";import{IconSelect}from"../../icons/IconSelect/IconSelect";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnSelect}from"../SelectComponents/cnSelect";import{defaultlabelForCreate,defaultLabelForEmptyItems,defaultlabelForNotFound,getInputWidth}from"../SelectComponents/helpers";import{SelectContainer}from"../SelectComponents/SelectContainer/SelectContainer";import{SelectDropdown}from"../SelectComponents/SelectDropdown/SelectDropdown";import{SelectItem}from"../SelectComponents/SelectItem/SelectItem";import{SelectValueTag}from"../SelectComponents/SelectValueTag/SelectValueTag";import{defaultPropForm,defaultPropSize,defaultPropView}from"../SelectComponents/types";import{isMultipleParams,isNotMultipleParams,withDefaultGetters}from"./helpers";export var COMPONENT_NAME="Combobox";var ComboboxRender=function(a,b){var c=useRef(null),d=useRef(null),e=useRef(null),f=useRef(null),g=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),f),h=g.placeholder,i=g.onBlur,j=g.onFocus,k=g.items,l=g.onChange,m=g.value,n=g.disabled,o=g.ariaLabel,p=g.id,q=g.required,r=g.dropdownRef,s=void 0===r?c:r,t=g.form,u=void 0===t?defaultPropForm:t,v=g.view,w=void 0===v?defaultPropView:v,x=g.size,y=void 0===x?defaultPropSize:x,z=g.dropdownClassName,A=g.name,B=g.groups,C=void 0===B?[]:B,D=g.getItemLabel,E=g.getItemKey,F=g.getItemGroupKey,G=g.getItemDisabled,H=g.getGroupKey,I=g.getGroupLabel,J=g.renderItem,K=g.renderValue,L=g.onCreate,M=g.inputRef,N=g.labelForNotFound,O=void 0===N?defaultlabelForNotFound:N,P=g.labelForCreate,Q=void 0===P?defaultlabelForCreate:P,R=g.labelForEmptyItems,S=void 0===R?defaultLabelForEmptyItems:R,T=g.onInputChange,U=g.searchFunction,V=g.isLoading,W=g.multiple,X=void 0!==W&&W,Y=g.style,Z=g.dropdownForm,$=void 0===Z?"default":Z,_=_objectWithoutProperties(g,_excluded),aa=useSelect({items:k,groups:C,value:m,onChange:l,dropdownRef:s,controlRef:f,disabled:n,getItemLabel:D,getItemKey:E,getGroupKey:H,getItemGroupKey:F,getItemDisabled:G,multiple:X,onBlur:i,onFocus:j,onCreate:L,searchFunction:U}),ba=aa.getKeyProps,ca=aa.getOptionProps,da=aa.isOpen,ea=aa.visibleItems,fa=aa.isFocused,ga=aa.handleInputFocus,ha=aa.handleInputBlur,ia=aa.handleToggleDropdown,ja=aa.inputRef,ka=aa.handleInputClick,la=aa.handleInputChange,ma=aa.searchValue,na=aa.clearValue,oa=aa.getHandleRemoveValue,pa=aa.notFound,qa=aa.hasItems,ra=K||(X?function renderValueDefaultMultiple(a){var b=a.item,c=a.handleRemove;return React.createElement(SelectValueTag,{label:D(b),key:E(b),size:y,handleRemove:n?void 0:c})}:function renderValueDefaultNotMultiple(a){var b=D(a.item);return React.createElement("span",{className:cnSelect("ControlValue"),title:b},b)}),sa=useForkRef([ja,M]),ta=function(a){la(a);var b=a.target.value;n||(null===T||void 0===T?void 0:T({e:a,id:p,name:A,value:b||null}))},ua=function(){var b=X?getInputWidth(d,e):void 0;return React.createElement(React.Fragment,null,isMultipleParams(a)&&Array.isArray(a.value)&&a.value.map(function(a){return ra({item:a,handleRemove:oa(a)})}),isNotMultipleParams(a)&&a.value&&ra({item:a.value}),(!m||Array.isArray(m)&&0===m.length)&&!ma&&h&&React.createElement("span",{className:cnSelect("Placeholder"),title:"placeholder"},h),React.createElement("input",Object.assign({},ba(),{type:"text",name:A,onFocus:ga,onBlur:ha,"aria-label":o,onChange:ta,ref:sa,className:cnSelect("Input",{size:y,hide:!X&&!!m,multiple:X}),value:ma,style:{width:b}})))};return React.createElement(React.Fragment,null,React.createElement(SelectContainer,Object.assign({focused:fa,disabled:n,size:y,view:w,required:q,form:u,multiple:X,ref:b,type:"combobox",style:Y},_),React.createElement("div",{className:cnSelect("Control",{hasInput:!0}),ref:f,"aria-expanded":da,"aria-haspopup":"listbox",id:p},React.createElement("div",{className:cnSelect("ControlInner"),onClick:ka,role:"button",ref:d,"aria-hidden":"true"},React.createElement("div",{className:cnSelect("ControlValueContainer")},X?React.createElement("div",{className:cnSelect("ControlValue")},ua()):ua())),React.createElement("span",{className:cnSelect("Indicators")},m&&React.createElement("button",{type:"button",onClick:na,className:cnSelect("ClearIndicator",[cnMixFocus()])},React.createElement(IconClose,{size:"xs",className:cnSelect("ClearIndicatorIcon")})),React.createElement("span",{className:cnSelect("Delimiter")}),React.createElement("button",{type:"button",className:cnSelect("IndicatorsDropdown"),tabIndex:-1,onClick:ia},React.createElement(IconSelect,{size:"xs",className:cnSelect("DropdownIndicatorIcon")})))),React.createElement("div",{className:cnSelect("HelperInputFakeElement"),ref:e},ma)),React.createElement(SelectDropdown,{isOpen:da,size:y,controlRef:f,getOptionProps:ca,dropdownRef:s,form:$,className:z,renderItem:J||function renderItemDefault(a){var b=a.item,c=a.active,d=a.hovered,e=a.onClick,f=a.onMouseEnter;return React.createElement(SelectItem,{label:D(b),active:c,hovered:d,multiple:X,size:y,indent:"round"===$?"increased":"normal",onClick:e,onMouseEnter:f,disabled:G(b)})},getGroupLabel:I,visibleItems:ea,labelForNotFound:O,labelForCreate:Q,isLoading:V,labelForEmptyItems:S,notFound:pa,hasItems:qa,style:"number"==typeof(null===Y||void 0===Y?void 0:Y.zIndex)?{zIndex:Y.zIndex+1}:void 0}))};export var Combobox=forwardRef(ComboboxRender);export*from"./helpers";
|
|
2
2
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","names":["React","forwardRef","useRef","useForkRef","useSelect","IconClose","IconSelect","cnMixFocus","usePropsHandler","cnSelect","defaultlabelForCreate","defaultLabelForEmptyItems","defaultlabelForNotFound","getInputWidth","SelectContainer","SelectDropdown","SelectItem","SelectValueTag","defaultPropForm","defaultPropSize","defaultPropView","isMultipleParams","isNotMultipleParams","withDefaultGetters","COMPONENT_NAME","ComboboxRender","props","ref","defaultDropdownRef","controlInnerRef","helperInputFakeElement","controlRef","placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","required","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValueProp","renderValue","onCreate","inputRefProp","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","onInputChange","searchFunction","isLoading","multiple","style","dropdownForm","otherProps","getKeyProps","getOptionProps","isOpen","visibleItems","isFocused","handleInputFocus","handleInputBlur","handleToggleDropdown","handleInputClick","handleInputChange","searchValue","clearValue","getHandleRemoveValue","notFound","hasItems","renderValueDefaultMultiple","item","handleRemove","renderValueDefaultNotMultiple","valueLable","inputRefForRender","handleChangeValue","e","target","renderControlValue","width","Array","isArray","map","length","hide","hasInput","renderItemDefault","active","hovered","onClick","onMouseEnter","zIndex","Combobox"],"sources":["../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import '../SelectComponents/Select.css';\n\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useSelect } from '../../hooks/useSelect/useSelect';\nimport { IconClose } from '../../icons/IconClose/IconClose';\nimport { IconSelect } from '../../icons/IconSelect/IconSelect';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { cnSelect } from '../SelectComponents/cnSelect';\nimport {\n defaultlabelForCreate,\n defaultLabelForEmptyItems,\n defaultlabelForNotFound,\n getInputWidth,\n} from '../SelectComponents/helpers';\nimport { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';\nimport { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';\nimport { SelectItem } from '../SelectComponents/SelectItem/SelectItem';\nimport { SelectValueTag } from '../SelectComponents/SelectValueTag/SelectValueTag';\nimport {\n defaultPropForm,\n defaultPropSize,\n defaultPropView,\n} from '../SelectComponents/types';\nimport {\n ComboboxComponent,\n ComboboxProps,\n DefaultGroup,\n DefaultItem,\n isMultipleParams,\n isNotMultipleParams,\n PropRenderItem,\n PropRenderValue,\n withDefaultGetters,\n} from './helpers';\n\nexport const COMPONENT_NAME = 'Combobox' as const;\n\nconst ComboboxRender = <\n ITEM = DefaultItem,\n GROUP = DefaultGroup,\n MULTIPLE extends boolean = false,\n>(\n props: ComboboxProps<ITEM, GROUP, MULTIPLE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const defaultDropdownRef = useRef<HTMLDivElement | null>(null);\n const controlInnerRef = useRef<HTMLDivElement>(null);\n const helperInputFakeElement = useRef<HTMLDivElement>(null);\n const controlRef = useRef<HTMLDivElement | null>(null);\n\n const {\n placeholder,\n onBlur,\n onFocus,\n items,\n onChange,\n value,\n disabled,\n ariaLabel,\n id,\n required,\n dropdownRef = defaultDropdownRef,\n form = defaultPropForm,\n view = defaultPropView,\n size = defaultPropSize,\n dropdownClassName,\n name,\n groups = [],\n getItemLabel,\n getItemKey,\n getItemGroupKey,\n getItemDisabled,\n getGroupKey,\n getGroupLabel,\n renderItem,\n renderValue: renderValueProp,\n onCreate,\n inputRef: inputRefProp,\n labelForNotFound = defaultlabelForNotFound,\n labelForCreate = defaultlabelForCreate,\n labelForEmptyItems = defaultLabelForEmptyItems,\n onInputChange,\n searchFunction,\n isLoading,\n multiple = false,\n style,\n dropdownForm = 'default',\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef);\n\n const {\n getKeyProps,\n getOptionProps,\n isOpen,\n visibleItems,\n isFocused,\n handleInputFocus,\n handleInputBlur,\n handleToggleDropdown,\n inputRef,\n handleInputClick,\n handleInputChange,\n searchValue,\n clearValue,\n getHandleRemoveValue,\n notFound,\n hasItems,\n } = useSelect({\n items,\n groups,\n value,\n onChange,\n dropdownRef,\n controlRef,\n disabled,\n getItemLabel,\n getItemKey,\n getGroupKey,\n getItemGroupKey,\n getItemDisabled,\n multiple,\n onBlur,\n onFocus,\n onCreate,\n searchFunction,\n });\n\n const renderItemDefault: PropRenderItem<ITEM> = (props) => {\n const { item, active, hovered, onClick, onMouseEnter } = props;\n\n return (\n <SelectItem\n label={getItemLabel(item)}\n active={active}\n hovered={hovered}\n multiple={multiple}\n size={size}\n indent={dropdownForm === 'round' ? 'increased' : 'normal'}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n disabled={getItemDisabled(item)}\n />\n );\n };\n\n const renderValueDefaultMultiple: PropRenderValue<ITEM> = ({\n item,\n handleRemove,\n }) => {\n return (\n <SelectValueTag\n label={getItemLabel(item)}\n key={getItemKey(item)}\n size={size}\n handleRemove={disabled ? undefined : handleRemove}\n />\n );\n };\n\n const renderValueDefaultNotMultiple: PropRenderValue<ITEM> = (props) => {\n const valueLable = getItemLabel(props.item);\n\n return (\n <span className={cnSelect('ControlValue')} title={valueLable}>\n {valueLable}\n </span>\n );\n };\n\n const renderValue =\n renderValueProp ||\n (multiple ? renderValueDefaultMultiple : renderValueDefaultNotMultiple);\n\n const inputRefForRender = useForkRef([inputRef, inputRefProp]);\n\n const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n handleInputChange(e);\n const { value } = e.target;\n !disabled && onInputChange?.({ e, id, name, value: value || null });\n };\n\n const renderControlValue = () => {\n const width = multiple\n ? getInputWidth(controlInnerRef, helperInputFakeElement)\n : undefined;\n return (\n <>\n {isMultipleParams(props) &&\n Array.isArray(props.value) &&\n props.value.map((item) =>\n renderValue({ item, handleRemove: getHandleRemoveValue(item) }),\n )}\n {isNotMultipleParams(props) &&\n props.value &&\n renderValue({ item: props.value })}\n {(!value || (Array.isArray(value) && value.length === 0)) &&\n !searchValue &&\n placeholder && (\n <span className={cnSelect('Placeholder')} title=\"placeholder\">\n {placeholder}\n </span>\n )}\n <input\n {...getKeyProps()}\n type=\"text\"\n name={name}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n aria-label={ariaLabel}\n onChange={handleChangeValue}\n ref={inputRefForRender}\n className={cnSelect('Input', {\n size,\n hide: !multiple && !!value,\n multiple,\n })}\n value={searchValue}\n style={{ width }}\n />\n </>\n );\n };\n\n return (\n <SelectContainer\n focused={isFocused}\n disabled={disabled}\n size={size}\n view={view}\n required={required}\n form={form}\n multiple={multiple}\n ref={ref}\n type=\"combobox\"\n style={style}\n {...otherProps}\n >\n <div\n className={cnSelect('Control', { hasInput: true })}\n ref={controlRef}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n id={id}\n >\n <div\n className={cnSelect('ControlInner')}\n onClick={handleInputClick}\n role=\"button\"\n ref={controlInnerRef}\n aria-hidden=\"true\"\n >\n <div className={cnSelect('ControlValueContainer')}>\n {multiple ? (\n <div className={cnSelect('ControlValue')}>\n {renderControlValue()}\n </div>\n ) : (\n renderControlValue()\n )}\n </div>\n </div>\n <span className={cnSelect('Indicators')}>\n {value && (\n <button\n type=\"button\"\n onClick={clearValue}\n className={cnSelect('ClearIndicator', [cnMixFocus()])}\n >\n <IconClose size=\"xs\" className={cnSelect('ClearIndicatorIcon')} />\n </button>\n )}\n <span className={cnSelect('Delimiter')} />\n <button\n type=\"button\"\n className={cnSelect('IndicatorsDropdown')}\n tabIndex={-1}\n onClick={handleToggleDropdown}\n >\n <IconSelect\n size=\"xs\"\n className={cnSelect('DropdownIndicatorIcon')}\n />\n </button>\n </span>\n </div>\n <SelectDropdown\n isOpen={isOpen}\n size={size}\n controlRef={controlRef}\n getOptionProps={getOptionProps}\n dropdownRef={dropdownRef}\n form={dropdownForm}\n className={dropdownClassName}\n renderItem={renderItem || renderItemDefault}\n getGroupLabel={getGroupLabel}\n visibleItems={visibleItems}\n labelForNotFound={labelForNotFound}\n labelForCreate={labelForCreate}\n isLoading={isLoading}\n labelForEmptyItems={labelForEmptyItems}\n notFound={notFound}\n hasItems={hasItems}\n style={\n typeof style?.zIndex === 'number'\n ? { zIndex: style.zIndex + 1 }\n : undefined\n }\n />\n <div\n className={cnSelect('HelperInputFakeElement')}\n ref={helperInputFakeElement}\n >\n {searchValue}\n </div>\n </SelectContainer>\n );\n};\n\nexport const Combobox = forwardRef(ComboboxRender) as ComboboxComponent;\n\nexport * from './helpers';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","names":["React","forwardRef","useRef","useForkRef","useSelect","IconClose","IconSelect","cnMixFocus","usePropsHandler","cnSelect","defaultlabelForCreate","defaultLabelForEmptyItems","defaultlabelForNotFound","getInputWidth","SelectContainer","SelectDropdown","SelectItem","SelectValueTag","defaultPropForm","defaultPropSize","defaultPropView","isMultipleParams","isNotMultipleParams","withDefaultGetters","COMPONENT_NAME","ComboboxRender","props","ref","defaultDropdownRef","controlInnerRef","helperInputFakeElement","controlRef","placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","required","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValueProp","renderValue","onCreate","inputRefProp","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","onInputChange","searchFunction","isLoading","multiple","style","dropdownForm","otherProps","getKeyProps","getOptionProps","isOpen","visibleItems","isFocused","handleInputFocus","handleInputBlur","handleToggleDropdown","handleInputClick","handleInputChange","searchValue","clearValue","getHandleRemoveValue","notFound","hasItems","renderValueDefaultMultiple","item","handleRemove","renderValueDefaultNotMultiple","valueLable","inputRefForRender","handleChangeValue","e","target","renderControlValue","width","Array","isArray","map","length","hide","hasInput","renderItemDefault","active","hovered","onClick","onMouseEnter","zIndex","Combobox"],"sources":["../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import '../SelectComponents/Select.css';\n\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useSelect } from '../../hooks/useSelect/useSelect';\nimport { IconClose } from '../../icons/IconClose/IconClose';\nimport { IconSelect } from '../../icons/IconSelect/IconSelect';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { cnSelect } from '../SelectComponents/cnSelect';\nimport {\n defaultlabelForCreate,\n defaultLabelForEmptyItems,\n defaultlabelForNotFound,\n getInputWidth,\n} from '../SelectComponents/helpers';\nimport { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';\nimport { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';\nimport { SelectItem } from '../SelectComponents/SelectItem/SelectItem';\nimport { SelectValueTag } from '../SelectComponents/SelectValueTag/SelectValueTag';\nimport {\n defaultPropForm,\n defaultPropSize,\n defaultPropView,\n} from '../SelectComponents/types';\nimport {\n ComboboxComponent,\n ComboboxProps,\n DefaultGroup,\n DefaultItem,\n isMultipleParams,\n isNotMultipleParams,\n PropRenderItem,\n PropRenderValue,\n withDefaultGetters,\n} from './helpers';\n\nexport const COMPONENT_NAME = 'Combobox' as const;\n\nconst ComboboxRender = <\n ITEM = DefaultItem,\n GROUP = DefaultGroup,\n MULTIPLE extends boolean = false,\n>(\n props: ComboboxProps<ITEM, GROUP, MULTIPLE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const defaultDropdownRef = useRef<HTMLDivElement | null>(null);\n const controlInnerRef = useRef<HTMLDivElement>(null);\n const helperInputFakeElement = useRef<HTMLDivElement>(null);\n const controlRef = useRef<HTMLDivElement | null>(null);\n\n const {\n placeholder,\n onBlur,\n onFocus,\n items,\n onChange,\n value,\n disabled,\n ariaLabel,\n id,\n required,\n dropdownRef = defaultDropdownRef,\n form = defaultPropForm,\n view = defaultPropView,\n size = defaultPropSize,\n dropdownClassName,\n name,\n groups = [],\n getItemLabel,\n getItemKey,\n getItemGroupKey,\n getItemDisabled,\n getGroupKey,\n getGroupLabel,\n renderItem,\n renderValue: renderValueProp,\n onCreate,\n inputRef: inputRefProp,\n labelForNotFound = defaultlabelForNotFound,\n labelForCreate = defaultlabelForCreate,\n labelForEmptyItems = defaultLabelForEmptyItems,\n onInputChange,\n searchFunction,\n isLoading,\n multiple = false,\n style,\n dropdownForm = 'default',\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef);\n\n const {\n getKeyProps,\n getOptionProps,\n isOpen,\n visibleItems,\n isFocused,\n handleInputFocus,\n handleInputBlur,\n handleToggleDropdown,\n inputRef,\n handleInputClick,\n handleInputChange,\n searchValue,\n clearValue,\n getHandleRemoveValue,\n notFound,\n hasItems,\n } = useSelect({\n items,\n groups,\n value,\n onChange,\n dropdownRef,\n controlRef,\n disabled,\n getItemLabel,\n getItemKey,\n getGroupKey,\n getItemGroupKey,\n getItemDisabled,\n multiple,\n onBlur,\n onFocus,\n onCreate,\n searchFunction,\n });\n\n const renderItemDefault: PropRenderItem<ITEM> = (props) => {\n const { item, active, hovered, onClick, onMouseEnter } = props;\n\n return (\n <SelectItem\n label={getItemLabel(item)}\n active={active}\n hovered={hovered}\n multiple={multiple}\n size={size}\n indent={dropdownForm === 'round' ? 'increased' : 'normal'}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n disabled={getItemDisabled(item)}\n />\n );\n };\n\n const renderValueDefaultMultiple: PropRenderValue<ITEM> = ({\n item,\n handleRemove,\n }) => {\n return (\n <SelectValueTag\n label={getItemLabel(item)}\n key={getItemKey(item)}\n size={size}\n handleRemove={disabled ? undefined : handleRemove}\n />\n );\n };\n\n const renderValueDefaultNotMultiple: PropRenderValue<ITEM> = (props) => {\n const valueLable = getItemLabel(props.item);\n\n return (\n <span className={cnSelect('ControlValue')} title={valueLable}>\n {valueLable}\n </span>\n );\n };\n\n const renderValue =\n renderValueProp ||\n (multiple ? renderValueDefaultMultiple : renderValueDefaultNotMultiple);\n\n const inputRefForRender = useForkRef([inputRef, inputRefProp]);\n\n const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n handleInputChange(e);\n const { value } = e.target;\n !disabled && onInputChange?.({ e, id, name, value: value || null });\n };\n\n const renderControlValue = () => {\n const width = multiple\n ? getInputWidth(controlInnerRef, helperInputFakeElement)\n : undefined;\n return (\n <>\n {isMultipleParams(props) &&\n Array.isArray(props.value) &&\n props.value.map((item) =>\n renderValue({ item, handleRemove: getHandleRemoveValue(item) }),\n )}\n {isNotMultipleParams(props) &&\n props.value &&\n renderValue({ item: props.value })}\n {(!value || (Array.isArray(value) && value.length === 0)) &&\n !searchValue &&\n placeholder && (\n <span className={cnSelect('Placeholder')} title=\"placeholder\">\n {placeholder}\n </span>\n )}\n <input\n {...getKeyProps()}\n type=\"text\"\n name={name}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n aria-label={ariaLabel}\n onChange={handleChangeValue}\n ref={inputRefForRender}\n className={cnSelect('Input', {\n size,\n hide: !multiple && !!value,\n multiple,\n })}\n value={searchValue}\n style={{ width }}\n />\n </>\n );\n };\n\n return (\n <>\n <SelectContainer\n focused={isFocused}\n disabled={disabled}\n size={size}\n view={view}\n required={required}\n form={form}\n multiple={multiple}\n ref={ref}\n type=\"combobox\"\n style={style}\n {...otherProps}\n >\n <div\n className={cnSelect('Control', { hasInput: true })}\n ref={controlRef}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n id={id}\n >\n <div\n className={cnSelect('ControlInner')}\n onClick={handleInputClick}\n role=\"button\"\n ref={controlInnerRef}\n aria-hidden=\"true\"\n >\n <div className={cnSelect('ControlValueContainer')}>\n {multiple ? (\n <div className={cnSelect('ControlValue')}>\n {renderControlValue()}\n </div>\n ) : (\n renderControlValue()\n )}\n </div>\n </div>\n <span className={cnSelect('Indicators')}>\n {value && (\n <button\n type=\"button\"\n onClick={clearValue}\n className={cnSelect('ClearIndicator', [cnMixFocus()])}\n >\n <IconClose\n size=\"xs\"\n className={cnSelect('ClearIndicatorIcon')}\n />\n </button>\n )}\n <span className={cnSelect('Delimiter')} />\n <button\n type=\"button\"\n className={cnSelect('IndicatorsDropdown')}\n tabIndex={-1}\n onClick={handleToggleDropdown}\n >\n <IconSelect\n size=\"xs\"\n className={cnSelect('DropdownIndicatorIcon')}\n />\n </button>\n </span>\n </div>\n <div\n className={cnSelect('HelperInputFakeElement')}\n ref={helperInputFakeElement}\n >\n {searchValue}\n </div>\n </SelectContainer>\n <SelectDropdown\n isOpen={isOpen}\n size={size}\n controlRef={controlRef}\n getOptionProps={getOptionProps}\n dropdownRef={dropdownRef}\n form={dropdownForm}\n className={dropdownClassName}\n renderItem={renderItem || renderItemDefault}\n getGroupLabel={getGroupLabel}\n visibleItems={visibleItems}\n labelForNotFound={labelForNotFound}\n labelForCreate={labelForCreate}\n isLoading={isLoading}\n labelForEmptyItems={labelForEmptyItems}\n notFound={notFound}\n hasItems={hasItems}\n style={\n typeof style?.zIndex === 'number'\n ? { zIndex: style.zIndex + 1 }\n : undefined\n }\n />\n </>\n );\n};\n\nexport const Combobox = forwardRef(ComboboxRender) as ComboboxComponent;\n\nexport * from './helpers';\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","anchorRef","position","direction","possibleDirections","offset","onClickOutside","getItemKey","getItemLabel","getItemSubMenu","style","spareDirection","subMenuDirection"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useState}from"react";import{useClickOutside}from"../../../hooks/useClickOutside/useClickOutside";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{useRefs}from"../../../hooks/useRefs/useRefs";import{directions}from"../../Popover/Popover";import{clearTimers,ContextMenuLevel}from"../ContextMenuLevel/ContextMenuLevel";import{getLevels,withDefaultGetters}from"../helpers";import{contextMenuPropDefaultSubMenuDirection,contextMenuPropSubMenuDirections}from"../types";var ContextMenuLevelsRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=c.anchorRef,f=c.position,g=c.direction,h=c.possibleDirections,i=void 0===h?directions:h,j=c.offset,k=c.onClickOutside,l=c.getItemKey,m=c.getItemLabel,n=c.getItemSubMenu,o=c.style,p=c.spareDirection,q=c.subMenuDirection,r=void 0===q?contextMenuPropDefaultSubMenuDirection:q,s=_objectWithoutProperties(c,_excluded),t=
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","anchorRef","position","direction","possibleDirections","offset","onClickOutside","getItemKey","getItemLabel","getItemSubMenu","style","spareDirection","subMenuDirection"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useState}from"react";import{useClickOutside}from"../../../hooks/useClickOutside/useClickOutside";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{useRefs}from"../../../hooks/useRefs/useRefs";import{directions}from"../../Popover/Popover";import{clearTimers,ContextMenuLevel}from"../ContextMenuLevel/ContextMenuLevel";import{getLevels,withDefaultGetters}from"../helpers";import{contextMenuPropDefaultSubMenuDirection,contextMenuPropSubMenuDirections}from"../types";var ContextMenuLevelsRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=c.anchorRef,f=c.position,g=c.direction,h=c.possibleDirections,i=void 0===h?directions:h,j=c.offset,k=c.onClickOutside,l=c.getItemKey,m=c.getItemLabel,n=c.getItemSubMenu,o=c.style,p=c.spareDirection,q=c.subMenuDirection,r=void 0===q?contextMenuPropDefaultSubMenuDirection:q,s=_objectWithoutProperties(c,_excluded),t=[{items:d,anchorRef:e,position:f,direction:g,possibleDirections:i,offset:j}],u=useState(t),v=_slicedToArray(u,2),w=v[0],x=v[1],y=useState(r),z=_slicedToArray(y,2),A=z[0],B=z[1],C=useState(-1),D=_slicedToArray(C,2),E=D[0],F=D[1],G=useRefs(w.length),H=function(a){var b=a.level,c=a.items,d=a.anchorRef,e=a.activeItem,f=_toConsumableArray(w),g=f[b]&&1<f.length-b?f[b].direction:void 0;f[b]&&1<f.length-b&&g&&B(g),f[b-1].activeItem=e,f.splice(b),f.push({items:c,anchorRef:d,direction:g||A,possibleDirections:contextMenuPropSubMenuDirections,position:void 0}),x(f)},I=function(a){var b=_toConsumableArray(w);b.splice(a),b[a-1]=_objectSpread(_objectSpread({},b[a-1]),{},{activeItem:void 0}),x(b)};useClickOutside({isActive:!!k,ignoreClicksInsideRefs:[].concat(_toConsumableArray(G),[e||{current:null}]),handler:function handler(a){return null===k||void 0===k?void 0:k(a)}}),useEffect(function(){return clearTimers(),x(getLevels({levels:w,items:d,getItemKey:l,getItemSubMenu:n})),function(){return clearTimers()}},[d]);var J=useForkRef([G[0],b]);return useEffect(function(){x(t)},[f]),React.createElement(React.Fragment,null,w.map(function(a,b){return React.createElement(ContextMenuLevel,Object.assign({},s,a,{key:"ContextMenu-".concat(b),style:_objectSpread(_objectSpread({},o),{zIndex:"number"==typeof(null===o||void 0===o?void 0:o.zIndex)?o.zIndex+1:void 0}),levelDepth:b,getItemLabel:m,addLevel:H,deleteLevel:I,onSetDirection:0<b?B:c.onSetDirection,hoveredParenLevel:E,setHoveredParenLevel:F,getItemSubMenu:n,getItemKey:l,ref:0===b?J:G[b],spareDirection:0===b?p:"rightStartUp"}))}))};export var ContextMenuLevels=React.forwardRef(ContextMenuLevelsRender);
|
|
2
2
|
//# sourceMappingURL=ContextMenuLevels.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuLevels.js","names":["React","useEffect","useState","useClickOutside","useForkRef","useRefs","directions","clearTimers","ContextMenuLevel","getLevels","withDefaultGetters","contextMenuPropDefaultSubMenuDirection","contextMenuPropSubMenuDirections","ContextMenuLevelsRender","propsComponent","ref","props","items","anchorRef","position","direction","possibleDirections","offset","onClickOutside","getItemKey","getItemLabel","getItemSubMenu","style","spareDirection","subMenuDirection","subMenuDirectionProp","otherProps","levels","setLevels","setSubMenuDirection","hoveredParenLevel","setHoveredParenLevel","levelsRefs","length","addLevel","level","activeItem","newLevels","oldDirection","splice","push","deleteLevel","isActive","ignoreClicksInsideRefs","current","handler","e","firstLevelRef","map","index","zIndex","onSetDirection","ContextMenuLevels","forwardRef"],"sources":["../../../../../../src/components/ContextMenu/ContextMenuLevels/ContextMenuLevels.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { useRefs } from '../../../hooks/useRefs/useRefs';\nimport { Direction, directions } from '../../Popover/Popover';\nimport {\n clearTimers,\n ContextMenuLevel,\n} from '../ContextMenuLevel/ContextMenuLevel';\nimport { getLevels, withDefaultGetters } from '../helpers';\nimport {\n AddLevel,\n ContextMenuComponent,\n contextMenuPropDefaultSubMenuDirection,\n ContextMenuProps,\n contextMenuPropSubMenuDirections,\n Level,\n} from '../types';\n\nconst ContextMenuLevelsRender = (\n propsComponent: ContextMenuProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const props = withDefaultGetters(propsComponent);\n const {\n items,\n anchorRef,\n position,\n direction,\n possibleDirections = directions,\n offset,\n onClickOutside,\n getItemKey,\n getItemLabel,\n getItemSubMenu,\n style,\n spareDirection,\n subMenuDirection:\n subMenuDirectionProp = contextMenuPropDefaultSubMenuDirection,\n ...otherProps\n } = props;\n\n type Item = typeof items[number];\n\n const defaultLevels = [\n {\n items,\n anchorRef,\n position,\n direction,\n possibleDirections,\n offset,\n }
|
|
1
|
+
{"version":3,"file":"ContextMenuLevels.js","names":["React","useEffect","useState","useClickOutside","useForkRef","useRefs","directions","clearTimers","ContextMenuLevel","getLevels","withDefaultGetters","contextMenuPropDefaultSubMenuDirection","contextMenuPropSubMenuDirections","ContextMenuLevelsRender","propsComponent","ref","props","items","anchorRef","position","direction","possibleDirections","offset","onClickOutside","getItemKey","getItemLabel","getItemSubMenu","style","spareDirection","subMenuDirection","subMenuDirectionProp","otherProps","defaultLevels","levels","setLevels","setSubMenuDirection","hoveredParenLevel","setHoveredParenLevel","levelsRefs","length","addLevel","level","activeItem","newLevels","oldDirection","splice","push","deleteLevel","isActive","ignoreClicksInsideRefs","current","handler","e","firstLevelRef","map","index","zIndex","onSetDirection","ContextMenuLevels","forwardRef"],"sources":["../../../../../../src/components/ContextMenu/ContextMenuLevels/ContextMenuLevels.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { useRefs } from '../../../hooks/useRefs/useRefs';\nimport { Direction, directions } from '../../Popover/Popover';\nimport {\n clearTimers,\n ContextMenuLevel,\n} from '../ContextMenuLevel/ContextMenuLevel';\nimport { getLevels, withDefaultGetters } from '../helpers';\nimport {\n AddLevel,\n ContextMenuComponent,\n contextMenuPropDefaultSubMenuDirection,\n ContextMenuProps,\n contextMenuPropSubMenuDirections,\n Level,\n} from '../types';\n\nconst ContextMenuLevelsRender = (\n propsComponent: ContextMenuProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const props = withDefaultGetters(propsComponent);\n const {\n items,\n anchorRef,\n position,\n direction,\n possibleDirections = directions,\n offset,\n onClickOutside,\n getItemKey,\n getItemLabel,\n getItemSubMenu,\n style,\n spareDirection,\n subMenuDirection:\n subMenuDirectionProp = contextMenuPropDefaultSubMenuDirection,\n ...otherProps\n } = props;\n\n type Item = typeof items[number];\n\n const defaultLevels: Level<Item>[] = [\n {\n items,\n anchorRef,\n position,\n direction,\n possibleDirections,\n offset,\n } as Level<Item>,\n ];\n\n const [levels, setLevels] = useState<Level<Item>[]>(defaultLevels);\n const [subMenuDirection, setSubMenuDirection] =\n useState<Direction>(subMenuDirectionProp);\n const [hoveredParenLevel, setHoveredParenLevel] = useState<number>(-1);\n\n const levelsRefs = useRefs<HTMLDivElement>(levels.length);\n\n const addLevel: AddLevel<Item> = ({\n level,\n items,\n anchorRef,\n activeItem,\n }) => {\n const newLevels = [...levels];\n const oldDirection =\n newLevels[level] && newLevels.length - level > 1\n ? newLevels[level].direction\n : undefined;\n\n if (newLevels[level] && newLevels.length - level > 1 && oldDirection) {\n setSubMenuDirection(oldDirection);\n }\n\n newLevels[level - 1].activeItem = activeItem;\n newLevels.splice(level);\n newLevels.push({\n items,\n anchorRef,\n direction: oldDirection || subMenuDirection,\n possibleDirections: contextMenuPropSubMenuDirections,\n position: undefined,\n });\n setLevels(newLevels);\n };\n\n const deleteLevel = (level: number) => {\n const newLevels = [...levels];\n newLevels.splice(level);\n newLevels[level - 1] = { ...newLevels[level - 1], activeItem: undefined };\n setLevels(newLevels);\n };\n\n useClickOutside({\n isActive: !!onClickOutside,\n ignoreClicksInsideRefs: [...levelsRefs, anchorRef || { current: null }],\n handler: (e) => onClickOutside?.(e),\n });\n\n useEffect(() => {\n clearTimers();\n setLevels(\n getLevels({\n levels,\n items,\n getItemKey,\n getItemSubMenu,\n }),\n );\n return () => clearTimers();\n }, [items]);\n\n const firstLevelRef = useForkRef([levelsRefs[0], ref]);\n\n useEffect(() => {\n setLevels(defaultLevels);\n }, [position]);\n\n return (\n <>\n {levels.map((level, index) => (\n <ContextMenuLevel\n {...otherProps}\n {...level}\n key={`ContextMenu-${index}`}\n style={{\n ...style,\n ...{\n zIndex:\n typeof style?.zIndex === 'number'\n ? style.zIndex + 1\n : undefined,\n },\n }}\n levelDepth={index}\n getItemLabel={getItemLabel}\n addLevel={addLevel}\n deleteLevel={deleteLevel}\n onSetDirection={\n index > 0 ? setSubMenuDirection : props.onSetDirection\n }\n hoveredParenLevel={hoveredParenLevel}\n setHoveredParenLevel={setHoveredParenLevel}\n getItemSubMenu={getItemSubMenu}\n getItemKey={getItemKey}\n ref={index === 0 ? firstLevelRef : levelsRefs[index]}\n spareDirection={index === 0 ? spareDirection : 'rightStartUp'}\n />\n ))}\n </>\n );\n};\n\nexport const ContextMenuLevels = React.forwardRef(\n ContextMenuLevelsRender,\n) as ContextMenuComponent;\n"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: ContextMenuProps<
|
|
|
19
19
|
} & import("./types").MappersItem<ITEM> & MappersGroup<GROUP> & {
|
|
20
20
|
anchorRef: import("react").RefObject<HTMLElement>;
|
|
21
21
|
position?: undefined;
|
|
22
|
-
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "size" | "direction" | "offset" | "items" | "groups" | "position" | "possibleDirections" | "spareDirection" | "onClickOutside" | "onSetDirection" | "anchorRef" | "sortGroup" | "onItemClick" | "subMenuDirection" |
|
|
22
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "size" | "direction" | "offset" | "items" | "groups" | "position" | "isOpen" | "possibleDirections" | "spareDirection" | "onClickOutside" | "onSetDirection" | "anchorRef" | "sortGroup" | "onItemClick" | "subMenuDirection" | keyof import("./types").MappersItem<ITEM_1> | keyof MappersGroup<GROUP_1>> & import("react").RefAttributes<HTMLDivElement> & (GROUP extends {
|
|
23
23
|
id: unknown;
|
|
24
24
|
} ? {} : {
|
|
25
25
|
getGroupId: ContextMenuPropGetGroupId<GROUP>;
|
|
@@ -60,7 +60,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: ContextMenuProps<
|
|
|
60
60
|
} & import("./types").MappersItem<ITEM> & MappersGroup<GROUP> & {
|
|
61
61
|
anchorRef?: undefined;
|
|
62
62
|
position: import("../Popover").Position;
|
|
63
|
-
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "size" | "direction" | "offset" | "items" | "groups" | "position" | "possibleDirections" | "spareDirection" | "onClickOutside" | "onSetDirection" | "anchorRef" | "sortGroup" | "onItemClick" | "subMenuDirection" |
|
|
63
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "size" | "direction" | "offset" | "items" | "groups" | "position" | "isOpen" | "possibleDirections" | "spareDirection" | "onClickOutside" | "onSetDirection" | "anchorRef" | "sortGroup" | "onItemClick" | "subMenuDirection" | keyof import("./types").MappersItem<ITEM_1> | keyof MappersGroup<GROUP_1>> & import("react").RefAttributes<HTMLDivElement> & (GROUP extends {
|
|
64
64
|
id: unknown;
|
|
65
65
|
} ? {} : {
|
|
66
66
|
getGroupId: ContextMenuPropGetGroupId<GROUP>;
|
|
@@ -83,7 +83,7 @@ export declare type Level<ITEM> = {
|
|
|
83
83
|
activeItem?: string;
|
|
84
84
|
direction?: Direction;
|
|
85
85
|
possibleDirections?: readonly Direction[];
|
|
86
|
-
offset?:
|
|
86
|
+
offset?: PopoverPropOffset;
|
|
87
87
|
} & PositioningProps;
|
|
88
88
|
export declare type AddLevel<ITEM> = (params: {
|
|
89
89
|
level: number;
|