npm - @vkontakte/vkui - Versions diffs - 5.4.1 → 5.4.3 - Mend

@vkontakte/vkui 5.4.1 → 5.4.3

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 (179) hide show

package/README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 <h1 align="center">
   <a href="https://vkcom.github.io/VKUI/">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="docs/assets/vkui-logo-light.svg">
-      <img src="docs/assets/vkui-logo-dark.svg" width="150" alt="VKUI logo" />
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/VKCOM/VKUI/d72dcc219bc4b441b2740b69d9343aea14d66c7f/docs/assets/vkui-logo-light.svg">
+      <img src="https://raw.githubusercontent.com/VKCOM/VKUI/d72dcc219bc4b441b2740b69d9343aea14d66c7f/docs/assets/vkui-logo-dark.svg" width="150" alt="VKUI logo" />
     </picture>
   </a>
 </h1>

package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js CHANGED Viewed

@@ -16,7 +16,7 @@ var ActionSheetDefaultIosCloseItem = function(props) {
     return /*#__PURE__*/ _react.createElement(_actionSheetItem.ActionSheetItem, _objectSpread({
         autoClose: true,
         mode: "cancel"
-    }, props), "Отменить");
+    }, props), "Отмена");
 };
 //# sourceMappingURL=ActionSheetDefaultIosCloseItem.js.map

package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n return (\n <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n ~~Отменить\~~n </ActionSheetItem>\n );\n};\n"],"names":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;2DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,qBAACC,gCAAe;QAACC,WAAAA,IAAS;QAACC,MAAK;OAAaH,QAAO;AAIxD"}
1	+ {"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n return (\n <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n Отмена\n </ActionSheetItem>\n );\n};\n"],"names":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;2DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,qBAACC,gCAAe;QAACC,WAAAA,IAAS;QAACC,MAAK;OAAaH,QAAO;AAIxD"}

package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js CHANGED Viewed

@@ -23,6 +23,7 @@ var _actionSheetContext = require("../ActionSheet/ActionSheetContext");
 var _tappable = require("../Tappable/Tappable");
 var _subhead = require("../Typography/Subhead/Subhead");
 var _text = require("../Typography/Text/Text");
+var _title = require("../Typography/Title/Title");
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */ var ActionSheetItem = function(_param) {
@@ -62,15 +63,18 @@ var _text = require("../Typography/Text/Text");
     }, restProps), {
         onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
         activeMode: platform === _platform.Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
-        className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className)
+        className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", selectable && "vkuiActionSheetItem--selectable", className)
     }), before && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiActionSheetItem__before"
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiActionSheetItem__container", !multiline && "vkuiActionSheetItem--ellipsis")
     }, /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiActionSheetItem__content", isCentered && "vkuiActionSheetItem--centered")
-    }, /*#__PURE__*/ _react.createElement(_text.Text, {
-        weight: mode === "cancel" ? "2" : undefined,
+    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_title.Title, {
+        className: "vkuiActionSheetItem__children",
+        weight: mode === "cancel" ? "2" : "3",
+        level: isCentered ? "2" : "3"
+    }, children) : /*#__PURE__*/ _react.createElement(_text.Text, {
         className: "vkuiActionSheetItem__children"
     }, children), meta && /*#__PURE__*/ _react.createElement(_text.Text, {
         className: "vkuiActionSheetItem__meta"

package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n extends React.HTMLAttributes<HTMLElement>,\n React.AnchorHTMLAttributes<HTMLElement>,\n Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' \| 'checked' \| 'value'> {\n mode?: 'default' \| 'destructive' \| 'cancel';\n before?: React.ReactNode;\n meta?: React.ReactNode;\n subtitle?: React.ReactNode;\n autoClose?: boolean;\n selectable?: boolean;\n disabled?: boolean;\n /*\n Все текстовые элементы при необходимости занимают несколько строк\n /\n multiline?: boolean;\n /\n Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n /\n onClick?: React.MouseEventHandler<HTMLElement>;\n onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n /\n Иконка для `checked` режима.\n /\n iconChecked?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n children,\n autoClose,\n mode = 'default',\n meta,\n subtitle,\n before,\n selectable,\n value,\n name,\n checked,\n defaultChecked,\n onChange,\n onClick,\n onImmediateClick,\n multiline = false,\n iconChecked: iconCheckedProp,\n className,\n ...restProps\n}: ActionSheetItemProps) => {\n const platform = usePlatform();\n const { onItemClick = () => noop, isDesktop } =\n React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n const iconChecked =\n iconCheckedProp \|\|\n (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n if (selectable) {\n Component = 'label';\n }\n\n const isRich = subtitle \|\| meta \|\| selectable;\n const isCentered = !isRich && !before && platform === Platform.IOS;\n\n return (\n <Tappable\n Component={Component}\n {...restProps}\n onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n className={classNames(\n styles['ActionSheetItem'],\n platform === Platform.IOS && styles['ActionSheetItem--ios'],\n mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n isRich && styles['ActionSheetItem--rich'],\n isDesktop && styles['ActionSheetItem--desktop'],\n className,\n )}\n >\n {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n <div\n className={classNames(\n styles['ActionSheetItem__container'],\n !multiline && styles['ActionSheetItem--ellipsis'],\n )}\n >\n <div\n className={classNames(\n styles['ActionSheetItem__content'],\n isCentered && styles['ActionSheetItem--centered'],\n )}\n >\n <~~Text~~\n weight={mode === 'cancel' ? '2' : ~~undefined~~}\n ~~className~~={~~styles[~~'~~ActionSheetItem__children~~']}\n >\n {children}\n </Text>\n {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n </div>\n {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n </div>\n {selectable && (\n <div className={styles['ActionSheetItem__after']}>\n <input\n type=\"radio\"\n className={styles['ActionSheetItem__radio']}\n name={name}\n value={value}\n onChange={onChange}\n onClick={onItemClick(noop, noop, Boolean(autoClose))}\n defaultChecked={defaultChecked}\n checked={checked}\n disabled={restProps.disabled}\n />\n <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n </div>\n )}\n </Tappable>\n );\n};\n\nexport { ActionSheetItem };\n"],"names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","Boolean","activeMode","undefined","classNames","div","~~Text~~","weight","Subhead","input","type","disabled"],"mappings":";;;;+~~BA8ISA~~;;;eAAAA;;;;;;;~~2DA9Ic~~;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;AA+~~BrB~~;;CAEC,GACD,IAAMA,kBAAkB,iBAmBI;QAlB1BC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,KAAK,qBACjBC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMZ,cACJC,mBACCW,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAG,AAAD;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM,KAAK;IAE/D,IAAI5B,YAAY;QACd2B,YAAY;IACd,CAAC;IAED,IAAME,SAAS/B,YAAYD,QAAQG;IACnC,IAAM8B,aAAa,CAACD,UAAU,CAAC9B,UAAUc,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJN,SAASN,aAAaM,UAAUY,YAAYZ,SAASC,kBAAkB2B,QAAQvC,WAAW;QAC1FwC,YAAYtB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCI,SAAS;QACrFzB,WAAW0B,IAAAA,gBAAU,yBAEnBxB,aAAakB,kBAAQ,CAACC,GAAG,gCACzBpC,SAAS,gDACTA,SAAS,0DACTyB,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,~~6CACAT~~;QAGDZ,wBAAU,qBAACuC;QAAI3B,SAAS;OAAsCZ,uBAC/D,qBAACuC;QACC3B,WAAW0B,IAAAA,gBAAU,oCAEnB,CAAC7B;qBAGH,qBAAC8B;QACC3B,WAAW0B,IAAAA,gBAAU,kCAEnBP;~~qBAGF~~,~~qBAACS~~,~~UAAI~~;~~QACHC~~,QAAQ5C,SAAS,WAAW,~~MAAMwC~~,~~SAAS~~;~~QAC3CzB~~,SAAS;~~OAERjB~~,~~WAEFG~~,sBAAQ,~~qBAAC0C~~,UAAI;~~QAAC5B~~,SAAS;OAAoCd,QAE7DC,0BAAY,~~qBAAC2C~~,gBAAO;~~QAAC9B~~,SAAS;OAAwCb,YAExEE,4BACC,qBAACsC;QAAI3B,SAAS;qBACZ,~~qBAAC+B~~;QACCC,MAAK;~~QACLhC~~,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASY,YAAYC,UAAI,EAAEA,UAAI,EAAEe,QAAQvC;QACzCS,gBAAgBA;QAChBD,SAASA;~~QACTyC~~,~~UAAUhC~~,~~UAAUgC~~,QAAQ;sBAE9B,~~qBAACN~~;QAAI3B,SAAS;OAAsCF;AAK9D"}
1	+ {"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n extends React.HTMLAttributes<HTMLElement>,\n React.AnchorHTMLAttributes<HTMLElement>,\n Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' \| 'checked' \| 'value'> {\n mode?: 'default' \| 'destructive' \| 'cancel';\n before?: React.ReactNode;\n meta?: React.ReactNode;\n subtitle?: React.ReactNode;\n autoClose?: boolean;\n selectable?: boolean;\n disabled?: boolean;\n /*\n Все текстовые элементы при необходимости занимают несколько строк\n /\n multiline?: boolean;\n /\n Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n /\n onClick?: React.MouseEventHandler<HTMLElement>;\n onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n /\n Иконка для `checked` режима.\n /\n iconChecked?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n children,\n autoClose,\n mode = 'default',\n meta,\n subtitle,\n before,\n selectable,\n value,\n name,\n checked,\n defaultChecked,\n onChange,\n onClick,\n onImmediateClick,\n multiline = false,\n iconChecked: iconCheckedProp,\n className,\n ...restProps\n}: ActionSheetItemProps) => {\n const platform = usePlatform();\n const { onItemClick = () => noop, isDesktop } =\n React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n const iconChecked =\n iconCheckedProp \|\|\n (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n if (selectable) {\n Component = 'label';\n }\n\n const isRich = subtitle \|\| meta \|\| selectable;\n const isCentered = !isRich && !before && platform === Platform.IOS;\n\n return (\n <Tappable\n Component={Component}\n {...restProps}\n onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n className={classNames(\n styles['ActionSheetItem'],\n platform === Platform.IOS && styles['ActionSheetItem--ios'],\n mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n isRich && styles['ActionSheetItem--rich'],\n isDesktop && styles['ActionSheetItem--desktop'],\n selectable && styles['ActionSheetItem--selectable'],\n className,\n )}\n >\n {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n <div\n className={classNames(\n styles['ActionSheetItem__container'],\n !multiline && styles['ActionSheetItem--ellipsis'],\n )}\n >\n <div\n className={classNames(\n styles['ActionSheetItem__content'],\n isCentered && styles['ActionSheetItem--centered'],\n )}\n >\n {platform === Platform.IOS ? (\n <Title\n className={styles['ActionSheetItem__children']}\n weight={mode === 'cancel' ? '2' : '3'}\n level={isCentered ? '2' : '3'}\n >\n {children}\n </Title>\n ) : (\n <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n )}\n {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n </div>\n {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n </div>\n {selectable && (\n <div className={styles['ActionSheetItem__after']}>\n <input\n type=\"radio\"\n className={styles['ActionSheetItem__radio']}\n name={name}\n value={value}\n onChange={onChange}\n onClick={onItemClick(noop, noop, Boolean(autoClose))}\n defaultChecked={defaultChecked}\n checked={checked}\n disabled={restProps.disabled}\n />\n <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n </div>\n )}\n </Tappable>\n );\n};\n\nexport { ActionSheetItem };\n"],"names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","Boolean","activeMode","undefined","classNames","div","Title","weight","level","Text","Subhead","input","type","disabled"],"mappings":";;;;+BAqJSA;;;eAAAA;;;;;;;2DArJc;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;qBACC;AA+BtB;;CAEC,GACD,IAAMA,kBAAkB,iBAmBI;QAlB1BC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,KAAK,qBACjBC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMZ,cACJC,mBACCW,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAG,AAAD;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM,KAAK;IAE/D,IAAI5B,YAAY;QACd2B,YAAY;IACd,CAAC;IAED,IAAME,SAAS/B,YAAYD,QAAQG;IACnC,IAAM8B,aAAa,CAACD,UAAU,CAAC9B,UAAUc,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJN,SAASN,aAAaM,UAAUY,YAAYZ,SAASC,kBAAkB2B,QAAQvC,WAAW;QAC1FwC,YAAYtB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCI,SAAS;QACrFzB,WAAW0B,IAAAA,gBAAU,yBAEnBxB,aAAakB,kBAAQ,CAACC,GAAG,gCACzBpC,SAAS,gDACTA,SAAS,0DACTyB,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,6CACApB,iDACAW;QAGDZ,wBAAU,qBAACuC;QAAI3B,SAAS;OAAsCZ,uBAC/D,qBAACuC;QACC3B,WAAW0B,IAAAA,gBAAU,oCAEnB,CAAC7B;qBAGH,qBAAC8B;QACC3B,WAAW0B,IAAAA,gBAAU,kCAEnBP;OAGDjB,aAAakB,kBAAQ,CAACC,GAAG,iBACxB,qBAACO,YAAK;QACJ5B,SAAS;QACT6B,QAAQ5C,SAAS,WAAW,MAAM,GAAG;QACrC6C,OAAOX,aAAa,MAAM,GAAG;OAE5BpC,0BAGH,qBAACgD,UAAI;QAAC/B,SAAS;OAAwCjB,SACxD,EACAG,sBAAQ,qBAAC6C,UAAI;QAAC/B,SAAS;OAAoCd,QAE7DC,0BAAY,qBAAC6C,gBAAO;QAAChC,SAAS;OAAwCb,YAExEE,4BACC,qBAACsC;QAAI3B,SAAS;qBACZ,qBAACiC;QACCC,MAAK;QACLlC,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASY,YAAYC,UAAI,EAAEA,UAAI,EAAEe,QAAQvC;QACzCS,gBAAgBA;QAChBD,SAASA;QACT2C,UAAUlC,UAAUkC,QAAQ;sBAE9B,qBAACR;QAAI3B,SAAS;OAAsCF;AAK9D"}

package/dist/cjs/components/Banner/Banner.js CHANGED Viewed

@@ -53,14 +53,14 @@ var Banner = function(_param) {
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(HeaderTypography, {
-        Component: "span",
-        className: "vkuiBanner__header",
+        Component: "p",
         weight: "2",
         level: size === "m" ? "2" : "1"
     }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
-        Component: "span",
+        Component: "p",
         className: "vkuiBanner__subheader"
     }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_text.Text, {
+        Component: "p",
         className: "vkuiBanner__text"
     }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__actions"

package/dist/cjs/components/Banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon24Cancel,\n Icon24Chevron,\n Icon24DismissDark,\n Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n /*\n Тип баннера.\n /\n mode?: 'tint' \| 'image';\n size?: 's' \| 'm';\n /\n Тип действия в правой части баннера.\n \n - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n /\n asideMode?: 'dismiss' \| 'expand';\n /\n Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n /\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /\n `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n /\n Содержимое, отображаемое в левой части баннера.\n /\n before?: React.ReactNode;\n /\n Заголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n /\n header?: React.ReactNode;\n /\n Подзаголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n /\n subheader?: React.ReactNode;\n /\n Текст баннера. <br />\n * Это свойство следует использовать без указания `header` и `subheader`.\n /\n text?: React.ReactNode;\n /\n При использовании `mode=\"image\"`.\n \n - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n /\n imageTheme?: 'light' \| 'dark';\n /\n При использовании `mode=\"image\"`.\n \n Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n /\n background?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n \n - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n * - `mode=\"primary\"`\n * - `mode=\"secondary\"`\n * - В режиме `image` с тёмным фоном используйте с параметрами:\n * - `appearance=\"overlay\"`.\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"m\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n mode = 'tint',\n imageTheme = 'dark',\n size = 's',\n before,\n asideMode,\n header,\n subheader,\n text,\n children,\n background,\n actions,\n onDismiss,\n dismissLabel = 'Скрыть',\n className,\n getRootRef,\n ...restProps\n}: BannerProps) => {\n const platform = usePlatform();\n\n const HeaderTypography = size === 'm' ? Title : Headline;\n const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n const content = (\n ~~<React.Fragment>\~~n {mode === 'image' && background && (\n <div aria-hidden className={styles['Banner__bg']}>\n {background}\n </div>\n )}\n\n {before && <div className={styles['Banner__before']}>{before}</div>}\n\n <div className={styles['Banner__content']}>\n {hasReactNode(header) && (\n <HeaderTypography\n Component=\"~~span~~\"~~\n className={styles['Banner__header']}\n~~ weight=\"2\"\n level={size === 'm' ? '2' : '1'}\n >\n {header}\n </HeaderTypography>\n )}\n {hasReactNode(subheader) && (\n <SubheaderTypography Component=\"~~span~~\" className={styles['Banner__subheader']}>\n {subheader}\n </SubheaderTypography>\n )}\n {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n <div className={styles['Banner__actions']}>{actions}</div>\n )}\n </div>\n ~~</React.Fragment>\~~n );\n\n return (\n <section\n {...restProps}\n className={classNames(\n styles['Banner'],\n platform === Platform.IOS && styles['Banner--ios'],\n mode === 'image' && styles['Banner--mode-image'],\n {\n s: styles['Banner--size-s'],\n m: styles['Banner--size-m'],\n }[size],\n mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n className,\n )}\n ref={getRootRef}\n >\n {asideMode === 'expand' ? (\n <Tappable\n className={styles['Banner__in']}\n activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n role=\"button\"\n >\n {content}\n\n <div className={styles['Banner__aside']}>\n <Icon24Chevron />\n </div>\n </Tappable>\n ) : (\n <div className={styles['Banner__in']}>\n {content}\n\n {asideMode === 'dismiss' && (\n <div className={styles['Banner__aside']}>\n <IconButton\n aria-label={dismissLabel}\n className={styles['Banner__dismiss']}\n onClick={onDismiss}\n hoverMode=\"opacity\"\n hasActive={false}\n >\n {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n </IconButton>\n </div>\n )}\n </div>\n )}\n </section>\n );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","~~React","Fragment","~~div","aria-hidden","hasReactNode","Component","weight","level","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;2DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBhB,SAAS,MAAMiB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBnB,SAAS,MAAMoB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBxB,SAAS,UAAUyB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,~~qBAACC~~,~~OAAMC,QAAQ,QACZ7B,~~SAAS,WAAWS,4BACnB,~~qBAACqB~~;QAAIC,eAAAA,IAAW;~~QAAClB~~,SAAS;OACvBJ,aAIJN,wBAAU,~~qBAAC2B~~;~~QAAIjB~~,SAAS;OAA6BV,uBAEtD,~~qBAAC2B~~;~~QAAIjB~~,SAAS;~~OACXmB~~,IAAAA,kBAAY,~~EAAC3B~~,yBACZ,qBAACa;~~QACCe~~,WAAU;~~QACVpB~~,~~SAAS;QACTqB,~~QAAO;~~QACPC~~,~~OAAOjC~~,SAAS,MAAM,MAAM,GAAG;~~OAE9BG~~,~~SAGJ2B~~,IAAAA,kBAAY,~~EAAC1B~~,4BACZ,qBAACe;~~QAAoBY~~,WAAU;~~QAAOpB~~,SAAS;~~OAC5CP~~,~~YAGJ0B~~,IAAAA,kBAAY,~~EAACzB~~,~~uBAAS~~,qBAACe,UAAI;~~QAACT~~,SAAS;~~OAA2BN~~,~~OAChEyB~~,IAAAA,kBAAY,~~EAACtB~~,~~YAAYkB~~,~~OAAMQ~~,QAAQ,CAACC,KAAK,~~CAAC3B~~,WAAW,mBACxD,~~qBAACoB~~;~~QAAIjB~~,SAAS;OAA8BH;IAMpD,qBACE,~~qBAAC4B~~,~~gDACKvB~~;QACJF,~~WAAW0B~~,IAAAA,gBAAU,~~gBAEnBvB~~,~~aAAawB~~,kBAAQ,CAACC,GAAG,~~uBACzBzC~~,SAAS,qCACT;~~YACE0C~~,CAAC;YACDC,CAAC;QACH,CAAC,~~CAACzC~~,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;~~QAEF+B~~,~~KAAK9B~~;QAEJV,cAAc,yBACb,~~qBAACyC~~,kBAAQ;~~QACPhC~~,SAAS;~~QACTiC~~,~~YAAY9B~~,~~aAAawB~~,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEM,MAAK;~~OAEJpB~~,uBAED,~~qBAACG~~;~~QAAIjB~~,SAAS;qBACZ,~~qBAACmC~~,oBAAa,0BAIlB,~~qBAAClB~~;~~QAAIjB~~,SAAS;OACXc,SAEAvB,cAAc,2BACb,~~qBAAC0B~~;~~QAAIjB~~,SAAS;qBACZ,~~qBAACoC~~,sBAAU;QACTC,~~cAAYtC~~;QACZC,SAAS;~~QACTsC~~,~~SAASxC~~;~~QACTyC~~,WAAU;QACVC,WAAW,KAAK;~~OAEfrC~~,~~aAAawB~~,kBAAQ,CAACC,GAAG,iBAAG,~~qBAACjB~~,sCAAoB,~~qBAAC8B~~,mBAAY,OAAG,GAK3E;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon24Cancel,\n Icon24Chevron,\n Icon24DismissDark,\n Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n /*\n Тип баннера.\n /\n mode?: 'tint' \| 'image';\n size?: 's' \| 'm';\n /\n Тип действия в правой части баннера.\n \n - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n /\n asideMode?: 'dismiss' \| 'expand';\n /\n Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n /\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /\n `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n /\n Содержимое, отображаемое в левой части баннера.\n /\n before?: React.ReactNode;\n /\n Заголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n /\n header?: React.ReactNode;\n /\n Подзаголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n /\n subheader?: React.ReactNode;\n /\n Текст баннера. <br />\n * Это свойство следует использовать без указания `header` и `subheader`.\n /\n text?: React.ReactNode;\n /\n При использовании `mode=\"image\"`.\n \n - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n /\n imageTheme?: 'light' \| 'dark';\n /\n При использовании `mode=\"image\"`.\n \n Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n /\n background?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n \n - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n * - `mode=\"primary\"`\n * - `mode=\"secondary\"`\n * - В режиме `image` с тёмным фоном используйте с параметрами:\n * - `appearance=\"overlay\"`.\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"m\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n mode = 'tint',\n imageTheme = 'dark',\n size = 's',\n before,\n asideMode,\n header,\n subheader,\n text,\n children,\n background,\n actions,\n onDismiss,\n dismissLabel = 'Скрыть',\n className,\n getRootRef,\n ...restProps\n}: BannerProps) => {\n const platform = usePlatform();\n\n const HeaderTypography = size === 'm' ? Title : Headline;\n const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n const content = (\n <>\n {mode === 'image' && background && (\n <div aria-hidden className={styles['Banner__bg']}>\n {background}\n </div>\n )}\n\n {before && <div className={styles['Banner__before']}>{before}</div>}\n\n <div className={styles['Banner__content']}>\n {hasReactNode(header) && (\n <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n {header}\n </HeaderTypography>\n )}\n {hasReactNode(subheader) && (\n <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n {subheader}\n </SubheaderTypography>\n )}\n {hasReactNode(text) && (\n <Text Component=\"p\" className={styles['Banner__text']}>\n {text}\n </Text>\n )}\n {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n <div className={styles['Banner__actions']}>{actions}</div>\n )}\n </div>\n </>\n );\n\n return (\n <section\n {...restProps}\n className={classNames(\n styles['Banner'],\n platform === Platform.IOS && styles['Banner--ios'],\n mode === 'image' && styles['Banner--mode-image'],\n {\n s: styles['Banner--size-s'],\n m: styles['Banner--size-m'],\n }[size],\n mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n className,\n )}\n ref={getRootRef}\n >\n {asideMode === 'expand' ? (\n <Tappable\n className={styles['Banner__in']}\n activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n role=\"button\"\n >\n {content}\n\n <div className={styles['Banner__aside']}>\n <Icon24Chevron />\n </div>\n </Tappable>\n ) : (\n <div className={styles['Banner__in']}>\n {content}\n\n {asideMode === 'dismiss' && (\n <div className={styles['Banner__aside']}>\n <IconButton\n aria-label={dismissLabel}\n className={styles['Banner__dismiss']}\n onClick={onDismiss}\n hoverMode=\"opacity\"\n hasActive={false}\n >\n {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n </IconButton>\n </div>\n )}\n </div>\n )}\n </section>\n );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;2DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBhB,SAAS,MAAMiB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBnB,SAAS,MAAMoB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBxB,SAAS,UAAUyB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA,IAAW;QAAChB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,kBAAY,EAACzB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM,GAAG;OACvEG,SAGJyB,IAAAA,kBAAY,EAACxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,kBAAY,EAACvB,uBACZ,qBAACe,UAAI;QAACS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,kBAAY,EAACpB,YAAYwB,OAAMC,QAAQ,CAACC,KAAK,CAAC1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,gDACKtB;QACJF,WAAWyB,IAAAA,gBAAU,gBAEnBtB,aAAauB,kBAAQ,CAACC,GAAG,uBACzBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC,kBAAQ;QACP/B,SAAS;QACTgC,YAAY7B,aAAauB,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC,oBAAa,0BAIlB,qBAACnB;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC,sBAAU;QACTC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW,KAAK;OAEfpC,aAAauB,kBAAQ,CAACC,GAAG,iBAAG,qBAAChB,sCAAoB,qBAAC6B,mBAAY,OAAG,GAK3E;AAGP"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { DraggableProps } from '../useDraggable';
-type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
-export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, className, ...restProps }: CellDraggerProps) => JSX.Element;
+type CellDraggerProps = DraggableProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;
+export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps }: CellDraggerProps) => JSX.Element;
 export {};

package/dist/cjs/components/Cell/CellDragger/CellDragger.js CHANGED Viewed

@@ -18,22 +18,26 @@ var _usePlatform = require("../../../hooks/usePlatform");
 var _platform = require("../../../lib/platform");
 var _touch = require("../../Touch/Touch");
 var CellDragger = function(_param) {
-    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
         "onDragStart",
         "onDragMove",
         "onDragEnd",
+        "onClick",
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var onClick = _react.useCallback(function(e) {
-        e.preventDefault();
-    }, []);
+    var handleClick = function(event) {
+        event.preventDefault();
+        if (onClick) {
+            onClick(event);
+        }
+    };
     return /*#__PURE__*/ _react.createElement(_touch.Touch, _objectSpread({
         className: (0, _vkjs.classNames)("vkuiCellDragger", className),
         onStart: onDragStart,
         onMoveY: onDragMove,
         onEnd: onDragEnd,
-        onClick: onClick
+        onClick: handleClick
     }, restProps), platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_icons.Icon24ReorderIos, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Reorder, null));
 };

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\n className,\n ...restProps\n}: CellDraggerProps) => {\n const platform = usePlatform();\n\n const ~~onClick~~ = ~~React.useCallback~~((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <Touch\n className={classNames(styles['CellDragger'], className)}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={~~onClick~~}\n {...restProps}\n >\n {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","~~onClick~~","~~React~~","~~useCallback","e","~~preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+~~BAWaA~~;;;eAAAA;;;;;;~~2DAXU~~;qBACyB;oBACrB;2BACC;wBACH;qBACH;~~AAMf~~,IAAMA,cAAc,~~iBAMH~~;~~QALtBC~~,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGC;~~QAJHJ~~;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,~~UAAUC~~,~~OAAMC,WAAW,CAAC,~~SAACC,~~GAAwB~~;~~QACzDA~~,~~EAAEC~~,cAAc;~~IAClB~~,~~GAAG~~,~~EAAE~~;~~IAEL~~,qBACE,~~qBAACC~~,YAAK;~~QACJT~~,~~WAAWU~~,IAAAA,gBAAU,~~qBAAwBV~~;~~QAC7CW~~,~~SAASd~~;~~QACTe~~,~~SAASd~~;~~QACTe~~,~~OAAOd~~;~~QACPK~~,~~SAASA~~;OACLH,YAEHC,~~aAAaY~~,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa,OAAG;AAG3E"}
1	+ {"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\n onClick,\n className,\n ...restProps\n}: CellDraggerProps) => {\n const platform = usePlatform();\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n };\n\n return (\n <Touch\n className={classNames(styles['CellDragger'], className)}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={handleClick}\n {...restProps}\n >\n {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;2DAZU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAOf,IAAMA,cAAc,iBAOH;QANtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,cAAc,SAACC,OAAyC;QAC5DA,MAAMC,cAAc;QACpB,IAAIP,SAAS;YACXA,QAAQM;QACV,CAAC;IACH;IAEA,qBACE,qBAACE,YAAK;QACJP,WAAWQ,IAAAA,gBAAU,qBAAwBR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa,OAAG;AAG3E"}

package/dist/cjs/components/Cell/useDraggable.d.ts CHANGED Viewed

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { TouchEvent } from '../Touch/Touch';
 import { CellProps } from './Cell';
 export interface DraggableProps {
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    onDragMove: (e: TouchEvent) => void;
+    onDragStart(event: TouchEvent): void;
+    onDragEnd(event: TouchEvent): void;
+    onDragMove(event: TouchEvent): void;
 }
 interface UseDraggableProps extends DraggableProps {
     dragging: boolean;

package/dist/cjs/components/Cell/useDraggable.js CHANGED Viewed

@@ -19,12 +19,14 @@ var useDraggable = function(param) {
     var _React_useState3 = _slicedToArray(_react.useState(0), 2), dragEndIndex = _React_useState3[0], setDragEndIndex = _React_useState3[1];
     var _React_useState4 = _slicedToArray(_react.useState(0), 2), dragShift = _React_useState4[0], setDragShift = _React_useState4[1];
     var _React_useState5 = _slicedToArray(_react.useState(undefined), 2), dragDirection = _React_useState5[0], setDragDirection = _React_useState5[1];
-    var onDragStart = function() {
+    var onDragStart = function(event) {
         var _rootEl_parentElement;
         var rootEl = rootElRef.current;
         if (!rootEl) {
             return;
         }
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         setDragging(true);
         var _siblings = [];
         if ((_rootEl_parentElement = rootEl.parentElement) === null || _rootEl_parentElement === void 0 ? void 0 : _rootEl_parentElement.childNodes) {
@@ -36,14 +38,15 @@ var useDraggable = function(param) {
         setSiblings(_siblings);
         setDragShift(0);
     };
-    var onDragMove = function(e) {
-        e.originalEvent.preventDefault();
+    var onDragMove = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var rootEl = rootElRef.current;
         if (rootEl) {
-            rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+            rootEl.style.transform = "translateY(".concat(event.shiftY, "px)");
             var rootGesture = rootEl.getBoundingClientRect();
-            setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-            setDragShift(e.shiftY);
+            setDragDirection(dragShift - event.shiftY < 0 ? "down" : "up");
+            setDragShift(event.shiftY);
             setDragEndIndex(dragStartIndex);
             siblings.forEach(function(sibling, siblingIndex) {
                 var siblingGesture = sibling.getBoundingClientRect();
@@ -78,7 +81,9 @@ var useDraggable = function(param) {
             });
         }
     };
-    var onDragEnd = function() {
+    var onDragEnd = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var _ref = [
             dragStartIndex,
             dragEndIndex

package/dist/cjs/components/Cell/useDraggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n onDragStart: () => void;\n onDragEnd: () => void;\n onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n rootElRef,\n onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n rootElRef: React.MutableRefObject<T \| null>;\n}) => {\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n const [dragShift, setDragShift] = React.useState<number>(0);\n const [dragDirection, setDragDirection] = React.useState<'down' \| 'up' \| undefined>(undefined);\n\n const onDragStart = () => {\n const rootEl = rootElRef.current;\n if (!rootEl) {\n return;\n }\n\n setDragging(true);\n\n let _siblings: HTMLElement[] = [];\n if (rootEl.parentElement?.childNodes) {\n _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n }\n const idx = _siblings.indexOf(rootEl);\n\n setDragStartIndex(idx);\n setDragEndIndex(idx);\n setSiblings(_siblings);\n setDragShift(0);\n };\n\n const onDragMove = (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n\n const rootEl = rootElRef.current;\n\n if (rootEl) {\n rootEl.style.transform = `translateY(${e.shiftY}px)`;\n const rootGesture = rootEl.getBoundingClientRect();\n\n setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n setDragShift(e.shiftY);\n setDragEndIndex(dragStartIndex);\n\n siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n const siblingGesture = sibling.getBoundingClientRect();\n const siblingHalfHeight = siblingGesture.height / 2;\n\n const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n if (dragStartIndex < siblingIndex) {\n if (rootOverSibling) {\n if (dragDirection === 'down') {\n sibling.style.transform = 'translateY(-100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n }\n if (rootUnderSibling && dragDirection === 'up') {\n sibling.style.transform = 'translateY(0)';\n }\n } else if (dragStartIndex > siblingIndex) {\n if (rootUnderSibling) {\n if (dragDirection === 'up') {\n sibling.style.transform = 'translateY(100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n }\n if (rootOverSibling && dragDirection === 'down') {\n sibling.style.transform = 'translateY(0)';\n }\n }\n });\n }\n };\n\n const onDragEnd = () => {\n const [from, to] = [dragStartIndex, dragEndIndex];\n\n siblings.forEach((sibling: HTMLElement) => {\n sibling.style.transform = '';\n });\n\n setSiblings([]);\n setDragEndIndex(0);\n setDragStartIndex(0);\n setDragDirection(undefined);\n setDragShift(0);\n\n setDragging(false);\n\n onDragFinish && onDragFinish({ from, to });\n };\n\n const useDraggableProps: UseDraggableProps = {\n onDragStart,\n onDragMove,\n onDragEnd,\n dragging,\n };\n\n return useDraggableProps;\n};\n"],"names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","~~e","originalEvent","preventDefault","~~style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;2DAdU;AAchB,IAAMA,eAAe,gBAKtB;QAJJC,kBAAAA,WACAC,qBAAAA;IAIA,IAAgCC,iCAAAA,OAAMC,QAAQ,CAAU,KAAK,OAAtDC,WAAyBF,oBAAfG,cAAeH;IAEhC,IAAgCA,kCAAAA,OAAMC,QAAQ,CAAgB,EAAE,OAAzDG,WAAyBJ,qBAAfK,cAAeL;IAChC,IAA4CA,kCAAAA,OAAMC,QAAQ,CAAS,QAA5DK,iBAAqCN,qBAArBO,oBAAqBP;IAC5C,IAAwCA,kCAAAA,OAAMC,QAAQ,CAAS,QAAxDO,eAAiCR,qBAAnBS,kBAAmBT;IACxC,IAAkCA,kCAAAA,OAAMC,QAAQ,CAAS,QAAlDS,YAA2BV,qBAAhBW,eAAgBX;IAClC,IAA0CA,kCAAAA,OAAMC,QAAQ,CAA4BW,gBAA7EC,gBAAmCb,qBAApBc,mBAAoBd;IAE1C,IAAMe,cAAc,~~WAAM~~;~~YASpBC~~;~~QARJ~~,IAAMA,~~SAASlB~~,~~UAAUmB~~,OAAO;QAChC,IAAI,CAACD,QAAQ;YACX;QACF,CAAC;~~QAEDb~~,YAAY,IAAI;QAEhB,~~IAAIe~~,YAA2B,EAAE;QACjC,~~IAAIF~~,CAAAA,wBAAAA,~~OAAOG~~,aAAa,~~cAApBH~~,mCAAAA,KAAAA,IAAAA,~~sBAAsBI~~,UAAU,EAAE;YACpCF,YAAYG,MAAMC,IAAI,~~CAACN~~,~~OAAOG~~,aAAa,CAACI,QAAQ;QACtD,CAAC;QACD,IAAMC,MAAMN,UAAUO,OAAO,~~CAACT~~;~~QAE9BT~~,~~kBAAkBiB~~;~~QAClBf~~,~~gBAAgBe~~;~~QAChBnB~~,~~YAAYa~~;~~QACZP~~,aAAa;IACf;IAEA,~~IAAMe~~,aAAa,~~SAACC~~,~~GAAkB~~;~~QACpCA~~,~~EAAEC~~,aAAa,CAACC,cAAc;~~QAE9B~~,~~IAAMb~~,~~SAASlB~~,~~UAAUmB~~,OAAO;QAEhC,IAAID,QAAQ;YACVA,OAAOc,KAAK,CAACC,SAAS,GAAG,AAAC,~~cAAsB~~,~~OAATJ~~,~~EAAEK~~,MAAM,EAAC;~~YAChD~~,IAAMC,cAAcjB,OAAOkB,qBAAqB;~~YAEhDpB~~,iBAAiBJ,~~YAAYiB~~,~~EAAEK~~,MAAM,GAAG,IAAI,SAAS,IAAI;~~YACzDrB~~,~~aAAagB~~,~~EAAEK~~,MAAM;~~YACrBvB~~,gBAAgBH;YAEhBF,~~SAAS+B~~,OAAO,CAAC,SAACC,SAAsBC,cAAyB;gBAC/D,IAAMC,iBAAiBF,QAAQF,qBAAqB;gBACpD,IAAMK,oBAAoBD,eAAeE,MAAM,GAAG;gBAElD,IAAMC,kBAAkBR,YAAYS,MAAM,GAAGJ,eAAeK,GAAG,GAAGJ;gBAClE,IAAMK,mBAAmBX,YAAYU,GAAG,GAAGL,eAAeI,MAAM,GAAGH;gBAEnE,~~IAAIjC~~,~~iBAAiB+B~~,cAAc;oBACjC,IAAII,iBAAiB;wBACnB,~~IAAI5B~~,kBAAkB,QAAQ;~~4BAC5BuB~~,QAAQN,KAAK,CAACC,SAAS,GAAG;wBAC5B,CAAC;~~wBAEDtB~~,gBAAgB,SAACD;mCAAiBA,eAAe;;oBACnD,CAAC;oBACD,~~IAAIoC~~,~~oBAAoB/B~~,kBAAkB,MAAM;~~wBAC9CuB~~,QAAQN,KAAK,CAACC,SAAS,GAAG;oBAC5B,CAAC;gBACH,OAAO,~~IAAIzB~~,~~iBAAiB+B~~,cAAc;oBACxC,IAAIO,kBAAkB;wBACpB,~~IAAI/B~~,kBAAkB,MAAM;~~4BAC1BuB~~,QAAQN,KAAK,CAACC,SAAS,GAAG;wBAC5B,CAAC;~~wBAEDtB~~,gBAAgB,SAACD;mCAAiBA,eAAe;;oBACnD,CAAC;oBACD,~~IAAIiC~~,~~mBAAmB5B~~,kBAAkB,QAAQ;wBAC/~~CuB~~,QAAQN,KAAK,CAACC,SAAS,GAAG;oBAC5B,CAAC;gBACH,CAAC;YACH;QACF,CAAC;IACH;IAEA,IAAMc,YAAY,~~WAAM~~;~~QACtB~~,IAAmB,OAAA;~~YAACvC~~;YAAgBE;SAAa,~~EAA1Cc~~,OAAY,~~SAANwB~~,KAAM;~~QAEnB1C~~,~~SAAS+B~~,OAAO,CAAC,SAACC,SAAyB;YACzCA,QAAQN,KAAK,CAACC,SAAS,GAAG;QAC5B;~~QAEA1B~~,YAAY,EAAE;QACdI,gBAAgB;QAChBF,kBAAkB;QAClBO,iBAAiBF;QACjBD,aAAa;QAEbR,YAAY,KAAK;QAEjBJ,gBAAgBA,aAAa;~~YAAEuB~~,MAAAA;~~YAAMwB~~,IAAAA;QAAG;IAC1C;IAEA,IAAMC,oBAAuC;~~QAC3ChC~~,aAAAA;~~QACAW~~,YAAAA;~~QACAmB~~,WAAAA;~~QACA3C~~,UAAAA;IACF;IAEA,~~OAAO6C~~;AACT"}
1	+ {"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n onDragStart(event: TouchEvent): void;\n onDragEnd(event: TouchEvent): void;\n onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n rootElRef,\n onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n rootElRef: React.MutableRefObject<T \| null>;\n}) => {\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n const [dragShift, setDragShift] = React.useState<number>(0);\n const [dragDirection, setDragDirection] = React.useState<'down' \| 'up' \| undefined>(undefined);\n\n const onDragStart = (event: TouchEvent) => {\n const rootEl = rootElRef.current;\n if (!rootEl) {\n return;\n }\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n\n setDragging(true);\n\n let _siblings: HTMLElement[] = [];\n if (rootEl.parentElement?.childNodes) {\n _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n }\n const idx = _siblings.indexOf(rootEl);\n\n setDragStartIndex(idx);\n setDragEndIndex(idx);\n setSiblings(_siblings);\n setDragShift(0);\n };\n\n const onDragMove = (event: TouchEvent) => {\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n\n const rootEl = rootElRef.current;\n\n if (rootEl) {\n rootEl.style.transform = `translateY(${event.shiftY}px)`;\n const rootGesture = rootEl.getBoundingClientRect();\n\n setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n setDragShift(event.shiftY);\n setDragEndIndex(dragStartIndex);\n\n siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n const siblingGesture = sibling.getBoundingClientRect();\n const siblingHalfHeight = siblingGesture.height / 2;\n\n const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n if (dragStartIndex < siblingIndex) {\n if (rootOverSibling) {\n if (dragDirection === 'down') {\n sibling.style.transform = 'translateY(-100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n }\n if (rootUnderSibling && dragDirection === 'up') {\n sibling.style.transform = 'translateY(0)';\n }\n } else if (dragStartIndex > siblingIndex) {\n if (rootUnderSibling) {\n if (dragDirection === 'up') {\n sibling.style.transform = 'translateY(100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n }\n if (rootOverSibling && dragDirection === 'down') {\n sibling.style.transform = 'translateY(0)';\n }\n }\n });\n }\n };\n\n const onDragEnd = (event: TouchEvent) => {\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n\n const [from, to] = [dragStartIndex, dragEndIndex];\n\n siblings.forEach((sibling: HTMLElement) => {\n sibling.style.transform = '';\n });\n\n setSiblings([]);\n setDragEndIndex(0);\n setDragStartIndex(0);\n setDragDirection(undefined);\n setDragShift(0);\n\n setDragging(false);\n\n onDragFinish && onDragFinish({ from, to });\n };\n\n const useDraggableProps: UseDraggableProps = {\n onDragStart,\n onDragMove,\n onDragEnd,\n dragging,\n };\n\n return useDraggableProps;\n};\n"],"names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}

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

@@ -85,7 +85,7 @@ var ChipsSelect = function(props) {
     var showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
     var handleFocus = function(e) {
         setOpened(true);
-        setFocusedOptionIndex(0);
+        setFocusedOptionIndex(null);
         onFocus(e);
     };
     var handleClickOutside = function(e) {
@@ -128,15 +128,13 @@ var ChipsSelect = function(props) {
         setFocusedOptionIndex(index);
     };
     var focusOption = function(nextIndex, type) {
-        var index = typeof nextIndex !== "number" ? -1 : nextIndex;
+        var index = nextIndex === null ? -1 : nextIndex;
         if (type === FOCUS_ACTION_NEXT) {
             index = index + 1;
         } else if (type === FOCUS_ACTION_PREV) {
             index = index - 1;
         }
-        if (focusedOptionIndex != null) {
-            focusOptionByIndex(index, focusedOptionIndex);
-        }
+        focusOptionByIndex(index, focusedOptionIndex);
     };
     var handleKeyDown = function(e) {
         onKeyDown(e);
@@ -191,21 +189,6 @@ var ChipsSelect = function(props) {
         filteredOptions,
         setFocusedOption
     ]);
-    _react.useEffect(function() {
-        var index = focusedOption ? filteredOptions.findIndex(function(param) {
-            var value = param.value;
-            return value === focusedOption.value;
-        }) : -1;
-        if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {
-            setFocusedOption(filteredOptions[0]);
-        }
-    }, [
-        filteredOptions,
-        focusedOption,
-        showCreatable,
-        closeAfterSelect,
-        setFocusedOption
-    ]);
     (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", handleClickOutside);
     var renderChipWrapper = function(renderChipProps) {
         if (renderChipProps === undefined) {

package/dist/cjs/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\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 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(0);\n onFocus!(e);\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) => {\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 = typeof nextIndex !== 'number' ? -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 if (focusedOptionIndex != null) {\n focusOptionByIndex(index, focusedOptionIndex);\n }\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 && 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 }\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 React.useEffect(() => {\n const index = focusedOption\n ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n : -1;\n\n if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {\n setFocusedOption(filteredOptions[0]);\n }\n }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, 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: 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 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":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","findIndex","value","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","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\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 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 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 && 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 }\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: 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 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":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

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

@@ -278,12 +278,24 @@ function CustomSelect(props) {
             var item = options[focusedOptionIndex];
             setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
             close();
+            var shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
+            if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
+                var _selectElRef_current;
+                var event = new Event("change", {
+                    bubbles: true
+                });
+                (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
+            }
         }
     }, [
         close,
         focusedOptionIndex,
         isValidIndex,
-        options
+        options,
+        selectElRef,
+        isControlledOutside,
+        props.value,
+        nativeSelectValue
     ]);
     var open = _react.useCallback(function() {
         setOpened(true);
@@ -542,7 +554,9 @@ function CustomSelect(props) {
         renderDropdown,
         renderOption
     ]);
-    var clearButtonShown = allowClearButton && !opened && nativeSelectValue !== "";
+    var controlledValueSet = isControlledOutside && props.value !== "";
+    var uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== "";
+    var clearButtonShown = allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
     var clearButton = _react.useMemo(function() {
         if (!clearButtonShown) {
             return null;