@vkontakte/vkui 5.5.1 → 5.5.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 (149) hide show
  1. package/dist/cjs/components/Banner/Banner.d.ts +3 -6
  2. package/dist/cjs/components/Banner/Banner.js.map +1 -1
  3. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +13 -9
  4. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  5. package/dist/cjs/components/CustomSelect/CustomSelect.js +23 -17
  6. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  7. package/dist/cjs/components/FixedLayout/FixedLayout.d.ts +6 -1
  8. package/dist/cjs/components/FixedLayout/FixedLayout.js +11 -4
  9. package/dist/cjs/components/FixedLayout/FixedLayout.js.map +1 -1
  10. package/dist/cjs/components/FormItem/FormItem.d.ts +1 -1
  11. package/dist/cjs/components/FormItem/FormItem.js +6 -3
  12. package/dist/cjs/components/FormItem/FormItem.js.map +1 -1
  13. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +7 -7
  14. package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  15. package/dist/cjs/components/ImageBase/ImageBase.d.ts +2 -2
  16. package/dist/cjs/components/ImageBase/ImageBase.js.map +1 -1
  17. package/dist/cjs/components/ModalCard/ModalCard.d.ts +1 -1
  18. package/dist/cjs/components/ModalCard/ModalCard.js +4 -2
  19. package/dist/cjs/components/ModalCard/ModalCard.js.map +1 -1
  20. package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.d.ts +12 -0
  21. package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.js +35 -0
  22. package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.js.map +1 -0
  23. package/dist/cjs/components/PanelHeader/PanelHeader.d.ts +6 -4
  24. package/dist/cjs/components/PanelHeader/PanelHeader.js +3 -23
  25. package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
  26. package/dist/cjs/components/PullToRefresh/PullToRefresh.js +2 -1
  27. package/dist/cjs/components/PullToRefresh/PullToRefresh.js.map +1 -1
  28. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js +3 -3
  29. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  30. package/dist/cjs/components/Select/Select.d.ts +1 -1
  31. package/dist/cjs/components/Select/Select.js +22 -11
  32. package/dist/cjs/components/Select/Select.js.map +1 -1
  33. package/dist/cjs/components/Spinner/Spinner.d.ts +1 -1
  34. package/dist/cjs/components/Spinner/Spinner.js +14 -4
  35. package/dist/cjs/components/Spinner/Spinner.js.map +1 -1
  36. package/dist/cjs/components/TabbarItem/TabbarItem.d.ts +1 -1
  37. package/dist/cjs/components/TabbarItem/TabbarItem.js +4 -2
  38. package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
  39. package/dist/cjs/components/Tappable/Tappable.d.ts +4 -4
  40. package/dist/cjs/components/Tappable/Tappable.js.map +1 -1
  41. package/dist/cjs/hooks/useAutoDetectAppearance.js +9 -13
  42. package/dist/cjs/hooks/useAutoDetectAppearance.js.map +1 -1
  43. package/dist/cjs/lib/platform.d.ts +2 -1
  44. package/dist/cjs/lib/platform.js.map +1 -1
  45. package/dist/cjs/types.d.ts +12 -0
  46. package/dist/cjs/types.js.map +1 -1
  47. package/dist/components/Banner/Banner.d.ts +3 -6
  48. package/dist/components/Banner/Banner.js.map +1 -1
  49. package/dist/components/ChipsSelect/ChipsSelect.js +13 -9
  50. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  51. package/dist/components/CustomSelect/CustomSelect.js +23 -17
  52. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  53. package/dist/components/FixedLayout/FixedLayout.d.ts +6 -1
  54. package/dist/components/FixedLayout/FixedLayout.js +11 -4
  55. package/dist/components/FixedLayout/FixedLayout.js.map +1 -1
  56. package/dist/components/FormItem/FormItem.d.ts +1 -1
  57. package/dist/components/FormItem/FormItem.js +6 -3
  58. package/dist/components/FormItem/FormItem.js.map +1 -1
  59. package/dist/components/HorizontalScroll/HorizontalScroll.js +7 -7
  60. package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  61. package/dist/components/ImageBase/ImageBase.d.ts +2 -2
  62. package/dist/components/ImageBase/ImageBase.js.map +1 -1
  63. package/dist/components/ModalCard/ModalCard.d.ts +1 -1
  64. package/dist/components/ModalCard/ModalCard.js +4 -2
  65. package/dist/components/ModalCard/ModalCard.js.map +1 -1
  66. package/dist/components/PanelHeader/LegacyPanelHeaderContent.d.ts +12 -0
  67. package/dist/components/PanelHeader/LegacyPanelHeaderContent.js +27 -0
  68. package/dist/components/PanelHeader/LegacyPanelHeaderContent.js.map +1 -0
  69. package/dist/components/PanelHeader/PanelHeader.d.ts +6 -4
  70. package/dist/components/PanelHeader/PanelHeader.js +1 -21
  71. package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
  72. package/dist/components/PullToRefresh/PullToRefresh.js +2 -1
  73. package/dist/components/PullToRefresh/PullToRefresh.js.map +1 -1
  74. package/dist/components/ScreenSpinner/ScreenSpinner.js +3 -3
  75. package/dist/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  76. package/dist/components/Select/Select.d.ts +1 -1
  77. package/dist/components/Select/Select.js +22 -11
  78. package/dist/components/Select/Select.js.map +1 -1
  79. package/dist/components/Spinner/Spinner.d.ts +1 -1
  80. package/dist/components/Spinner/Spinner.js +14 -4
  81. package/dist/components/Spinner/Spinner.js.map +1 -1
  82. package/dist/components/TabbarItem/TabbarItem.d.ts +1 -1
  83. package/dist/components/TabbarItem/TabbarItem.js +4 -2
  84. package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
  85. package/dist/components/Tappable/Tappable.d.ts +4 -4
  86. package/dist/components/Tappable/Tappable.js.map +1 -1
  87. package/dist/components.css +5 -5
  88. package/dist/components.css.map +1 -1
  89. package/dist/components.js.tmp +1392 -1352
  90. package/dist/cssm/components/Banner/Banner.d.ts +3 -6
  91. package/dist/cssm/components/Banner/Banner.js.map +1 -1
  92. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +13 -9
  93. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  94. package/dist/cssm/components/CustomSelect/CustomSelect.js +22 -16
  95. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  96. package/dist/cssm/components/FixedLayout/FixedLayout.d.ts +6 -1
  97. package/dist/cssm/components/FixedLayout/FixedLayout.js +8 -3
  98. package/dist/cssm/components/FixedLayout/FixedLayout.js.map +1 -1
  99. package/dist/cssm/components/FormItem/FormItem.d.ts +1 -1
  100. package/dist/cssm/components/FormItem/FormItem.js +4 -2
  101. package/dist/cssm/components/FormItem/FormItem.js.map +1 -1
  102. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +7 -7
  103. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
  104. package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css +2 -0
  105. package/dist/cssm/components/ImageBase/ImageBase.d.ts +2 -2
  106. package/dist/cssm/components/ImageBase/ImageBase.js.map +1 -1
  107. package/dist/cssm/components/ModalCard/ModalCard.d.ts +1 -1
  108. package/dist/cssm/components/ModalCard/ModalCard.js +2 -1
  109. package/dist/cssm/components/ModalCard/ModalCard.js.map +1 -1
  110. package/dist/cssm/components/PanelHeader/LegacyPanelHeaderContent.d.ts +12 -0
  111. package/dist/cssm/components/PanelHeader/LegacyPanelHeaderContent.js +27 -0
  112. package/dist/cssm/components/PanelHeader/LegacyPanelHeaderContent.js.map +1 -0
  113. package/dist/cssm/components/PanelHeader/PanelHeader.d.ts +6 -4
  114. package/dist/cssm/components/PanelHeader/PanelHeader.js +1 -20
  115. package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
  116. package/dist/cssm/components/PanelHeader/PanelHeader.module.css +7 -0
  117. package/dist/cssm/components/PullToRefresh/PullToRefresh.js +2 -1
  118. package/dist/cssm/components/PullToRefresh/PullToRefresh.js.map +1 -1
  119. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js +3 -3
  120. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  121. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.module.css +4 -4
  122. package/dist/cssm/components/Select/Select.d.ts +1 -1
  123. package/dist/cssm/components/Select/Select.js +4 -9
  124. package/dist/cssm/components/Select/Select.js.map +1 -1
  125. package/dist/cssm/components/Spinner/Spinner.d.ts +1 -1
  126. package/dist/cssm/components/Spinner/Spinner.js +12 -3
  127. package/dist/cssm/components/Spinner/Spinner.js.map +1 -1
  128. package/dist/cssm/components/TabbarItem/TabbarItem.d.ts +1 -1
  129. package/dist/cssm/components/TabbarItem/TabbarItem.js +2 -1
  130. package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
  131. package/dist/cssm/components/Tappable/Tappable.d.ts +4 -4
  132. package/dist/cssm/components/Tappable/Tappable.js.map +1 -1
  133. package/dist/cssm/hooks/useAutoDetectAppearance.js +9 -13
  134. package/dist/cssm/hooks/useAutoDetectAppearance.js.map +1 -1
  135. package/dist/cssm/lib/platform.d.ts +2 -1
  136. package/dist/cssm/lib/platform.js.map +1 -1
  137. package/dist/cssm/styles/constants.css +3 -0
  138. package/dist/cssm/types.d.ts +12 -0
  139. package/dist/cssm/types.js.map +1 -1
  140. package/dist/hooks/useAutoDetectAppearance.js +9 -13
  141. package/dist/hooks/useAutoDetectAppearance.js.map +1 -1
  142. package/dist/lib/platform.d.ts +2 -1
  143. package/dist/lib/platform.js.map +1 -1
  144. package/dist/types.d.ts +12 -0
  145. package/dist/types.js.map +1 -1
  146. package/dist/vkui.css +5 -5
  147. package/dist/vkui.css.map +1 -1
  148. package/dist/vkui.js.tmp +1392 -1352
  149. package/package.json +2 -2
@@ -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 <>\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 className={styles['Banner__expand']} />\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":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAyElD;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,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,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD;IAElD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA;QAAYT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,SAASC,MAAMjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,0BACtB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,MAAM,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACQ;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW;OAEVtB,aAAaxB,SAASqC,oBAAM,oBAACV,sCAAoB,oBAAClC;AAQnE,EAAE"}
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 * Заголовок.\n */\n header?: React.ReactNode;\n /**\n * Подзаголовок.\n */\n subheader?: React.ReactNode;\n /**\n * Текст баннера.\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 className={styles['Banner__expand']} />\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":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAsElD;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,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,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD;IAElD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA;QAAYT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,SAASC,MAAMjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,0BACtB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,MAAM,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACQ;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW;OAEVtB,aAAaxB,SAASqC,oBAAM,oBAACV,sCAAoB,oBAAClC;AAQnE,EAAE"}
@@ -147,15 +147,19 @@ var chipsSelectDefaultProps = _object_spread_props(_object_spread({}, chipsInput
147
147
  focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);
148
148
  }
149
149
  }
150
- if (e.key === "Enter" && !e.defaultPrevented && opened && focusedOptionIndex != null) {
151
- var option = filteredOptions[focusedOptionIndex];
152
- if (option) {
153
- onChangeStart(e, option);
154
- if (!e.defaultPrevented) {
155
- addOption(option);
156
- setFocusedOptionIndex(null);
157
- clearInput();
158
- closeAfterSelect && setOpened(false);
150
+ if (e.key === "Enter" && !e.defaultPrevented && opened) {
151
+ if (focusedOptionIndex != null) {
152
+ var option = filteredOptions[focusedOptionIndex];
153
+ if (option) {
154
+ onChangeStart(e, option);
155
+ if (!e.defaultPrevented) {
156
+ addOption(option);
157
+ setFocusedOptionIndex(null);
158
+ clearInput();
159
+ closeAfterSelect && setOpened(false);
160
+ e.preventDefault();
161
+ }
162
+ } else if (!creatable) {
159
163
  e.preventDefault();
160
164
  }
161
165
  } else if (!creatable) {
@@ -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(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":["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","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","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","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\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) {\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: 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":["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","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","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","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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"}
@@ -264,30 +264,36 @@ var defaultOptions = [];
264
264
  onClose,
265
265
  resetKeyboardInput
266
266
  ]);
267
- var selectFocused = React.useCallback(function() {
268
- if (focusedOptionIndex !== undefined && isValidIndex(focusedOptionIndex)) {
269
- var item = options[focusedOptionIndex];
270
- setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
271
- close();
272
- var shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
273
- if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
274
- var _selectElRef_current;
275
- var event = new Event("change", {
276
- bubbles: true
277
- });
278
- (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
279
- }
267
+ var selectOption = React.useCallback(function(index) {
268
+ var item = options[index];
269
+ setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
270
+ close();
271
+ var shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
272
+ if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
273
+ var _selectElRef_current;
274
+ var event = new Event("change", {
275
+ bubbles: true
276
+ });
277
+ (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
280
278
  }
281
279
  }, [
282
280
  close,
283
- focusedOptionIndex,
284
- isValidIndex,
285
281
  options,
286
282
  selectElRef,
287
283
  isControlledOutside,
288
284
  props.value,
289
285
  nativeSelectValue
290
286
  ]);
287
+ var selectFocused = React.useCallback(function() {
288
+ if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {
289
+ return;
290
+ }
291
+ selectOption(focusedOptionIndex);
292
+ }, [
293
+ focusedOptionIndex,
294
+ isValidIndex,
295
+ selectOption
296
+ ]);
291
297
  var open = React.useCallback(function() {
292
298
  setOpened(true);
293
299
  setFocusedOptionIndex(selectedOptionIndex);
@@ -486,11 +492,11 @@ var defaultOptions = [];
486
492
  var index = Array.prototype.indexOf.call((_e_currentTarget_parentNode = e.currentTarget.parentNode) === null || _e_currentTarget_parentNode === void 0 ? void 0 : _e_currentTarget_parentNode.children, e.currentTarget);
487
493
  var option = options[index];
488
494
  if (option && !option.disabled) {
489
- selectFocused();
495
+ selectOption(index);
490
496
  }
491
497
  }, [
492
498
  options,
493
- selectFocused
499
+ selectOption
494
500
  ]);
495
501
  var handleOptionHover = React.useCallback(function(e) {
496
502
  var _e_currentTarget_parentNode;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement | string;\n disabled?: boolean;\n [index: string]: any;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /**\n * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n */\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void | CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?:\n | false\n | ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' | 'bottom';\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n *\n * > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n */\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelect\n */\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto | undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n classNames(\n opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down']),\n ),\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;\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 isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const focusOptionByIndex = React.useCallback(\n (index: number | undefined, scrollTo = true) => {\n if (index === undefined || index < 0 || index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseOver`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement | null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n const fullInput = keyboardInput + key;\n\n const optionIndex = options.findIndex((option) => {\n return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);\n });\n\n if (optionIndex !== undefined && optionIndex > -1) {\n focusOptionByIndex(optionIndex);\n }\n\n setKeyboardInput(fullInput);\n },\n [focusOptionByIndex, keyboardInput, options],\n );\n\n /**\n * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n */\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setInputValue('');\n setOpened(false);\n setFocusedOptionIndex(-1);\n onClose?.();\n }, [onClose, resetKeyboardInput]);\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex !== undefined && isValidIndex(focusedOptionIndex)) {\n const item = options[focusedOptionIndex];\n\n setNativeSelectValue(item?.value);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n }\n }, [\n close,\n focusedOptionIndex,\n isValidIndex,\n options,\n selectElRef,\n isControlledOutside,\n props.value,\n nativeSelectValue,\n ]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('blur');\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focus');\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' | 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function updateOptionsAndSelectedOptionIndex() {\n const value = props.value ?? nativeSelectValue ?? props.defaultValue;\n\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));\n },\n [\n filterFn,\n inputValue,\n nativeSelectValue,\n optionsProp,\n props.defaultValue,\n props.value,\n searchable,\n allowClearButton,\n ],\n );\n\n /**\n * Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по\n * выпадающему списку.\n */\n const onLabelClick = React.useCallback((e: React.MouseEvent<HTMLLabelElement>) => {\n if (scrollBoxRef.current?.contains(e.target as Node)) {\n e.preventDefault();\n }\n }, []);\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (event) => {\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n areOptionsShown() && focusOption('prev');\n break;\n case 'ArrowDown':\n areOptionsShown() && focusOption('next');\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n areOptionsShown() && selectFocused();\n break;\n }\n },\n [areOptionsShown, close, focusOption, selectFocused],\n );\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n // TODO [>=6]: удалить `onInputChangeProp`.\n if (onInputChangeProp) {\n const options = onInputChangeProp(e, optionsProp);\n if (options) {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' +\n 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.',\n );\n }\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n } else {\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectFocused();\n }\n },\n [options, selectFocused],\n );\n\n const handleOptionHover = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n focusOptionByIndex(\n Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),\n false,\n );\n },\n [focusOptionByIndex],\n );\n\n const renderOption = React.useCallback(\n (option: CustomSelectOptionInterface, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseOver` вместо `onMouseEnter`.\n // При параметре `searchable`, обновляется \"ребёнок\", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:\n // 1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.\n // > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.\n // 2. Если это тач-устройство.\n // > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,\n // но не на тот, на который нажали в первый раз.\n // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744\n onMouseOver: handleOptionHover,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n handleOptionHover,\n renderOptionProp,\n selectedOptionIndex,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options?.length > 0 ? (\n options.map(renderOption)\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={() => setNativeSelectValue('')}\n />\n );\n }, [clearButtonShown, ClearButton, iconProp]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon || clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n return (\n <label\n className={classNames(\n styles['CustomSelect'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={onLabelClick}\n >\n {opened && searchable ? (\n <Input\n {...restProps}\n autoFocus\n onBlur={onBlur}\n className={openedClassNames}\n value={inputValue}\n onKeyDown={onInputKeyDown}\n onChange={onInputChange}\n // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.\n // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.\n // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>\n onClick={props.onClick}\n before={before}\n after={afterIcons}\n mode={getFormFieldModeFromSelectType(selectType)}\n />\n ) : (\n <SelectMimicry\n {...restProps}\n aria-hidden\n onClick={onClick}\n onKeyDown={handleKeyDownSelect}\n onKeyUp={handleKeyUp}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n before={before}\n after={afterIcons}\n selectType={selectType}\n >\n {selected?.label}\n </SelectMimicry>\n )}\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popupDirection}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n offsetDistance={dropdownOffsetDistance}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </label>\n );\n}\n"],"names":["React","classNames","useAdaptivity","useExternRef","SizeType","defaultFilterFn","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","debounce","getTitleFromChildren","warnOnce","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Input","SelectMimicry","Footnote","CustomSelectClearButton","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","useState","opened","setOpened","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOptionProp","renderOption","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","undefined","isControlledOutside","setIsControlledOutside","setInputValue","defaultValue","nativeSelectValue","setNativeSelectValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectFocused","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement | string;\n disabled?: boolean;\n [index: string]: any;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /**\n * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n */\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void | CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?:\n | false\n | ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' | 'bottom';\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n *\n * > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n */\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelect\n */\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto | undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n classNames(\n opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down']),\n ),\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;\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 isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const focusOptionByIndex = React.useCallback(\n (index: number | undefined, scrollTo = true) => {\n if (index === undefined || index < 0 || index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseOver`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement | null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n const fullInput = keyboardInput + key;\n\n const optionIndex = options.findIndex((option) => {\n return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);\n });\n\n if (optionIndex !== undefined && optionIndex > -1) {\n focusOptionByIndex(optionIndex);\n }\n\n setKeyboardInput(fullInput);\n },\n [focusOptionByIndex, keyboardInput, options],\n );\n\n /**\n * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n */\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setInputValue('');\n setOpened(false);\n setFocusedOptionIndex(-1);\n onClose?.();\n }, [onClose, resetKeyboardInput]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n setNativeSelectValue(item?.value);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('blur');\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focus');\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' | 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function updateOptionsAndSelectedOptionIndex() {\n const value = props.value ?? nativeSelectValue ?? props.defaultValue;\n\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));\n },\n [\n filterFn,\n inputValue,\n nativeSelectValue,\n optionsProp,\n props.defaultValue,\n props.value,\n searchable,\n allowClearButton,\n ],\n );\n\n /**\n * Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по\n * выпадающему списку.\n */\n const onLabelClick = React.useCallback((e: React.MouseEvent<HTMLLabelElement>) => {\n if (scrollBoxRef.current?.contains(e.target as Node)) {\n e.preventDefault();\n }\n }, []);\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (event) => {\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n areOptionsShown() && focusOption('prev');\n break;\n case 'ArrowDown':\n areOptionsShown() && focusOption('next');\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n areOptionsShown() && selectFocused();\n break;\n }\n },\n [areOptionsShown, close, focusOption, selectFocused],\n );\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n // TODO [>=6]: удалить `onInputChangeProp`.\n if (onInputChangeProp) {\n const options = onInputChangeProp(e, optionsProp);\n if (options) {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' +\n 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.',\n );\n }\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n } else {\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const handleOptionHover = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n focusOptionByIndex(\n Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),\n false,\n );\n },\n [focusOptionByIndex],\n );\n\n const renderOption = React.useCallback(\n (option: CustomSelectOptionInterface, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseOver` вместо `onMouseEnter`.\n // При параметре `searchable`, обновляется \"ребёнок\", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:\n // 1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.\n // > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.\n // 2. Если это тач-устройство.\n // > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,\n // но не на тот, на который нажали в первый раз.\n // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744\n onMouseOver: handleOptionHover,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n handleOptionHover,\n renderOptionProp,\n selectedOptionIndex,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options?.length > 0 ? (\n options.map(renderOption)\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={() => setNativeSelectValue('')}\n />\n );\n }, [clearButtonShown, ClearButton, iconProp]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon || clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n return (\n <label\n className={classNames(\n styles['CustomSelect'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={onLabelClick}\n >\n {opened && searchable ? (\n <Input\n {...restProps}\n autoFocus\n onBlur={onBlur}\n className={openedClassNames}\n value={inputValue}\n onKeyDown={onInputKeyDown}\n onChange={onInputChange}\n // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.\n // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.\n // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>\n onClick={props.onClick}\n before={before}\n after={afterIcons}\n mode={getFormFieldModeFromSelectType(selectType)}\n />\n ) : (\n <SelectMimicry\n {...restProps}\n aria-hidden\n onClick={onClick}\n onKeyDown={handleKeyDownSelect}\n onKeyUp={handleKeyUp}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n before={before}\n after={afterIcons}\n selectType={selectType}\n >\n {selected?.label}\n </SelectMimicry>\n )}\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popupDirection}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n offsetDistance={dropdownOffsetDistance}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </label>\n );\n}\n"],"names":["React","classNames","useAdaptivity","useExternRef","SizeType","defaultFilterFn","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","debounce","getTitleFromChildren","warnOnce","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Input","SelectMimicry","Footnote","CustomSelectClearButton","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","useState","opened","setOpened","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOptionProp","renderOption","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","undefined","isControlledOutside","setIsControlledOutside","setInputValue","defaultValue","nativeSelectValue","setNativeSelectValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"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"}
@@ -7,6 +7,11 @@ export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>,
7
7
  * Это часто необходимо для фиксированных кнопок в нижней части экрана.
8
8
  */
9
9
  filled?: boolean;
10
+ /**
11
+ * Всегда соответствовать ширине родителя.
12
+ * Ширина пересчитывается по событию `window` `resize`.
13
+ */
14
+ useParentWidth?: boolean;
10
15
  }
11
16
  export interface FixedLayoutState {
12
17
  position: 'absolute' | null;
@@ -17,4 +22,4 @@ export interface FixedLayoutState {
17
22
  /**
18
23
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
19
24
  */
20
- export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, ...restProps }: FixedLayoutProps) => React.JSX.Element;
25
+ export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, useParentWidth, ...restProps }: FixedLayoutProps) => React.JSX.Element;
@@ -14,14 +14,15 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
14
14
  /**
15
15
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
16
16
  */ export var FixedLayout = function(_param) {
17
- var children = _param.children, style = _param.style, vertical = _param.vertical, getRootRef = _param.getRootRef, getRef = _param.getRef, filled = _param.filled, className = _param.className, restProps = _object_without_properties(_param, [
17
+ var children = _param.children, style = _param.style, vertical = _param.vertical, getRootRef = _param.getRootRef, getRef = _param.getRef, filled = _param.filled, className = _param.className, useParentWidth = _param.useParentWidth, restProps = _object_without_properties(_param, [
18
18
  "children",
19
19
  "style",
20
20
  "vertical",
21
21
  "getRootRef",
22
22
  "getRef",
23
23
  "filled",
24
- "className"
24
+ "className",
25
+ "useParentWidth"
25
26
  ]);
26
27
  var platform = usePlatform();
27
28
  var ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef
@@ -29,7 +30,11 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
29
30
  var window = useDOM().window;
30
31
  var colRef = React.useContext(SplitColContext).colRef;
31
32
  var doResize = function() {
32
- if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
33
+ if (useParentWidth && ref.current) {
34
+ var _ref_current_parentElement;
35
+ var parentWidth = (_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.getBoundingClientRect().width;
36
+ setWidth(parentWidth ? "".concat(parentWidth, "px") : undefined);
37
+ } else if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
33
38
  var computedStyle = getComputedStyle(colRef.current);
34
39
  setWidth("".concat(colRef.current.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight), "px"));
35
40
  } else {
@@ -38,7 +43,9 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
38
43
  };
39
44
  React.useEffect(doResize, [
40
45
  colRef,
41
- platform
46
+ platform,
47
+ ref,
48
+ useParentWidth
42
49
  ]);
43
50
  useGlobalEventListener(window, "resize", doResize);
44
51
  return /*#__PURE__*/ React.createElement(TooltipContainer, _object_spread_props(_object_spread({}, restProps), {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' | 'bottom';\n /**\n * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n */\n filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' | null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n getRef,\n filled,\n className,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string | undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n const doResize = () => {\n if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","useState","undefined","width","setWidth","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAsB/D;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWd;IACjB,IAAMe,MAAMjB,aAAaW,YAAYC,SAAS,6BAA6B;IAC3E,IAA0Bd,mCAAAA,MAAMoB,SAA6BC,gBAAtDC,QAAmBtB,oBAAZuB,WAAYvB;IAC1B,IAAM,AAAEwB,SAAWnB,SAAXmB;IACR,IAAM,AAAEC,SAAWzB,MAAM0B,WAAWnB,iBAA5BkB;IACR,IAAME,WAAW;QACf,IAAIF,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG,SAAS;YACnB,IAAMC,gBAAgBC,iBAAiBL,OAAOG;YAE9CL,SACE,AAAC,GAIA,OAHCE,OAAOG,QAAQG,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,eAC1B;QAEL,OAAO;YACLX,SAASF;QACX;IACF;IACArB,MAAMmC,UAAUR,UAAU;QAACF;QAAQP;KAAS;IAC5Cf,uBAAuBqB,QAAQ,UAAUG;IAEzC,qBACE,oBAACnB,0DACKS;QACJmB,OAAAA;QACAjB,KAAKA;QACLH,WAAWf,8BAETiB,aAAaZ,SAAS+B,OAAO,gCAC7BtB,qCACAH,YACE,CAAA;YACE0B,GAAG;YACHC,QAAQtC,+CAEN;QAEJ,CAAA,CAAC,CAACW,SAAS,EACbI;QAEFL,OAAO,wCAAKA;YAAOW,OAAAA;;QAElBZ;AAGP,EAAE"}
1
+ {"version":3,"sources":["../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' | 'bottom';\n /**\n * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n */\n filled?: boolean;\n /**\n * Всегда соответствовать ширине родителя.\n * Ширина пересчитывается по событию `window` `resize`.\n */\n useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' | null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n getRef,\n filled,\n className,\n useParentWidth,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string | undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n\n const doResize = () => {\n if (useParentWidth && ref.current) {\n const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n setWidth(parentWidth ? `${parentWidth}px` : undefined);\n } else if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","useState","undefined","width","setWidth","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AA2B/D;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWf;IACjB,IAAMgB,MAAMlB,aAAaW,YAAYC,SAAS,6BAA6B;IAC3E,IAA0Bd,mCAAAA,MAAMqB,SAA6BC,gBAAtDC,QAAmBvB,oBAAZwB,WAAYxB;IAC1B,IAAM,AAAEyB,SAAWpB,SAAXoB;IACR,IAAM,AAAEC,SAAW1B,MAAM2B,WAAWpB,iBAA5BmB;IAER,IAAME,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,SAAS;gBACbT;YAApB,IAAMU,cAAcV,CAAAA,6BAAAA,IAAIS,QAAQE,2BAAZX,wCAAAA,KAAAA,IAAAA,2BAA2BY,wBAAwBT;YACvEC,SAASM,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMR;QAC9C,OAAO,IAAII,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG,SAAS;YAC1B,IAAMI,gBAAgBC,iBAAiBR,OAAOG;YAE9CL,SACE,AAAC,GAIA,OAHCE,OAAOG,QAAQM,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,eAC1B;QAEL,OAAO;YACLd,SAASF;QACX;IACF;IACAtB,MAAMuC,UAAUX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjEd,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB,0DACKU;QACJsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWf,8BAETkB,aAAab,SAASmC,OAAO,gCAC7B1B,qCACAH,YACE,CAAA;YACE8B,GAAG;YACHC,QAAQ1C,+CAEN;QAEJ,CAAA,CAAC,CAACW,SAAS,EACbI;QAEFL,OAAO,wCAAKA;YAAOY,OAAAA;;QAElBb;AAGP,EAAE"}
@@ -15,4 +15,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
15
15
  /**
16
16
  * @see https://vkcom.github.io/VKUI/#/FormItem
17
17
  */
18
- export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, ...restProps }: FormItemProps) => React.JSX.Element;
18
+ export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, ...restProps }: FormItemProps) => React.JSX.Element;