npm - @vkontakte/vkui - Versions diffs - 5.8.0-beta.0 → 5.8.1-alpha.0 - Mend

@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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.

Files changed (1104) hide show

package/dist/components/Chip/Chip.js CHANGED Viewed

@@ -7,15 +7,15 @@ import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { SizeType } from "../../lib/adaptivity";
 import { getTitleFromChildren } from "../../lib/utils";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
-import { Footnote } from "../Typography/Footnote/Footnote";
 var sizeYClassNames = _define_property({
     none: "vkuiChip--sizeY-none"
 }, SizeType.COMPACT, "vkuiChip--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */ export var Chip = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, option = _param.option, _param_removable = _param.removable, removable = _param_removable === void 0 ? true : _param_removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removeAriaLabel = _param.removeAriaLabel, removeAriaLabel = _param_removeAriaLabel === void 0 ? "Удалить" : _param_removeAriaLabel, _param_before = _param.before, before = _param_before === void 0 ? null : _param_before, after = _param.after, children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, option = _param.option, _param_removable = _param.removable, removable = _param_removable === void 0 ? true : _param_removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removeAriaLabel = _param.removeAriaLabel, removeAriaLabel = _param_removeAriaLabel === void 0 ? "Удалить" : _param_removeAriaLabel, _param_before = _param.before, before = _param_before === void 0 ? null : _param_before, after = _param.after, children = _param.children, restProps = _object_without_properties(_param, [
         "value",
         "option",
         "removable",
@@ -23,8 +23,7 @@ var sizeYClassNames = _define_property({
         "removeAriaLabel",
         "before",
         "after",
-        "children",
-        "className"
+        "children"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var onRemoveWrapper = React.useCallback(function(event) {
@@ -34,8 +33,8 @@ var sizeYClassNames = _define_property({
         value
     ]);
     var title = getTitleFromChildren(children);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames("vkuiChip", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable", className),
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiChip", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable"),
         role: "option",
         "aria-label": title
     }, restProps), /*#__PURE__*/ React.createElement("div", {
@@ -43,7 +42,7 @@ var sizeYClassNames = _define_property({
         role: "presentation"
     }, hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiChip__before"
-    }, before), /*#__PURE__*/ React.createElement(Footnote, {
+    }, before), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiChip__content",
         title: title,
         "aria-hidden": true

package/dist/components/Chip/Chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { ~~Tappable~~ } from '../~~Tappable~~/~~Tappable~~';\nimport { ~~Footnote~~ } from '../~~Typography~~/~~Footnote/Footnote~~';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles['Chip--sizeY-none'],\n [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string \| number;\n\nexport interface ChipOption {\n value?: ChipValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface ChipProps extends ~~React.HTMLAttributes~~<HTMLDivElement> {\n value: ChipValue;\n option?: ChipOption;\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n label: string;\n option: T;\n disabled: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = '',\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = 'Удалить',\n before = null,\n after,\n children,\n ~~className,\n~~ ...restProps\n}: ChipProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value],\n );\n const title = getTitleFromChildren(children);\n\n return (\n <~~div~~\n ~~className~~={classNames(\n styles['Chip'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n removable && styles['Chip--removable'],\n ~~className,\n~~ )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div className={styles['Chip__in']} role=\"presentation\">\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <~~Footnote~~ className={styles['Chip__content']} title={title} aria-hidden>\n {children}\n </~~Footnote~~>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n className={styles['Chip__remove']}\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel />\n </Tappable>\n )}\n </div>\n </~~div~~>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","~~Tappable~~","~~Footnote~~","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","~~className","~~restProps","sizeY","onRemoveWrapper","useCallback","event","title","~~div~~","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;~~AACvD~~,SAASC,~~QAAQ~~,QAAQ,~~uBAAuB~~;~~AAChD~~,SAASC,QAAQ,QAAQ,~~kCAAkC~~;~~AAG3D~~,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AA2BnB;;CAEC,GACD,OAAO,IAAMC,OAAO;8BAClBC,OAAAA,kCAAQ,mBACRC,gBAAAA,kCACAC,WAAAA,0CAAY,kDACZC,UAAAA,wCAAWb,wDACXc,iBAAAA,sDAAkB,2DAClBC,QAAAA,oCAAS,sBACTC,eAAAA,OACAC,kBAAAA,~~UACAC,mBAAAA,WACGC~~;~~QATHT~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC~~;QACAC~~;;IAGA,~~IAA2BjB~~,iBAAAA,wCAAAA,~~eAAnBmB~~,OAAAA,0CAAQ;IAChB,IAAMC,~~kBAAkBzB~~,~~MAAM0B~~,WAAW,CACvC,SAACC;~~QACCV~~,~~SAASU~~,~~OAAOb~~;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,~~IAAMc~~,~~QAAQrB~~,qBAAqBc;IAEnC,qBACE,~~oBAACQ~~;~~QACCP~~,~~WAAWpB~~,~~uBAETsB~~,~~UAAUlB~~,~~SAASwB~~,OAAO,~~IAAIpB~~,eAAe,~~CAACc~~,MAAM,~~EACpDR,oCACAM~~;~~QAEFS~~,MAAK;QACLC,cAAYJ;OACRL,0BAEJ,~~oBAACM~~;~~QAAIP~~,SAAS;~~QAAsBS~~,MAAK;~~OACtC5B~~,aAAagB,yBAAW,~~oBAACU~~;~~QAAIP~~,SAAS;~~OAA2BH~~,uBAClE,~~oBAACV~~;~~QAASa~~,SAAS;~~QAA2BM~~,OAAOA;~~QAAOK~~,eAAAA;~~OACzDZ~~,WAEFlB,aAAaiB,wBAAU,~~oBAACS~~;~~QAAIP~~,SAAS;~~OAA0BF~~,QAE/DJ,2BACC,~~oBAACR~~;~~QACC0B~~,WAAU;~~QACVZ~~,SAAS;~~QACTa~~,~~SAASV~~;~~QACTW~~,UAAU;QACVC,WAAW;~~QACXL~~,cAAY,AAAC,GAAqBJ,~~OAAnBV~~,iBAAgB,KAAS,~~OAANU~~;qBAElC,~~oBAAC3B~~;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles['Chip--sizeY-none'],\n [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string \| number;\n\nexport interface ChipOption {\n value?: ChipValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface ChipProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n value: ChipValue;\n option?: ChipOption;\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n label: string;\n option: T;\n disabled: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = '',\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = 'Удалить',\n before = null,\n after,\n children,\n ...restProps\n}: ChipProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value],\n );\n const title = getTitleFromChildren(children);\n\n return (\n <RootComponent\n baseClassName={classNames(\n styles['Chip'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n removable && styles['Chip--removable'],\n )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div className={styles['Chip__in']} role=\"presentation\">\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <span className={styles['Chip__content']} title={title} aria-hidden>\n {children}\n </span>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n className={styles['Chip__remove']}\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel />\n </Tappable>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","RootComponent","Tappable","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","useCallback","event","title","baseClassName","REGULAR","role","aria-label","div","className","span","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AA2BnB;;CAEC,GACD,OAAO,IAAMC,OAAO;8BAClBC,OAAAA,kCAAQ,mBACRC,gBAAAA,kCACAC,WAAAA,0CAAY,kDACZC,UAAAA,wCAAWb,wDACXc,iBAAAA,sDAAkB,2DAClBC,QAAAA,oCAAS,sBACTC,eAAAA,OACAC,kBAAAA,UACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BhB,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAChB,IAAMC,kBAAkBxB,MAAMyB,WAAW,CACvC,SAACC;QACCT,SAASS,OAAOZ;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,IAAMa,QAAQpB,qBAAqBc;IAEnC,qBACE,oBAACb;QACCoB,eAAe1B,uBAEbqB,UAAUjB,SAASuB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDP;QAEFc,MAAK;QACLC,cAAYJ;OACRL,0BAEJ,oBAACU;QAAIC,SAAS;QAAsBH,MAAK;OACtC3B,aAAagB,yBAAW,oBAACa;QAAIC,SAAS;OAA2Bd,uBAClE,oBAACe;QAAKD,SAAS;QAA2BN,OAAOA;QAAOQ,eAAAA;OACrDd,WAEFlB,aAAaiB,wBAAU,oBAACY;QAAIC,SAAS;OAA0Bb,QAE/DJ,2BACC,oBAACP;QACC2B,WAAU;QACVH,SAAS;QACTI,SAASb;QACTc,UAAU;QACVC,WAAW;QACXR,cAAY,AAAC,GAAqBJ,OAAnBT,iBAAgB,KAAS,OAANS;qBAElC,oBAAC1B;AAMb,EAAE"}

package/dist/components/ChipsInputBase/ChipsInputBase.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { useChipsInput } from "../../hooks/useChipsInput";
 import { useExternRef } from "../../hooks/useExternRef";
 import { SizeType } from "../../lib/adaptivity";
 import { Chip } from "../Chip/Chip";
+import { Text } from "../Typography/Text/Text";
 export var chipsInputDefaultProps = {
     onChange: noop,
     onInputChange: noop,
@@ -142,7 +143,8 @@ export var ChipsInputBase = function(props) {
     }), /*#__PURE__*/ React.createElement("label", {
         className: "vkuiChipsInputBase__label",
         "aria-label": inputAriaLabel
-    }, /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({
+    }, /*#__PURE__*/ React.createElement(Text, _object_spread_props(_object_spread({
+        Component: "input",
         type: "text",
         autoCapitalize: "none",
         autoComplete: "off",
@@ -151,7 +153,7 @@ export var ChipsInputBase = function(props) {
         "aria-autocomplete": "list",
         className: "vkuiChipsInputBase__el"
     }, restProps), {
-        ref: inputRef,
+        getRootRef: inputRef,
         value: fieldValue,
         onChange: handleInputChange,
         onKeyDown: handleKeyDown,

package/dist/components/ChipsInputBase/ChipsInputBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign {\n value: Option[];\n inputValue?: string;\n onChange?: (o: Option[]) => void;\n onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n getOptionValue?: (o?: Option) => ChipValue;\n getOptionLabel?: (o?: Option) => string;\n getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n inputAriaLabel?: string;\n /*\n Добавляет значение в список на событие `onBlur`\n */\n addOnBlur?: boolean;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n onChange: noop,\n onInputChange: noop,\n onKeyDown: noop,\n onBlur: noop,\n onFocus: noop,\n value: [],\n inputValue: '',\n inputAriaLabel: 'Введите ваше значение...',\n getOptionValue: (option) => option.value,\n getOptionLabel: (option) => option.label,\n getNewOptionData: (_, label) => ({\n value: label,\n label,\n }),\n renderChip(props) {\n if (!props) {\n return null;\n }\n\n const { disabled, value, label, ...rest } = props;\n return (\n <Chip value={value} removable={!disabled} {...rest}>\n {label}\n </Chip>\n );\n },\n addOnBlur: false,\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n const {\n style,\n className,\n getRootRef,\n value,\n onChange,\n onInputChange,\n onKeyDown,\n onBlur,\n onFocus,\n children,\n inputValue,\n getRef,\n placeholder,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n renderChip,\n inputAriaLabel,\n addOnBlur,\n ...restProps\n } = propsWithDefault;\n const { sizeY } = useAdaptivity();\n\n const [focused, setFocused] = React.useState(false);\n const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n useChipsInput(propsWithDefault);\n const inputRef = useExternRef(getRef);\n\n const isDisabled = restProps.disabled \|\| restProps.readOnly;\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n onKeyDown!(e);\n\n if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n e.preventDefault();\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n addOptionFromInput();\n e.preventDefault();\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (focused) {\n setFocused(false);\n }\n onBlur!(e);\n\n if (addOnBlur && !e.defaultPrevented) {\n addOptionFromInput();\n }\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n setFocused(true);\n }\n onFocus!(e);\n };\n\n const handleChipRemove = (_: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n if (value !== undefined) {\n removeOption(value);\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n if (inputRef?.current !== null && !focused) {\n inputRef.current.focus();\n }\n };\n\n return (\n <div\n onClick={handleClick}\n role=\"presentation\"\n style={style}\n className={classNames(\n styles['ChipsInputBase'],\n sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n className,\n )}\n ref={getRootRef}\n >\n {selectedOptions.map((option: Option) => {\n const value = getOptionValue!(option);\n const label = getOptionLabel!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderChip!({\n option,\n value,\n label,\n onRemove: handleChipRemove,\n disabled: Boolean(restProps.disabled),\n className: styles['ChipsInputBase__chip'],\n })}\n </React.Fragment>\n );\n })}\n <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n <input\n type=\"text\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n aria-autocomplete=\"list\"\n className={styles['ChipsInputBase__el']}\n {...restProps}\n ref={inputRef}\n value={fieldValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={selectedOptions.length ? undefined : placeholder}\n />\n </label>\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","removable","addOnBlur","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign {\n value: Option[];\n inputValue?: string;\n onChange?: (o: Option[]) => void;\n onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n getOptionValue?: (o?: Option) => ChipValue;\n getOptionLabel?: (o?: Option) => string;\n getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n inputAriaLabel?: string;\n /*\n Добавляет значение в список на событие `onBlur`\n */\n addOnBlur?: boolean;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n onChange: noop,\n onInputChange: noop,\n onKeyDown: noop,\n onBlur: noop,\n onFocus: noop,\n value: [],\n inputValue: '',\n inputAriaLabel: 'Введите ваше значение...',\n getOptionValue: (option) => option.value,\n getOptionLabel: (option) => option.label,\n getNewOptionData: (_, label) => ({\n value: label,\n label,\n }),\n renderChip(props) {\n if (!props) {\n return null;\n }\n\n const { disabled, value, label, ...rest } = props;\n return (\n <Chip value={value} removable={!disabled} {...rest}>\n {label}\n </Chip>\n );\n },\n addOnBlur: false,\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n const {\n style,\n className,\n getRootRef,\n value,\n onChange,\n onInputChange,\n onKeyDown,\n onBlur,\n onFocus,\n children,\n inputValue,\n getRef,\n placeholder,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n renderChip,\n inputAriaLabel,\n addOnBlur,\n ...restProps\n } = propsWithDefault;\n const { sizeY } = useAdaptivity();\n\n const [focused, setFocused] = React.useState(false);\n const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n useChipsInput(propsWithDefault);\n const inputRef = useExternRef(getRef);\n\n const isDisabled = restProps.disabled \|\| restProps.readOnly;\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n onKeyDown!(e);\n\n if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n e.preventDefault();\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n addOptionFromInput();\n e.preventDefault();\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (focused) {\n setFocused(false);\n }\n onBlur!(e);\n\n if (addOnBlur && !e.defaultPrevented) {\n addOptionFromInput();\n }\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n setFocused(true);\n }\n onFocus!(e);\n };\n\n const handleChipRemove = (_: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n if (value !== undefined) {\n removeOption(value);\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n\n if (inputRef?.current !== null && !focused) {\n inputRef.current.focus();\n }\n };\n\n return (\n <div\n onClick={handleClick}\n role=\"presentation\"\n style={style}\n className={classNames(\n styles['ChipsInputBase'],\n sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n className,\n )}\n ref={getRootRef}\n >\n {selectedOptions.map((option: Option) => {\n const value = getOptionValue!(option);\n const label = getOptionLabel!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderChip!({\n option,\n value,\n label,\n onRemove: handleChipRemove,\n disabled: Boolean(restProps.disabled),\n className: styles['ChipsInputBase__chip'],\n })}\n </React.Fragment>\n );\n })}\n <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n <Text\n Component=\"input\"\n type=\"text\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n aria-autocomplete=\"list\"\n className={styles['ChipsInputBase__el']}\n {...restProps}\n getRootRef={inputRef}\n value={fieldValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={selectedOptions.length ? undefined : placeholder}\n />\n </label>\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","Text","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","removable","addOnBlur","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","Component","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}

package/dist/components/ChipsSelect/ChipsSelect.js CHANGED Viewed

@@ -89,8 +89,10 @@ var chipsSelectDefaultProps = _object_spread_props(_object_spread({}, chipsInput
         }
     };
     var handleClickOutside = function(e) {
-        var _rootRef_current;
-        if (e.target !== rootRef.current && !((_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.contains(e.target))) {
+        var _rootRef_current, _scrollBoxRef_current;
+        var isClickOutsideFormField = !((_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.contains(e.target));
+        var isClickOutsideDropdown = !((_scrollBoxRef_current = scrollBoxRef.current) === null || _scrollBoxRef_current === void 0 ? void 0 : _scrollBoxRef_current.contains(e.target));
+        if (isClickOutsideFormField && isClickOutsideDropdown) {
             setOpened(false);
         }
     };

package/dist/components/ChipsSelect/ChipsSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' \| 'bottom';\n options?: Option[];\n filterFn?:\n \| false\n \| ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /*\n Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n /\n creatable?: boolean;\n /\n Отрисовка лоадера вместо списка опций в выпадающем списке\n /\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Показывать или скрывать уже выбранные опции\n /\n showSelected?: boolean;\n /\n Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n /\n creatableText?: string;\n /\n Текст который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Событие срабатывающее перед onChange\n /\n onChangeStart?: (e: React.MouseEvent \| React.KeyboardEvent, option: Option) => void;\n /\n Закрытие выпадающего списка после выбора элемента\n /\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n /\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' \| 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement \| undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n if (e.target !== rootRef.current && !rootRef.current?.contains(e.target as Node)) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null \|\| focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> \| undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","popperPlacement","filteredOptions","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' \| 'bottom';\n options?: Option[];\n filterFn?:\n \| false\n \| ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /*\n Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n /\n creatable?: boolean;\n /\n Отрисовка лоадера вместо списка опций в выпадающем списке\n /\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Показывать или скрывать уже выбранные опции\n /\n showSelected?: boolean;\n /\n Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n /\n creatableText?: string;\n /\n Текст который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Событие срабатывающее перед onChange\n /\n onChangeStart?: (e: React.MouseEvent \| React.KeyboardEvent, option: Option) => void;\n /\n Закрытие выпадающего списка после выбора элемента\n /\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n /\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' \| 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement \| undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n if (isClickOutsideFormField && isClickOutsideDropdown) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null \|\| focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> \| undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","popperPlacement","filteredOptions","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

package/dist/components/ConfigProvider/ConfigProvider.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { useDOM } from "../../lib/dom";
 import { TokensClassProvider } from "../../lib/tokensClassProvider";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { addClassNameToElement, removeClassNameFromElement } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { ConfigProviderContext, useConfigProvider, WebviewType } from "./ConfigProviderContext";
 var warn = warnOnce("ConfigProvider");
@@ -28,13 +29,15 @@ var warn = warnOnce("ConfigProvider");
     // TODO [>=6]: удалить использование хука
     var appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);
     var document = useDOM().document;
-    useIsomorphicLayoutEffect(function() {
+    // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).
+    useIsomorphicLayoutEffect(function attachVKUITokensClassNameToBody() {
+        if (!document) {
+            return;
+        }
         var VKUITokensClassName = generateVKUITokensClassName(platform, appearance);
-        // eslint-disable-next-line no-restricted-properties
-        document.body.classList.add(VKUITokensClassName);
+        addClassNameToElement(document.body, VKUITokensClassName);
         return function() {
-            // eslint-disable-next-line no-restricted-properties
-            document.body.classList.remove(VKUITokensClassName);
+            removeClassNameFromElement(document.body, VKUITokensClassName);
         };
     }, [
         platform,

package/dist/components/ConfigProvider/ConfigProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport {\n ConfigProviderContext,\n ConfigProviderContextInterface,\n useConfigProvider,\n WebviewType,\n} from './ConfigProviderContext';\n\nconst warn = warnOnce('ConfigProvider');\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n /*\n > ⚠️ В v6 метод будет удалён (см. https://github.com/VKCOM/VKUI/issues/5049).\n * > Используйте хук `useAppearance()` из библиотеки `@vkontakte/vk-bridge-react`, если вам нужно\n * > определять, что `appearance` был передан через VK Bridge.\n \n @deprecated v5.8.0\n /\n onDetectAppearanceByBridge?: () => void; // TODO [>=6]: удалить\n children: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n const parentConfig = useConfigProvider();\n\n const {\n children,\n webviewType,\n hasCustomPanelHeaderAfter: hasCustomPanelHeaderAfterMerged,\n customPanelHeaderAfterMinWidth,\n isWebView,\n transitionMotionEnabled,\n platform,\n locale,\n appearance: appearanceProp,\n onDetectAppearanceByBridge = noop,\n } = {\n ...parentConfig,\n ...props,\n };\n\n // TODO [>=6]: Удалить данный бэкпорт\n const hasCustomPanelHeaderAfter =\n props.webviewType && props.hasCustomPanelHeaderAfter === undefined\n ? props.webviewType === WebviewType.VKAPPS\n : hasCustomPanelHeaderAfterMerged;\n\n if (process.env.NODE_ENVIRONMENT === 'development') {\n // TODO [>=6]: удалить warn\n let webviewTypeRule = '';\n if (props.webviewType) {\n webviewTypeRule =\n props.webviewType === WebviewType.INTERNAL\n ? '3. замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}'\n : '3. замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}';\n }\n warn(`[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:\n\n1. используйте хук useAppearance() из @vkontakte/vk-bridge-react и результат передайте в параметр appearance;\n2. передайте bridge.isWebView() в параметр isWebView;\n${webviewTypeRule}\n\nПодробности см. https://github.com/VKCOM/VKUI/issues/5049\n`);\n }\n\n // TODO [>=6]: удалить использование хука\n const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n const { document } = useDOM();\n\n useIsomorphicLayoutEffect(() => {\n const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n ~~// eslint-disable-next-line no-restricted-properties\n~~ document!.body~~.classList.add(~~VKUITokensClassName);\n\n return () => {\n ~~// eslint-disable-next-line no-restricted-properties\n~~ document!.body~~.classList.remove(~~VKUITokensClassName);\n };\n }, [platform, appearance]);\n\n const configContext = useObjectMemo({\n webviewType,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n isWebView,\n transitionMotionEnabled,\n platform,\n locale,\n appearance,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <TokensClassProvider platform={platform} appearance={appearance}>\n {children}\n </TokensClassProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","warnOnce","ConfigProviderContext","useConfigProvider","WebviewType","warn","ConfigProvider","props","parentConfig","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","undefined","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","document","~~VKUITokensClassName~~","~~body~~","~~classList~~","~~add","remove","~~configContext","Provider","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,WAAW,QACN,0BAA0B;AAEjC,IAAMC,OAAOJ,SAAS;AActB;;CAEC,GACD,OAAO,IAAMK,iBAAiB,SAACC;IAC7B,IAAMC,eAAeL;IAErB,IAWI,mBAAA,mBACCK,cACAD,QAZHE,WAUE,iBAVFA,UACAC,cASE,iBATFA,aACAC,AAA2BC,kCAQzB,iBARFD,2BACAE,iCAOE,iBAPFA,gCACAC,YAME,iBANFA,WACAC,0BAKE,iBALFA,yBACAC,WAIE,iBAJFA,UACAC,SAGE,iBAHFA,QACAC,AAAYC,iBAEV,iBAFFD,wDAEE,iBADFE,4BAAAA,~~oFAA6B1B~~;IAM/B,qCAAqC;IACrC,~~IAAMiB~~,4BACJJ,MAAMG,WAAW,IAAIH,MAAMI,yBAAyB,KAAKU,YACrDd,MAAMG,WAAW,KAAKN,YAAYkB,MAAM,GACxCV;IAEN,IAAIW,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAInB,MAAMG,WAAW,EAAE;YACrBgB,kBACEnB,MAAMG,WAAW,KAAKN,YAAYuB,QAAQ,GACtC,4FACA;QACR;QACAtB,KAAK,AAAC,mPAIQ,OAAhBqB,iBAAgB;IAIhB;IAEA,yCAAyC;IACzC,IAAMR,~~aAAatB~~,~~wBAAwBuB~~,gBAAgBC;IAE3D,IAAM,AAAEQ,~~WAAa9B~~,~~SAAb8B~~;~~IAER5B~~,~~0BAA0B~~;~~QACxB~~,~~IAAM6B~~,~~sBAAsBlC~~,~~4BAA4BqB~~,~~UAAUE;QAElE~~,~~oDAAoD~~;~~QACpDU~~,~~SAAUE~~,~~IAAI~~,~~CAACC~~,~~SAAS~~,~~CAACC~~,~~GAAG~~,~~CAACH~~;~~QAE7B~~,OAAO;~~YACL~~,~~oDAAoD;YACpDD~~,~~SAAUE~~,IAAI,~~CAACC,SAAS,CAACE,MAAM,CAACJ~~;~~QAClC~~;IACF,~~GAAG~~;~~QAACb~~;QAAUE;KAAW;~~IAEzB~~,~~IAAMgB~~,gBAAgBrC,cAAc;~~QAClCa~~,aAAAA;QACAC,2BAAAA;QACAE,gCAAAA;QACAC,WAAAA;QACAC,yBAAAA;QACAC,UAAAA;QACAC,QAAAA;QACAC,YAAAA;IACF;IAEA,qBACE,oBAAChB,~~sBAAsBiC~~,QAAQ;QAACC,OAAOF;qBACrC,oBAACnC;~~QAAoBiB~~,UAAUA;QAAUE,YAAYA;OAClDT;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { addClassNameToElement, removeClassNameFromElement } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport {\n ConfigProviderContext,\n ConfigProviderContextInterface,\n useConfigProvider,\n WebviewType,\n} from './ConfigProviderContext';\n\nconst warn = warnOnce('ConfigProvider');\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n /*\n > ⚠️ В v6 метод будет удалён (см. https://github.com/VKCOM/VKUI/issues/5049).\n * > Используйте хук `useAppearance()` из библиотеки `@vkontakte/vk-bridge-react`, если вам нужно\n * > определять, что `appearance` был передан через VK Bridge.\n \n @deprecated v5.8.0\n /\n onDetectAppearanceByBridge?: () => void; // TODO [>=6]: удалить\n children: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n const parentConfig = useConfigProvider();\n\n const {\n children,\n webviewType,\n hasCustomPanelHeaderAfter: hasCustomPanelHeaderAfterMerged,\n customPanelHeaderAfterMinWidth,\n isWebView,\n transitionMotionEnabled,\n platform,\n locale,\n appearance: appearanceProp,\n onDetectAppearanceByBridge = noop,\n } = {\n ...parentConfig,\n ...props,\n };\n\n // TODO [>=6]: Удалить данный бэкпорт\n const hasCustomPanelHeaderAfter =\n props.webviewType && props.hasCustomPanelHeaderAfter === undefined\n ? props.webviewType === WebviewType.VKAPPS\n : hasCustomPanelHeaderAfterMerged;\n\n if (process.env.NODE_ENVIRONMENT === 'development') {\n // TODO [>=6]: удалить warn\n let webviewTypeRule = '';\n if (props.webviewType) {\n webviewTypeRule =\n props.webviewType === WebviewType.INTERNAL\n ? '3. замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}'\n : '3. замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}';\n }\n warn(`[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:\n\n1. используйте хук useAppearance() из @vkontakte/vk-bridge-react и результат передайте в параметр appearance;\n2. передайте bridge.isWebView() в параметр isWebView;\n${webviewTypeRule}\n\nПодробности см. https://github.com/VKCOM/VKUI/issues/5049\n`);\n }\n\n // TODO [>=6]: удалить использование хука\n const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n const { document } = useDOM();\n\n // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).\n useIsomorphicLayoutEffect(\n function attachVKUITokensClassNameToBody() {\n if (!document) {\n return;\n }\n\n const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n addClassNameToElement(document.body, VKUITokensClassName);\n return () => {\n removeClassNameFromElement(document.body, VKUITokensClassName);\n };\n },\n [platform, appearance],\n );\n\n const configContext = useObjectMemo({\n webviewType,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n isWebView,\n transitionMotionEnabled,\n platform,\n locale,\n appearance,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <TokensClassProvider platform={platform} appearance={appearance}>\n {children}\n </TokensClassProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","addClassNameToElement","removeClassNameFromElement","warnOnce","ConfigProviderContext","useConfigProvider","WebviewType","warn","ConfigProvider","props","parentConfig","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","undefined","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","document","attachVKUITokensClassNameToBody","VKUITokensClassName","body","configContext","Provider","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,qBAAqB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACpF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,WAAW,QACN,0BAA0B;AAEjC,IAAMC,OAAOJ,SAAS;AActB;;CAEC,GACD,OAAO,IAAMK,iBAAiB,SAACC;IAC7B,IAAMC,eAAeL;IAErB,IAWI,mBAAA,mBACCK,cACAD,QAZHE,WAUE,iBAVFA,UACAC,cASE,iBATFA,aACAC,AAA2BC,kCAQzB,iBARFD,2BACAE,iCAOE,iBAPFA,gCACAC,YAME,iBANFA,WACAC,0BAKE,iBALFA,yBACAC,WAIE,iBAJFA,UACAC,SAGE,iBAHFA,QACAC,AAAYC,iBAEV,iBAFFD,wDAEE,iBADFE,4BAAAA,oFAA6B5B;IAM/B,qCAAqC;IACrC,IAAMmB,4BACJJ,MAAMG,WAAW,IAAIH,MAAMI,yBAAyB,KAAKU,YACrDd,MAAMG,WAAW,KAAKN,YAAYkB,MAAM,GACxCV;IAEN,IAAIW,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAInB,MAAMG,WAAW,EAAE;YACrBgB,kBACEnB,MAAMG,WAAW,KAAKN,YAAYuB,QAAQ,GACtC,4FACA;QACR;QACAtB,KAAK,AAAC,mPAIQ,OAAhBqB,iBAAgB;IAIhB;IAEA,yCAAyC;IACzC,IAAMR,aAAaxB,wBAAwByB,gBAAgBC;IAE3D,IAAM,AAAEQ,WAAahC,SAAbgC;IAER,yFAAyF;IACzF9B,0BACE,SAAS+B;QACP,IAAI,CAACD,UAAU;YACb;QACF;QAEA,IAAME,sBAAsBrC,4BAA4BuB,UAAUE;QAElEnB,sBAAsB6B,SAASG,IAAI,EAAED;QACrC,OAAO;YACL9B,2BAA2B4B,SAASG,IAAI,EAAED;QAC5C;IACF,GACA;QAACd;QAAUE;KAAW;IAGxB,IAAMc,gBAAgBrC,cAAc;QAClCe,aAAAA;QACAC,2BAAAA;QACAE,gCAAAA;QACAC,WAAAA;QACAC,yBAAAA;QACAC,UAAAA;QACAC,QAAAA;QACAC,YAAAA;IACF;IAEA,qBACE,oBAAChB,sBAAsB+B,QAAQ;QAACC,OAAOF;qBACrC,oBAACnC;QAAoBmB,UAAUA;QAAUE,YAAYA;OAClDT;AAIT,EAAE"}

package/dist/components/Counter/Counter.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     /**
      * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то
      * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется

package/dist/components/Counter/Counter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n secondary: styles['Counter--mode-secondary'],\n primary: styles['Counter--mode-primary'],\n prominent: styles['Counter--mode-prominent'],\n contrast: styles['Counter--mode-contrast'],\n inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n s: styles['Counter--size-s'],\n m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends ~~React.HTMLAttributes~~<HTMLSpanElement> {\n /*\n Тип счетчика. В режиме `inherit` если компонент находится в кнопке, то\n * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n * режим `secondary`\n /\n mode?: 'secondary' \| 'primary' \| 'prominent' \| 'contrast' \| 'inherit';\n size?: 's' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n mode = 'inherit',\n size = 'm',\n children,\n className,\n ...restProps\n}: CounterProps) => {\n if (React.Children.count(children) === 0) {\n return null;\n }\n\n const CounterTypography = size === 's' ? Caption : Headline;\n const counterLevel = size === 's' ? '1' : '2';\n\n return (\n <CounterTypography\n {...restProps}\n Component=\"span\"\n className={classNames(\n 'vkuiInternalCounter',\n styles['Counter'],\n modeClassNames[mode],\n sizeClassNames[size],\n className,\n )}\n level={counterLevel}\n >\n {children}\n </CounterTypography>\n );\n};\n"],"names":["React","classNames","Caption","Headline","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;~~AAC7C~~,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,IAAMC,UAAU;6BACrBC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIjB,MAAMmB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,IAAMK,oBAAoBN,SAAS,MAAMb,UAAUC;IACnD,IAAMmB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM,2DACKH;QACJK,WAAU;QACVN,WAAWhB,WACT,sCAEAG,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;QAENN;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n secondary: styles['Counter--mode-secondary'],\n primary: styles['Counter--mode-primary'],\n prominent: styles['Counter--mode-prominent'],\n contrast: styles['Counter--mode-contrast'],\n inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n s: styles['Counter--size-s'],\n m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n /*\n Тип счетчика. В режиме `inherit` если компонент находится в кнопке, то\n * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n * режим `secondary`\n /\n mode?: 'secondary' \| 'primary' \| 'prominent' \| 'contrast' \| 'inherit';\n size?: 's' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n mode = 'inherit',\n size = 'm',\n children,\n className,\n ...restProps\n}: CounterProps) => {\n if (React.Children.count(children) === 0) {\n return null;\n }\n\n const CounterTypography = size === 's' ? Caption : Headline;\n const counterLevel = size === 's' ? '1' : '2';\n\n return (\n <CounterTypography\n {...restProps}\n Component=\"span\"\n className={classNames(\n 'vkuiInternalCounter',\n styles['Counter'],\n modeClassNames[mode],\n sizeClassNames[size],\n className,\n )}\n level={counterLevel}\n >\n {children}\n </CounterTypography>\n );\n};\n"],"names":["React","classNames","Caption","Headline","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,IAAMC,UAAU;6BACrBC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIjB,MAAMmB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,IAAMK,oBAAoBN,SAAS,MAAMb,UAAUC;IACnD,IAAMmB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM,2DACKH;QACJK,WAAU;QACVN,WAAWhB,WACT,sCAEAG,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;QAENN;AAGP,EAAE"}

package/dist/components/CustomSelect/CustomSelect.js CHANGED Viewed

@@ -169,7 +169,7 @@ var defaultOptions = [];
     ]);
     var openedClassNames = React.useMemo(function() {
         var _popperPlacement;
-        return classNames(opened && dropdownOffsetDistance === 0 && (((_popperPlacement = popperPlacement) === null || _popperPlacement === void 0 ? void 0 : _popperPlacement.includes("top")) ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down"));
+        return opened && dropdownOffsetDistance === 0 && (((_popperPlacement = popperPlacement) === null || _popperPlacement === void 0 ? void 0 : _popperPlacement.includes("top")) ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down") || undefined;
     }, [
         dropdownOffsetDistance,
         opened,