@vkontakte/vkui 6.5.1 → 6.5.2

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 (112) hide show
  1. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +9 -9
  2. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  3. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  4. package/dist/cjs/components/CustomSelect/CustomSelect.js +2 -2
  5. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  6. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  7. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  8. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -14
  9. package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  10. package/dist/cjs/components/Footer/Footer.d.ts +1 -1
  11. package/dist/cjs/components/Footer/Footer.d.ts.map +1 -1
  12. package/dist/cjs/components/Footer/Footer.js +7 -3
  13. package/dist/cjs/components/Footer/Footer.js.map +1 -1
  14. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  15. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js +1 -1
  16. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  17. package/dist/cjs/components/RootComponent/RootComponent.d.ts +1 -1
  18. package/dist/cjs/components/RootComponent/RootComponent.d.ts.map +1 -1
  19. package/dist/cjs/components/RootComponent/RootComponent.js +1 -1
  20. package/dist/cjs/components/RootComponent/RootComponent.js.map +1 -1
  21. package/dist/cjs/components/Search/Search.d.ts.map +1 -1
  22. package/dist/cjs/components/Search/Search.js +1 -0
  23. package/dist/cjs/components/Search/Search.js.map +1 -1
  24. package/dist/cjs/hooks/useEnsuredControl.d.ts.map +1 -1
  25. package/dist/cjs/hooks/useEnsuredControl.js +27 -3
  26. package/dist/cjs/hooks/useEnsuredControl.js.map +1 -1
  27. package/dist/cjs/hooks/useIsClient.d.ts +1 -1
  28. package/dist/cjs/hooks/useIsClient.js.map +1 -1
  29. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  30. package/dist/components/ChipsSelect/ChipsSelect.js +9 -9
  31. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  32. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  33. package/dist/components/CustomSelect/CustomSelect.js +2 -2
  34. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  35. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  36. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  37. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -14
  38. package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  39. package/dist/components/Footer/Footer.d.ts +1 -1
  40. package/dist/components/Footer/Footer.d.ts.map +1 -1
  41. package/dist/components/Footer/Footer.js +7 -3
  42. package/dist/components/Footer/Footer.js.map +1 -1
  43. package/dist/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  44. package/dist/components/FormLayoutGroup/FormLayoutGroup.js +1 -1
  45. package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  46. package/dist/components/RootComponent/RootComponent.d.ts +1 -1
  47. package/dist/components/RootComponent/RootComponent.d.ts.map +1 -1
  48. package/dist/components/RootComponent/RootComponent.js +1 -1
  49. package/dist/components/RootComponent/RootComponent.js.map +1 -1
  50. package/dist/components/Search/Search.d.ts.map +1 -1
  51. package/dist/components/Search/Search.js +1 -0
  52. package/dist/components/Search/Search.js.map +1 -1
  53. package/dist/components.css +2 -2
  54. package/dist/components.css.map +1 -1
  55. package/dist/components.js.tmp +52 -85
  56. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +9 -9
  57. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  58. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  59. package/dist/cssm/components/CustomSelect/CustomSelect.js +2 -2
  60. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  61. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
  62. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
  63. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js +2 -13
  64. package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
  65. package/dist/cssm/components/Footer/Footer.d.ts +1 -1
  66. package/dist/cssm/components/Footer/Footer.d.ts.map +1 -1
  67. package/dist/cssm/components/Footer/Footer.js +4 -2
  68. package/dist/cssm/components/Footer/Footer.js.map +1 -1
  69. package/dist/cssm/components/FormField/FormField.module.css +36 -23
  70. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts.map +1 -1
  71. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js +1 -1
  72. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  73. package/dist/cssm/components/RootComponent/RootComponent.d.ts +1 -1
  74. package/dist/cssm/components/RootComponent/RootComponent.d.ts.map +1 -1
  75. package/dist/cssm/components/RootComponent/RootComponent.js +2 -1
  76. package/dist/cssm/components/RootComponent/RootComponent.js.map +1 -1
  77. package/dist/cssm/components/RootComponent/RootComponent.module.css +10 -0
  78. package/dist/cssm/components/Search/Search.d.ts.map +1 -1
  79. package/dist/cssm/components/Search/Search.js +1 -0
  80. package/dist/cssm/components/Search/Search.js.map +1 -1
  81. package/dist/cssm/hooks/useEnsuredControl.d.ts.map +1 -1
  82. package/dist/cssm/hooks/useEnsuredControl.js +27 -3
  83. package/dist/cssm/hooks/useEnsuredControl.js.map +1 -1
  84. package/dist/cssm/hooks/useIsClient.d.ts +1 -1
  85. package/dist/cssm/hooks/useIsClient.js +1 -1
  86. package/dist/cssm/hooks/useIsClient.js.map +1 -1
  87. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  88. package/dist/cssm/styles/constants.css +2 -2
  89. package/dist/hooks/useEnsuredControl.d.ts.map +1 -1
  90. package/dist/hooks/useEnsuredControl.js +27 -3
  91. package/dist/hooks/useEnsuredControl.js.map +1 -1
  92. package/dist/hooks/useIsClient.d.ts +1 -1
  93. package/dist/hooks/useIsClient.js +1 -1
  94. package/dist/hooks/useIsClient.js.map +1 -1
  95. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  96. package/dist/vkui.css +2 -2
  97. package/dist/vkui.css.map +1 -1
  98. package/dist/vkui.js.tmp +52 -85
  99. package/package.json +1 -1
  100. package/src/components/ChipsSelect/ChipsSelect.tsx +12 -12
  101. package/src/components/CustomSelect/CustomSelect.tsx +4 -6
  102. package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx +3 -17
  103. package/src/components/Footer/Footer.tsx +14 -2
  104. package/src/components/FormField/FormField.module.css +32 -21
  105. package/src/components/FormLayoutGroup/FormLayoutGroup.tsx +1 -5
  106. package/src/components/RootComponent/RootComponent.module.css +10 -0
  107. package/src/components/RootComponent/RootComponent.tsx +12 -2
  108. package/src/components/Search/Search.tsx +1 -0
  109. package/src/hooks/useEnsuredControl.ts +38 -4
  110. package/src/hooks/useIsClient.ts +1 -1
  111. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +1 -1
  112. package/src/styles/constants.css +2 -2
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps): React.ReactNode => {\n return (\n <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n {children}\n </Footnote>\n );\n};\n"],"names":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;kBACjFD;;AAGP"}
1
+ {"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({\n children,\n className,\n Component = 'footer',\n role: roleProp,\n ...restProps\n}: FooterProps): React.ReactNode => {\n const role = roleProp ?? (Component === 'footer' ? 'contentinfo' : undefined);\n return (\n <Footnote\n Component={Component}\n role={role}\n {...restProps}\n className={classNames(styles['Footer'], className)}\n >\n {children}\n </Footnote>\n );\n};\n"],"names":["Footer","children","className","Component","role","roleProp","restProps","undefined","Footnote","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EACrBC,QAAQ,EACRC,SAAS,EACTC,YAAY,QAAQ,EACpBC,MAAMC,QAAQ,EAEF,WADTC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAMA,OAAOC,qBAAAA,sBAAAA,WAAaF,cAAc,WAAW,gBAAgBI;IACnE,qBACE,qBAACC,kBAAQ;QACPL,WAAWA;QACXC,MAAMA;OACFE;QACJJ,WAAWO,IAAAA,gBAAU,gBAAmBP;kBAEvCD;;AAGP"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormLayoutGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAenE,MAAM,WAAW,oBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,cAAc;IAChB,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,oGASzB,oBAAoB,KAAG,KAAK,CAAC,SAyD/B,CAAC"}
1
+ {"version":3,"file":"FormLayoutGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAenE,MAAM,WAAW,oBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,cAAc;IAChB,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,oGASzB,oBAAoB,KAAG,KAAK,CAAC,SAqD/B,CAAC"}
@@ -39,7 +39,7 @@ const FormLayoutGroup = (_param)=>{
39
39
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
40
40
  getRootRef: rootEl,
41
41
  Component: "fieldset",
42
- baseClassName: (0, _vkjs.classNames)("vkuiFormLayoutGroup", sizeY !== 'regular' && sizeYClassNames[sizeY], mode === 'horizontal' && (0, _vkjs.classNames)("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && (0, _vkjs.classNames)("vkuiFormLayoutGroup--mode-vertical", 'vkuiInternalFormLayoutGroup--mode-vertical'), isRemovable && (0, _vkjs.classNames)("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && (0, _vkjs.classNames)("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
42
+ baseClassName: (0, _vkjs.classNames)("vkuiFormLayoutGroup", sizeY !== 'regular' && sizeYClassNames[sizeY], mode === 'horizontal' && (0, _vkjs.classNames)("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical', isRemovable && (0, _vkjs.classNames)("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && (0, _vkjs.classNames)("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
43
43
  }, restProps), {
44
44
  children: isRemovable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Removable.Removable, {
45
45
  className: "vkuiFormLayoutGroup__removable",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n ['compact']: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n RemovableProps {\n mode?: 'vertical' | 'horizontal';\n /**\n * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n *\n * Режим `indent` предназначен для визуального отступа.\n */\n removable?: boolean | 'indent';\n\n /**\n * Дает возможность склеить несколько `FormItem`.\n */\n segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n children,\n mode = 'vertical',\n removable,\n segmented,\n removePlaceholder = 'Удалить',\n onRemove,\n getRootRef,\n ...restProps\n}: FormLayoutGroupProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <RootComponent\n getRootRef={rootEl}\n Component=\"fieldset\"\n baseClassName={classNames(\n styles['FormLayoutGroup'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n mode === 'vertical' &&\n classNames(\n styles['FormLayoutGroup--mode-vertical'],\n 'vkuiInternalFormLayoutGroup--mode-vertical',\n ),\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n segmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\n )}\n {...restProps}\n >\n {isRemovable ? (\n <Removable\n className={styles['FormLayoutGroup__removable']}\n align=\"start\"\n removePlaceholder={removePlaceholder}\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove?.(e, rootEl.current);\n }\n }}\n indent={removable === 'indent'}\n >\n {children}\n </Removable>\n ) : (\n <React.Fragment>\n {children}\n <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n </React.Fragment>\n )}\n </RootComponent>\n );\n};\n"],"names":["FormLayoutGroup","sizeYClassNames","none","classNames","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","useAdaptivity","isRemovable","rootEl","useExternRef","RootComponent","Component","baseClassName","Removable","className","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;iEAxCU;sBACI;+BACG;8BACD;2BAEa;+BACZ;AAG9B,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,qCAEd;IAEF,CAAC,UAAU,EAAEA,IAAAA,gBAAU,wCAErB;AAEJ;AAsBO,MAAMH,kBAAkB;QAAC,EAC9BI,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,QAAQ,EACRC,UAAU,EAEW,WADlBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,SAASC,IAAAA,0BAAY,EAACN;IAE5B,qBACE,qBAACO,4BAAa;QACZP,YAAYK;QACZG,WAAU;QACVC,eAAehB,IAAAA,gBAAU,yBAEvBS,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CP,SAAS,gBACPF,IAAAA,gBAAU,0CAER,iDAEJE,SAAS,cACPF,IAAAA,gBAAU,wCAER,+CAEJW,eACEX,IAAAA,gBAAU,oCAER,2CAEJI,aACEJ,IAAAA,gBAAU,oCAER;OAGFQ;kBAEHG,4BACC,qBAACM,oBAAS;YACRC,SAAS;YACTC,OAAM;YACNd,mBAAmBA;YACnBC,UAAU,CAACc;gBACT,IAAIR,mBAAAA,6BAAAA,OAAQS,OAAO,EAAE;oBACnBf,qBAAAA,+BAAAA,SAAWc,GAAGR,OAAOS,OAAO;gBAC9B;YACF;YACAC,QAAQnB,cAAc;sBAErBF;2BAGH,sBAACsB,OAAMC,QAAQ;;gBACZvB;8BACD,qBAACwB;oBAAKP,SAAS;oBAAqCQ,aAAW;;;;;AAKzE"}
1
+ {"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n ['compact']: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n RemovableProps {\n mode?: 'vertical' | 'horizontal';\n /**\n * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n *\n * Режим `indent` предназначен для визуального отступа.\n */\n removable?: boolean | 'indent';\n\n /**\n * Дает возможность склеить несколько `FormItem`.\n */\n segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n children,\n mode = 'vertical',\n removable,\n segmented,\n removePlaceholder = 'Удалить',\n onRemove,\n getRootRef,\n ...restProps\n}: FormLayoutGroupProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <RootComponent\n getRootRef={rootEl}\n Component=\"fieldset\"\n baseClassName={classNames(\n styles['FormLayoutGroup'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical',\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n segmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\n )}\n {...restProps}\n >\n {isRemovable ? (\n <Removable\n className={styles['FormLayoutGroup__removable']}\n align=\"start\"\n removePlaceholder={removePlaceholder}\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove?.(e, rootEl.current);\n }\n }}\n indent={removable === 'indent'}\n >\n {children}\n </Removable>\n ) : (\n <React.Fragment>\n {children}\n <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n </React.Fragment>\n )}\n </RootComponent>\n );\n};\n"],"names":["FormLayoutGroup","sizeYClassNames","none","classNames","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","useAdaptivity","isRemovable","rootEl","useExternRef","RootComponent","Component","baseClassName","Removable","className","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;iEAxCU;sBACI;+BACG;8BACD;2BAEa;+BACZ;AAG9B,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,qCAEd;IAEF,CAAC,UAAU,EAAEA,IAAAA,gBAAU,wCAErB;AAEJ;AAsBO,MAAMH,kBAAkB;QAAC,EAC9BI,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,QAAQ,EACRC,UAAU,EAEW,WADlBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,SAASC,IAAAA,0BAAY,EAACN;IAE5B,qBACE,qBAACO,4BAAa;QACZP,YAAYK;QACZG,WAAU;QACVC,eAAehB,IAAAA,gBAAU,yBAEvBS,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CP,SAAS,gBACPF,IAAAA,gBAAU,0CAER,iDAEJE,SAAS,cAAc,8CACvBS,eACEX,IAAAA,gBAAU,oCAER,2CAEJI,aACEJ,IAAAA,gBAAU,oCAER;OAGFQ;kBAEHG,4BACC,qBAACM,oBAAS;YACRC,SAAS;YACTC,OAAM;YACNd,mBAAmBA;YACnBC,UAAU,CAACc;gBACT,IAAIR,mBAAAA,6BAAAA,OAAQS,OAAO,EAAE;oBACnBf,qBAAAA,+BAAAA,SAAWc,GAAGR,OAAOS,OAAO;gBAC9B;YACF;YACAC,QAAQnB,cAAc;sBAErBF;2BAGH,sBAACsB,OAAMC,QAAQ;;gBACZvB;8BACD,qBAACwB;oBAAKP,SAAS;oBAAqCQ,aAAW;;;;;AAKzE"}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { HasComponent, HasRootRef } from '../../types';
2
+ import type { HasComponent, HasRootRef } from '../../types';
3
3
  export interface RootComponentProps<T> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
4
4
  baseClassName?: string | false;
5
5
  }
@@ -1 +1 @@
1
- {"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,qEAM5B,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAEhC,CAAC"}
1
+ {"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,qEAM5B,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAWhC,CAAC"}
@@ -23,7 +23,7 @@ const RootComponent = (_param)=>{
23
23
  ]);
24
24
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, _object_spread._({
25
25
  ref: getRootRef,
26
- className: (0, _vkjs.classNames)(baseClassName, className)
26
+ className: (0, _vkjs.classNames)(className, baseClassName, "vkuiRootComponent", restProps.hidden === true && "vkuiRootComponent--hidden")
27
27
  }, restProps));
28
28
  };
29
29
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n extends React.AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n Component = 'div',\n baseClassName,\n className,\n getRootRef,\n ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;iEAdU;sBACI;AAapB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE"}
1
+ {"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './RootComponent.module.css';\n\nexport interface RootComponentProps<T>\n extends React.AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n Component = 'div',\n baseClassName,\n className,\n getRootRef,\n ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n <Component\n ref={getRootRef}\n className={classNames(\n className,\n baseClassName,\n styles['RootComponent'],\n restProps.hidden === true && styles['RootComponent--hidden'],\n )}\n {...restProps}\n />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames","hidden"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;iEAfU;sBACI;AAcpB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QACCK,KAAKF;QACLD,WAAWI,IAAAA,gBAAU,EACnBJ,WACAD,oCAEAG,UAAUG,MAAM,KAAK;OAEnBH"}
@@ -1 +1 @@
1
- {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKvE,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAuKtB,CAAC"}
1
+ {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKvE,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAwKtB,CAAC"}
@@ -161,6 +161,7 @@ const Search = (_param)=>{
161
161
  onClick: onCancel,
162
162
  className: "vkuiSearch__icon",
163
163
  tabIndex: hasValue ? undefined : -1,
164
+ disabled: inputProps.disabled,
164
165
  children: [
165
166
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
166
167
  children: clearLabel
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n icon: React.ReactNode,\n props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n /**\n * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n */\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n onIconClick?: React.PointerEventHandler<HTMLElement>;\n defaultValue?: string;\n iconLabel?: string;\n clearLabel?: string;\n /**\n * Удаляет отступы у компонента\n */\n noPadding?: boolean;\n /**\n * Текст для кнопки Найти\n */\n findButtonText?: string;\n /**\n * Коллбэк для кнопки Найти\n */\n onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n id: idProp,\n before = <Icon16SearchOutline />,\n className,\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon: iconProp,\n onIconClick,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps): React.ReactNode => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n const generatedId = React.useId();\n const inputId = idProp ? idProp : `search-${generatedId}`;\n\n const [hasValue, setHasValue] = React.useState<boolean>(() =>\n Boolean(inputProps.value || inputProps.defaultValue),\n );\n const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n setHasValue(Boolean(e.currentTarget.value));\n\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n const platform = usePlatform();\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedTrue();\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedFalse();\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, '');\n\n const ev2 = new Event('input', { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => onIconClick?.(e),\n [onIconClick],\n );\n\n const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n inputRef.current?.focus();\n if (touchEnabled()) {\n onCancel();\n }\n },\n [inputRef, onCancel],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (inputProps.value !== undefined) {\n setHasValue(Boolean(inputProps.value));\n }\n }, [inputProps.value]);\n\n useNativeFormResetListener(inputRef, () => {\n setHasValue(Boolean(inputProps.defaultValue));\n });\n\n const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n {...props}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n );\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === 'compact' && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n hasValue && styles['Search--has-value'],\n after && styles['Search--has-after'],\n iconProp && styles['Search--has-icon'],\n inputProps.disabled && styles['Search--disabled'],\n !noPadding && styles['Search--withPadding'],\n className,\n )}\n ref={getRootRef}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label htmlFor={inputId} className={styles['Search__label']}>\n {placeholder}\n </label>\n <div className={styles['Search__input']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n id={inputId}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__nativeInput']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={callMultiple(onChange, checkHasValue)}\n />\n </div>\n <div className={styles['Search__controls']}>\n {iconProp &&\n (typeof iconProp === 'function'\n ? iconProp(renderIconButton)\n : renderIconButton(iconProp))}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n >\n <VisuallyHidden>{clearLabel}</VisuallyHidden>\n {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n {adaptiveSizeY.compact && onFindButtonClick && (\n <Button\n mode=\"primary\"\n size=\"m\"\n className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n focusVisibleMode=\"inside\"\n onClick={onFindButtonClick}\n tabIndex={hasValue ? undefined : -1}\n >\n {findButtonText}\n </Button>\n )}\n </div>\n </div>\n {platform === 'ios' && after && (\n <Button\n mode=\"tertiary\"\n size=\"m\"\n className={styles['Search__after']}\n focusVisibleMode=\"inside\"\n onClick={onCancel}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n >\n <span className={styles['Search__afterText']}>{after}</span>\n </Button>\n )}\n </div>\n );\n};\n"],"names":["Search","id","idProp","before","Icon16SearchOutline","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","useExternRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useBooleanState","generatedId","React","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","platform","usePlatform","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","touchEnabled","useIsomorphicLayoutEffect","undefined","useNativeFormResetListener","renderIconButton","props","IconButton","hoverMode","onPointerDown","onClick","noop","VisuallyHidden","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n icon: React.ReactNode,\n props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n /**\n * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n */\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n onIconClick?: React.PointerEventHandler<HTMLElement>;\n defaultValue?: string;\n iconLabel?: string;\n clearLabel?: string;\n /**\n * Удаляет отступы у компонента\n */\n noPadding?: boolean;\n /**\n * Текст для кнопки Найти\n */\n findButtonText?: string;\n /**\n * Коллбэк для кнопки Найти\n */\n onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n id: idProp,\n before = <Icon16SearchOutline />,\n className,\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon: iconProp,\n onIconClick,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps): React.ReactNode => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n const generatedId = React.useId();\n const inputId = idProp ? idProp : `search-${generatedId}`;\n\n const [hasValue, setHasValue] = React.useState<boolean>(() =>\n Boolean(inputProps.value || inputProps.defaultValue),\n );\n const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n setHasValue(Boolean(e.currentTarget.value));\n\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n const platform = usePlatform();\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedTrue();\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedFalse();\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, '');\n\n const ev2 = new Event('input', { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => onIconClick?.(e),\n [onIconClick],\n );\n\n const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n inputRef.current?.focus();\n if (touchEnabled()) {\n onCancel();\n }\n },\n [inputRef, onCancel],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (inputProps.value !== undefined) {\n setHasValue(Boolean(inputProps.value));\n }\n }, [inputProps.value]);\n\n useNativeFormResetListener(inputRef, () => {\n setHasValue(Boolean(inputProps.defaultValue));\n });\n\n const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n {...props}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n );\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === 'compact' && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n hasValue && styles['Search--has-value'],\n after && styles['Search--has-after'],\n iconProp && styles['Search--has-icon'],\n inputProps.disabled && styles['Search--disabled'],\n !noPadding && styles['Search--withPadding'],\n className,\n )}\n ref={getRootRef}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label htmlFor={inputId} className={styles['Search__label']}>\n {placeholder}\n </label>\n <div className={styles['Search__input']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n id={inputId}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__nativeInput']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={callMultiple(onChange, checkHasValue)}\n />\n </div>\n <div className={styles['Search__controls']}>\n {iconProp &&\n (typeof iconProp === 'function'\n ? iconProp(renderIconButton)\n : renderIconButton(iconProp))}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n disabled={inputProps.disabled}\n >\n <VisuallyHidden>{clearLabel}</VisuallyHidden>\n {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n {adaptiveSizeY.compact && onFindButtonClick && (\n <Button\n mode=\"primary\"\n size=\"m\"\n className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n focusVisibleMode=\"inside\"\n onClick={onFindButtonClick}\n tabIndex={hasValue ? undefined : -1}\n >\n {findButtonText}\n </Button>\n )}\n </div>\n </div>\n {platform === 'ios' && after && (\n <Button\n mode=\"tertiary\"\n size=\"m\"\n className={styles['Search__after']}\n focusVisibleMode=\"inside\"\n onClick={onCancel}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n >\n <span className={styles['Search__afterText']}>{after}</span>\n </Button>\n )}\n </div>\n );\n};\n"],"names":["Search","id","idProp","before","Icon16SearchOutline","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","useExternRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useBooleanState","generatedId","React","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","platform","usePlatform","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","touchEnabled","useIsomorphicLayoutEffect","undefined","useNativeFormResetListener","renderIconButton","props","IconButton","hoverMode","onPointerDown","onClick","noop","VisuallyHidden","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useEnsuredControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/useEnsuredControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC;IACzE,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC;CACtC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,EACrE,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAgBnD;AAED,MAAM,WAAW,4BAA4B,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC;CACtC;AAED,wBAAgB,uBAAuB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC/C,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EAAE,YAAY,GACvB,EAAE,4BAA4B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAyChF"}
1
+ {"version":3,"file":"useEnsuredControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/useEnsuredControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC;IACzE,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC;CACtC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,EACrE,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAgBnD;AAED,MAAM,WAAW,4BAA4B,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC;CACtC;AAID,wBAAgB,uBAAuB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC/C,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EAAE,YAAY,GACvB,EAAE,4BAA4B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAwEhF"}
@@ -21,6 +21,7 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
21
21
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
22
22
  const _vkjs = require("@vkontakte/vkjs");
23
23
  const _useIsomorphicLayoutEffect = require("../lib/useIsomorphicLayoutEffect");
24
+ const _warnOnce = require("../lib/warnOnce");
24
25
  function useEnsuredControl(_param) {
25
26
  var { onChange: onChangeProp, disabled } = _param, props = _object_without_properties._(_param, [
26
27
  "onChange",
@@ -43,13 +44,26 @@ function useEnsuredControl(_param) {
43
44
  onChange
44
45
  ];
45
46
  }
47
+ const warn = (0, _warnOnce.warnOnce)('useCustomEnsuredControl');
46
48
  function useCustomEnsuredControl({ value, defaultValue, disabled, onChange: onChangeProp }) {
47
49
  const isControlled = value !== undefined;
48
50
  const [localValue, setLocalValue] = _react.useState(defaultValue);
49
- const preservedControlledValueRef = _react.useRef(value);
51
+ const preservedControlledValueRef = _react.useRef();
50
52
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
51
53
  preservedControlledValueRef.current = value;
52
54
  });
55
+ /*
56
+ * Для ситуации, когда nextValue это пользовательская функция,
57
+ * и в качестве аргумента мы должны передать prevValue.
58
+ * Обычно в качестве prevValue используется preservedControlledValueRef, но оно может быть undefined, если
59
+ * некотролируемое value вдруг стало контролируемым
60
+ * (value = undefined ---> value = true)
61
+ * Если в момент вызова onChange preservedControlledValueRef ещё не был
62
+ * обновлён в useEffect, то мы не можем использовать preservedControlledValueRef как prevValue
63
+ * В качестве запасного варианта мы храним текущее значение value в currentFallbackValueRef, чтобы
64
+ * использовать его вместо preservedControlledValueRef.
65
+ */ const currentFallbackValueRef = _react.useRef(value);
66
+ currentFallbackValueRef.current = value;
53
67
  const onChange = _react.useCallback((nextValue)=>{
54
68
  if (disabled) {
55
69
  return;
@@ -64,8 +78,18 @@ function useCustomEnsuredControl({ value, defaultValue, disabled, onChange: onCh
64
78
  return resolvedValue;
65
79
  });
66
80
  } else if (onChangeProp) {
67
- const resolvedValue = nextValue(preservedControlledValueRef.current);
68
- onChangeProp(resolvedValue);
81
+ if (process.env.NODE_ENV === 'development') {
82
+ if (preservedControlledValueRef.current === undefined) {
83
+ warn(`Похоже, что при вызове onChange с аргументом nextValue в виде коллбэка, состояние компонента было переведено из неконтролируемого ("undefined") в контролируемое. Пожалуйста, старайтесь сохранять либо неконтролируемое состояние, либо контролируемое на всём промежутке жизненного цикла компонента, чтобы получать предсказуемое значение prevValue в коллбэке nextValue((prevValue: V) => V)`, 'error');
84
+ }
85
+ }
86
+ const prevValue = preservedControlledValueRef.current === undefined ? currentFallbackValueRef.current : preservedControlledValueRef.current;
87
+ // В теории prevValue не может быть undefined,
88
+ // но лучше не вызывать nextValue с таким значением
89
+ if (prevValue !== undefined) {
90
+ const resolvedValue = nextValue(prevValue);
91
+ onChangeProp(resolvedValue);
92
+ }
69
93
  }
70
94
  } else {
71
95
  if (onChangeProp) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useEnsuredControl.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFunction } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport interface UseEnsuredControlProps<V, E extends React.ChangeEvent<any>> {\n value?: V;\n defaultValue: V;\n disabled?: boolean | undefined;\n onChange?: (this: void, e: E) => any;\n}\n\nexport function useEnsuredControl<V, E extends React.ChangeEvent<any>>({\n onChange: onChangeProp,\n disabled,\n ...props\n}: UseEnsuredControlProps<V, E>): [V, (e: E) => any] {\n const [value, onChangeValue] = useCustomEnsuredControl(props);\n\n const onChange = React.useCallback(\n (e: E) => {\n if (disabled) {\n return;\n }\n\n onChangeValue(e.target.value);\n onChangeProp && onChangeProp(e);\n },\n [onChangeValue, onChangeProp, disabled],\n );\n\n return [value, onChange];\n}\n\nexport interface UseCustomEnsuredControlProps<V> {\n value?: V;\n defaultValue: V;\n disabled?: boolean | undefined;\n onChange?: (this: void, v: V) => any;\n}\n\nexport function useCustomEnsuredControl<V = any>({\n value,\n defaultValue,\n disabled,\n onChange: onChangeProp,\n}: UseCustomEnsuredControlProps<V>): [V, React.Dispatch<React.SetStateAction<V>>] {\n const isControlled = value !== undefined;\n const [localValue, setLocalValue] = React.useState(defaultValue);\n const preservedControlledValueRef = React.useRef(value);\n\n useIsomorphicLayoutEffect(() => {\n preservedControlledValueRef.current = value;\n });\n\n const onChange = React.useCallback(\n (nextValue: V | ((prevValue: any) => V)) => {\n if (disabled) {\n return;\n }\n\n if (isFunction(nextValue)) {\n if (!isControlled) {\n setLocalValue((prevValue) => {\n const resolvedValue = nextValue(prevValue);\n if (onChangeProp) {\n onChangeProp(resolvedValue);\n }\n return resolvedValue;\n });\n } else if (onChangeProp) {\n const resolvedValue = nextValue(preservedControlledValueRef.current);\n onChangeProp(resolvedValue);\n }\n } else {\n if (onChangeProp) {\n onChangeProp(nextValue);\n }\n if (!isControlled) {\n setLocalValue(nextValue);\n }\n }\n },\n [disabled, isControlled, onChangeProp],\n );\n\n return [isControlled ? value : localValue, onChange];\n}\n"],"names":["useCustomEnsuredControl","useEnsuredControl","onChange","onChangeProp","disabled","props","value","onChangeValue","React","useCallback","e","target","defaultValue","isControlled","undefined","localValue","setLocalValue","useState","preservedControlledValueRef","useRef","useIsomorphicLayoutEffect","current","nextValue","isFunction","prevValue","resolvedValue"],"mappings":";;;;;;;;;;;IAwCgBA,uBAAuB;eAAvBA;;IA7BAC,iBAAiB;eAAjBA;;;;;iEAXO;sBACI;2CACe;AASnC,SAASA,kBAAuD;QAAA,EACrEC,UAAUC,YAAY,EACtBC,QAAQ,EAEqB,GAJwC,QAGlEC,qCAHkE;QACrEH;QACAE;;IAGA,MAAM,CAACE,OAAOC,cAAc,GAAGP,wBAAwBK;IAEvD,MAAMH,WAAWM,OAAMC,WAAW,CAChC,CAACC;QACC,IAAIN,UAAU;YACZ;QACF;QAEAG,cAAcG,EAAEC,MAAM,CAACL,KAAK;QAC5BH,gBAAgBA,aAAaO;IAC/B,GACA;QAACH;QAAeJ;QAAcC;KAAS;IAGzC,OAAO;QAACE;QAAOJ;KAAS;AAC1B;AASO,SAASF,wBAAiC,EAC/CM,KAAK,EACLM,YAAY,EACZR,QAAQ,EACRF,UAAUC,YAAY,EACU;IAChC,MAAMU,eAAeP,UAAUQ;IAC/B,MAAM,CAACC,YAAYC,cAAc,GAAGR,OAAMS,QAAQ,CAACL;IACnD,MAAMM,8BAA8BV,OAAMW,MAAM,CAACb;IAEjDc,IAAAA,oDAAyB,EAAC;QACxBF,4BAA4BG,OAAO,GAAGf;IACxC;IAEA,MAAMJ,WAAWM,OAAMC,WAAW,CAChC,CAACa;QACC,IAAIlB,UAAU;YACZ;QACF;QAEA,IAAImB,IAAAA,gBAAU,EAACD,YAAY;YACzB,IAAI,CAACT,cAAc;gBACjBG,cAAc,CAACQ;oBACb,MAAMC,gBAAgBH,UAAUE;oBAChC,IAAIrB,cAAc;wBAChBA,aAAasB;oBACf;oBACA,OAAOA;gBACT;YACF,OAAO,IAAItB,cAAc;gBACvB,MAAMsB,gBAAgBH,UAAUJ,4BAA4BG,OAAO;gBACnElB,aAAasB;YACf;QACF,OAAO;YACL,IAAItB,cAAc;gBAChBA,aAAamB;YACf;YACA,IAAI,CAACT,cAAc;gBACjBG,cAAcM;YAChB;QACF;IACF,GACA;QAAClB;QAAUS;QAAcV;KAAa;IAGxC,OAAO;QAACU,eAAeP,QAAQS;QAAYb;KAAS;AACtD"}
1
+ {"version":3,"sources":["../../../src/hooks/useEnsuredControl.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFunction } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../lib/warnOnce';\n\nexport interface UseEnsuredControlProps<V, E extends React.ChangeEvent<any>> {\n value?: V;\n defaultValue: V;\n disabled?: boolean | undefined;\n onChange?: (this: void, e: E) => any;\n}\n\nexport function useEnsuredControl<V, E extends React.ChangeEvent<any>>({\n onChange: onChangeProp,\n disabled,\n ...props\n}: UseEnsuredControlProps<V, E>): [V, (e: E) => any] {\n const [value, onChangeValue] = useCustomEnsuredControl(props);\n\n const onChange = React.useCallback(\n (e: E) => {\n if (disabled) {\n return;\n }\n\n onChangeValue(e.target.value);\n onChangeProp && onChangeProp(e);\n },\n [onChangeValue, onChangeProp, disabled],\n );\n\n return [value, onChange];\n}\n\nexport interface UseCustomEnsuredControlProps<V> {\n value?: V;\n defaultValue: V;\n disabled?: boolean | undefined;\n onChange?: (this: void, v: V) => any;\n}\n\nconst warn = warnOnce('useCustomEnsuredControl');\n\nexport function useCustomEnsuredControl<V = any>({\n value,\n defaultValue,\n disabled,\n onChange: onChangeProp,\n}: UseCustomEnsuredControlProps<V>): [V, React.Dispatch<React.SetStateAction<V>>] {\n const isControlled = value !== undefined;\n const [localValue, setLocalValue] = React.useState(defaultValue);\n\n const preservedControlledValueRef = React.useRef<V | undefined>();\n useIsomorphicLayoutEffect(() => {\n preservedControlledValueRef.current = value;\n });\n\n /*\n * Для ситуации, когда nextValue это пользовательская функция,\n * и в качестве аргумента мы должны передать prevValue.\n * Обычно в качестве prevValue используется preservedControlledValueRef, но оно может быть undefined, если\n * некотролируемое value вдруг стало контролируемым\n * (value = undefined ---> value = true)\n * Если в момент вызова onChange preservedControlledValueRef ещё не был\n * обновлён в useEffect, то мы не можем использовать preservedControlledValueRef как prevValue\n * В качестве запасного варианта мы храним текущее значение value в currentFallbackValueRef, чтобы\n * использовать его вместо preservedControlledValueRef.\n */\n const currentFallbackValueRef = React.useRef<V | undefined>(value);\n currentFallbackValueRef.current = value;\n\n const onChange = React.useCallback(\n (nextValue: React.SetStateAction<V>) => {\n if (disabled) {\n return;\n }\n\n if (isFunction(nextValue)) {\n if (!isControlled) {\n setLocalValue((prevValue) => {\n const resolvedValue = nextValue(prevValue);\n if (onChangeProp) {\n onChangeProp(resolvedValue);\n }\n return resolvedValue;\n });\n } else if (onChangeProp) {\n if (process.env.NODE_ENV === 'development') {\n if (preservedControlledValueRef.current === undefined) {\n warn(\n `Похоже, что при вызове onChange с аргументом nextValue в виде коллбэка, состояние компонента было переведено из неконтролируемого (\"undefined\") в контролируемое. Пожалуйста, старайтесь сохранять либо неконтролируемое состояние, либо контролируемое на всём промежутке жизненного цикла компонента, чтобы получать предсказуемое значение prevValue в коллбэке nextValue((prevValue: V) => V)`,\n 'error',\n );\n }\n }\n\n const prevValue =\n preservedControlledValueRef.current === undefined\n ? currentFallbackValueRef.current\n : preservedControlledValueRef.current;\n // В теории prevValue не может быть undefined,\n // но лучше не вызывать nextValue с таким значением\n if (prevValue !== undefined) {\n const resolvedValue = nextValue(prevValue);\n onChangeProp(resolvedValue);\n }\n }\n } else {\n if (onChangeProp) {\n onChangeProp(nextValue);\n }\n if (!isControlled) {\n setLocalValue(nextValue);\n }\n }\n },\n [disabled, isControlled, onChangeProp],\n );\n\n return [isControlled ? value : localValue, onChange];\n}\n"],"names":["useCustomEnsuredControl","useEnsuredControl","onChange","onChangeProp","disabled","props","value","onChangeValue","React","useCallback","e","target","warn","warnOnce","defaultValue","isControlled","undefined","localValue","setLocalValue","useState","preservedControlledValueRef","useRef","useIsomorphicLayoutEffect","current","currentFallbackValueRef","nextValue","isFunction","prevValue","resolvedValue","process","env","NODE_ENV"],"mappings":";;;;;;;;;;;IA2CgBA,uBAAuB;eAAvBA;;IA/BAC,iBAAiB;eAAjBA;;;;;iEAZO;sBACI;2CACe;0BACjB;AASlB,SAASA,kBAAuD;QAAA,EACrEC,UAAUC,YAAY,EACtBC,QAAQ,EAEqB,GAJwC,QAGlEC,qCAHkE;QACrEH;QACAE;;IAGA,MAAM,CAACE,OAAOC,cAAc,GAAGP,wBAAwBK;IAEvD,MAAMH,WAAWM,OAAMC,WAAW,CAChC,CAACC;QACC,IAAIN,UAAU;YACZ;QACF;QAEAG,cAAcG,EAAEC,MAAM,CAACL,KAAK;QAC5BH,gBAAgBA,aAAaO;IAC/B,GACA;QAACH;QAAeJ;QAAcC;KAAS;IAGzC,OAAO;QAACE;QAAOJ;KAAS;AAC1B;AASA,MAAMU,OAAOC,IAAAA,kBAAQ,EAAC;AAEf,SAASb,wBAAiC,EAC/CM,KAAK,EACLQ,YAAY,EACZV,QAAQ,EACRF,UAAUC,YAAY,EACU;IAChC,MAAMY,eAAeT,UAAUU;IAC/B,MAAM,CAACC,YAAYC,cAAc,GAAGV,OAAMW,QAAQ,CAACL;IAEnD,MAAMM,8BAA8BZ,OAAMa,MAAM;IAChDC,IAAAA,oDAAyB,EAAC;QACxBF,4BAA4BG,OAAO,GAAGjB;IACxC;IAEA;;;;;;;;;;GAUC,GACD,MAAMkB,0BAA0BhB,OAAMa,MAAM,CAAgBf;IAC5DkB,wBAAwBD,OAAO,GAAGjB;IAElC,MAAMJ,WAAWM,OAAMC,WAAW,CAChC,CAACgB;QACC,IAAIrB,UAAU;YACZ;QACF;QAEA,IAAIsB,IAAAA,gBAAU,EAACD,YAAY;YACzB,IAAI,CAACV,cAAc;gBACjBG,cAAc,CAACS;oBACb,MAAMC,gBAAgBH,UAAUE;oBAChC,IAAIxB,cAAc;wBAChBA,aAAayB;oBACf;oBACA,OAAOA;gBACT;YACF,OAAO,IAAIzB,cAAc;gBACvB,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;oBAC1C,IAAIX,4BAA4BG,OAAO,KAAKP,WAAW;wBACrDJ,KACE,CAAC,iYAAiY,CAAC,EACnY;oBAEJ;gBACF;gBAEA,MAAMe,YACJP,4BAA4BG,OAAO,KAAKP,YACpCQ,wBAAwBD,OAAO,GAC/BH,4BAA4BG,OAAO;gBACzC,8CAA8C;gBAC9C,mDAAmD;gBACnD,IAAII,cAAcX,WAAW;oBAC3B,MAAMY,gBAAgBH,UAAUE;oBAChCxB,aAAayB;gBACf;YACF;QACF,OAAO;YACL,IAAIzB,cAAc;gBAChBA,aAAasB;YACf;YACA,IAAI,CAACV,cAAc;gBACjBG,cAAcO;YAChB;QACF;IACF,GACA;QAACrB;QAAUW;QAAcZ;KAAa;IAGxC,OAAO;QAACY,eAAeT,QAAQW;QAAYf;KAAS;AACtD"}
@@ -4,7 +4,7 @@
4
4
  * ВНИМАНИЕ: Этот подход сделает ваши компоненты медленнее, потому что они
5
5
  * должны рендериться дважды, поэтому используйте хук с осторожностью.
6
6
  *
7
- * @see {@link https://beta.reactjs.org/apis/react-dom/hydrate#handling-different-client-and-server-content React Docs}
7
+ * @see {@link https://react.dev/reference/react-dom/hydrate#handling-different-client-and-server-content React Docs}
8
8
  */
9
9
  export declare function useIsClient(initial?: boolean): boolean;
10
10
  //# sourceMappingURL=useIsClient.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useIsClient.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\n/**\n * Хук для two-pass рендеринга.\n *\n * ВНИМАНИЕ: Этот подход сделает ваши компоненты медленнее, потому что они\n * должны рендериться дважды, поэтому используйте хук с осторожностью.\n *\n * @see {@link https://beta.reactjs.org/apis/react-dom/hydrate#handling-different-client-and-server-content React Docs}\n */\nexport function useIsClient(initial = false): boolean {\n const [isClient, setIsClient] = React.useState(initial);\n\n useIsomorphicLayoutEffect(() => {\n setIsClient(true);\n }, []);\n\n return isClient;\n}\n"],"names":["useIsClient","initial","isClient","setIsClient","React","useState","useIsomorphicLayoutEffect"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;2CACmB;AAUnC,SAASA,YAAYC,UAAU,KAAK;IACzC,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAACJ;IAE/CK,IAAAA,oDAAyB,EAAC;QACxBH,YAAY;IACd,GAAG,EAAE;IAEL,OAAOD;AACT"}
1
+ {"version":3,"sources":["../../../src/hooks/useIsClient.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\n/**\n * Хук для two-pass рендеринга.\n *\n * ВНИМАНИЕ: Этот подход сделает ваши компоненты медленнее, потому что они\n * должны рендериться дважды, поэтому используйте хук с осторожностью.\n *\n * @see {@link https://react.dev/reference/react-dom/hydrate#handling-different-client-and-server-content React Docs}\n */\nexport function useIsClient(initial = false): boolean {\n const [isClient, setIsClient] = React.useState(initial);\n\n useIsomorphicLayoutEffect(() => {\n setIsClient(true);\n }, []);\n\n return isClient;\n}\n"],"names":["useIsClient","initial","isClient","setIsClient","React","useState","useIsomorphicLayoutEffect"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;2CACmB;AAUnC,SAASA,YAAYC,UAAU,KAAK;IACzC,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAACJ;IAE/CK,IAAAA,oDAAyB,EAAC;QACxBH,YAAY;IACd,GAAG,EAAE;IAEL,OAAOD;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce, noop } from '@vkontakte/vkjs';\nimport { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';\nimport { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';\nimport { useStableCallback } from '../../../hooks/useStableCallback';\nimport { contains, getActiveElementByAnotherElement } from '../../dom';\nimport { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';\nimport { autoUpdateFloatingElement, useFloating } from '../adapters';\nimport { convertFloatingDataToReactCSSProperties } from '../functions';\nimport { type UseFloatingOptions } from '../types/common';\nimport { DEFAULT_TRIGGER } from './constants';\nimport type {\n FloatingProps,\n ReferenceProps,\n ShownChangeReason,\n UseFloatingWithInteractionsProps,\n UseFloatingWithInteractionsReturn,\n} from './types';\nimport { useResolveTriggerType } from './useResolveTriggerType';\n\ntype LocalState = { shown: boolean; reason?: ShownChangeReason };\n\nconst whileElementsMounted: UseFloatingOptions['whileElementsMounted'] = (...args) =>\n /* istanbul ignore next: не знаю как проверить */\n autoUpdateFloatingElement(...args, { elementResize: true });\n\n/**\n * @private\n */\nexport const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>({\n trigger = DEFAULT_TRIGGER,\n\n // UseFloating\n placement: placementProp = 'bottom',\n middlewares,\n hoverDelay = 0,\n closeAfterClick = false,\n\n // disables\n disabled = false,\n disableInteractive = false,\n disableCloseOnClickOutside = false,\n disableCloseOnEscKey = false,\n\n // uncontrolled\n defaultShown = false,\n\n // controlled\n shown: shownProp,\n onShownChange: onShownChangeProp,\n onShownChanged: onShownChangedProp,\n}: UseFloatingWithInteractionsProps): UseFloatingWithInteractionsReturn<T> => {\n const memoizedValue = React.useMemo(\n () => (shownProp !== undefined ? { shown: shownProp } : undefined),\n [shownProp],\n );\n const [shownLocalState, setShownLocalState] = useCustomEnsuredControl<LocalState>({\n value: memoizedValue,\n disabled,\n defaultValue: { shown: defaultShown },\n onChange: useStableCallback(({ shown, reason }) => {\n if (onShownChangeProp) {\n onShownChangeProp(shown, reason);\n }\n }),\n });\n const onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);\n const [shownFinalState, setShownFinalState] = React.useState(() => shownLocalState.shown);\n const [willBeHide, setWillBeHide] = React.useState(false);\n\n const hasCSSAnimation = React.useRef(false);\n\n const blockMouseEnterRef = React.useRef(false);\n const blockFocusRef = React.useRef(false);\n const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleCloseOnReferenceClickOutsideDisabled =\n disabled || disableCloseOnClickOutside || willBeHide || !shownLocalState.shown;\n const handleCloseOnFloatingClickOutsideDisabled =\n disableInteractive || handleCloseOnReferenceClickOutsideDisabled;\n\n const { triggerOnFocus, triggerOnClick, triggerOnHover } = useResolveTriggerType(trigger);\n\n // Библиотека `floating-ui`\n const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({\n strategy: 'fixed',\n placement: placementProp,\n middleware: middlewares,\n whileElementsMounted,\n });\n\n const commitShownLocalState = React.useCallback(\n (nextShown: boolean, reason: ShownChangeReason) => {\n setShownLocalState((prevState) => {\n if (prevState.shown !== nextShown || prevState.reason !== reason) {\n return {\n shown: nextShown,\n reason,\n };\n }\n /* istanbul ignore next: страховка, если вдруг на момент вызова обновления состояния, оно уже будет актуальным */\n return prevState;\n });\n },\n [setShownLocalState],\n );\n\n const [mouseEnterDelay, mouseLeaveDelay] =\n typeof hoverDelay === 'number' ? [hoverDelay, hoverDelay] : hoverDelay;\n\n const showWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(true, 'hover'), mouseEnterDelay),\n [mouseEnterDelay, commitShownLocalState],\n );\n\n const hideWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(false, 'hover'), mouseLeaveDelay),\n [mouseLeaveDelay, commitShownLocalState],\n );\n\n const handleFocusOnReference = useStableCallback(() => {\n // Повторный вызов события фокуса - следствие клика на reference-элемент\n if (shownLocalState.shown) {\n commitShownLocalState(false, 'focus');\n return;\n }\n if (blockFocusRef.current) {\n /* istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) */\n blockFocusRef.current = false;\n return;\n }\n\n commitShownLocalState(true, 'focus');\n });\n\n const handleBlurOnReference = useStableCallback((event: React.FocusEvent) => {\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (!shownLocalState.shown) {\n clearTimeout(blurTimeoutRef.current);\n return;\n }\n\n const relatedTarget = event.relatedTarget;\n blurTimeoutRef.current = setTimeout(function waitWindowBlurFire() {\n const reference = refs.reference.current;\n // Если пользователь покинул текущее окно в открытом состоянии, то\n // не закрываем всплывающий элемент.\n /* istanbul ignore if: не умеем симулировать уход из текущего окна */\n if (!relatedTarget && getActiveElementByAnotherElement(reference) === reference) {\n /* istanbul ignore next */\n return;\n }\n\n // Если пользователь нажал на всплывающий элемент, то не закрываем всплывающий элемент.\n // Note: для этого элемент должен быть фокусируемый (например, за счёт `tabindex=\"-1\"`).\n if (contains(refs.floating.current, relatedTarget) || contains(reference, relatedTarget)) {\n return;\n }\n\n commitShownLocalState(false, 'focus');\n });\n });\n\n const handleClickOnReference = useStableCallback(() => {\n // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов\n if (shownLocalState.reason === 'focus') {\n commitShownLocalState(shownLocalState.shown, 'click');\n return;\n }\n commitShownLocalState(!shownLocalState.shown, 'click');\n });\n\n const handleClickOnReferenceForOnlyClose = useStableCallback(() => {\n blockMouseEnterRef.current = true;\n commitShownLocalState(false, 'click');\n });\n\n const handleMouseEnterOnBoth = useStableCallback((event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n if (!blockMouseEnterRef.current && !shownLocalState.shown) {\n showWithDelay();\n }\n });\n\n const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (triggerOnHover) {\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n hideWithDelay();\n }\n },\n );\n\n const handleFloatingAnimationStart = () => {\n hasCSSAnimation.current = true;\n };\n\n const handleFloatingAnimationEnd = () => {\n if (willBeHide) {\n setShownFinalState(false);\n setWillBeHide(false);\n onShownChanged(false, shownLocalState.reason);\n }\n };\n\n const handleOnClose = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'callback');\n }, [commitShownLocalState]);\n\n const handleRestoreFocus = React.useCallback(\n () => (triggerOnFocus ? blockFocusRef.current : true),\n [triggerOnFocus],\n );\n\n const handleEscapeKeyDown = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'escape-key');\n }, [commitShownLocalState]);\n\n const handleClickOutside = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'click-outside');\n }, [commitShownLocalState]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n handleCloseOnReferenceClickOutsideDisabled ? null : refs.reference,\n handleCloseOnFloatingClickOutsideDisabled ? null : refs.floating,\n );\n\n useIsomorphicLayoutEffect(\n /**\n * Если пользователь покинул активное окно и:\n * 1. целевой элемент был в состоянии фокуса;\n * 2. всплывающий элемент был закрытом состоянии;\n * то фокус должен быть заблокирован, когда пользователь вернётся обратно. Иначе покажется\n * всплывающий элемент.\n */\n function setGlobalBlurForTriggerOnFocus() {\n if (!triggerOnFocus || !refs.reference.current) {\n return;\n }\n\n const handleGlobalBlur = () => {\n /* istanbul ignore next */\n const reference = refs.reference.current;\n /* istanbul ignore if: не умеем симулировать уход из текущего окна */\n if (\n !shownLocalState.shown &&\n isHTMLElement(reference) &&\n reference === getActiveElementByAnotherElement(reference)\n ) {\n /* istanbul ignore next */\n blockFocusRef.current = true;\n }\n };\n\n const win = getWindow(refs.reference.current);\n win.addEventListener('blur', handleGlobalBlur);\n return () => {\n win.removeEventListener('blur', handleGlobalBlur);\n };\n },\n [triggerOnFocus, refs.reference, shownLocalState],\n );\n\n useIsomorphicLayoutEffect(\n function resolveShownStates() {\n if (willBeHide || shownLocalState.shown === shownFinalState) {\n return;\n }\n\n if (shownLocalState.shown) {\n setShownFinalState(true);\n onShownChanged(true, shownLocalState.reason);\n } else if (hasCSSAnimation.current && !willBeHide) {\n setWillBeHide(true);\n } else {\n setShownFinalState(false);\n }\n\n return () => {\n clearTimeout(blurTimeoutRef.current);\n };\n },\n [shownLocalState, shownFinalState, willBeHide, onShownChanged],\n );\n\n const referencePropsRef = React.useRef<ReferenceProps>({});\n const floatingPropsRef = React.useRef<FloatingProps>({ style: {} });\n\n if (shownFinalState) {\n floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(\n strategy,\n x,\n y,\n undefined,\n middlewareData,\n );\n\n if (disableInteractive) {\n floatingPropsRef.current.style.pointerEvents = 'none';\n }\n }\n\n if (triggerOnFocus) {\n referencePropsRef.current.onFocus = handleFocusOnReference;\n referencePropsRef.current.onBlur = handleBlurOnReference;\n }\n\n if (triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReference;\n }\n\n if (triggerOnHover) {\n referencePropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n\n if (closeAfterClick && !triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReferenceForOnlyClose;\n }\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n }\n }\n\n if (triggerOnHover || triggerOnFocus) {\n referencePropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n }\n }\n\n if (shownFinalState) {\n floatingPropsRef.current.onAnimationStart = handleFloatingAnimationStart;\n floatingPropsRef.current.onAnimationEnd = handleFloatingAnimationEnd;\n }\n\n return {\n placement,\n shown: shownFinalState,\n willBeHide,\n refs,\n referenceProps: referencePropsRef.current,\n floatingProps: floatingPropsRef.current,\n middlewareData,\n onClose: handleOnClose,\n // FocusTrap уже определяет нажатие на ESC, поэтому название события содержит конкретный код\n // кнопки вместо просто onKeyDown.\n onEscapeKeyDown: !shownFinalState || disableCloseOnEscKey ? undefined : handleEscapeKeyDown,\n // [Обход баги с FocusTrap]\n //\n // Если сфокусироваться на целевой элемент через нажатие, а потом нажать в область за пределами\n // целевого и всплывающего элемента, то появляется моргание из-за того, что FocusTrap\n // восстанавливает фокус, из-за чего всплывающий элемент снова показывается за счёт\n // `handleFocusOnReference`, а потом скрывается за счёт `handleBlurOnReference`.\n onRestoreFocus: handleRestoreFocus,\n };\n};\n"],"names":["useFloatingWithInteractions","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","trigger","DEFAULT_TRIGGER","placement","placementProp","middlewares","hoverDelay","closeAfterClick","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","onShownChangeProp","onShownChanged","onShownChangedProp","memoizedValue","React","useMemo","undefined","shownLocalState","setShownLocalState","useCustomEnsuredControl","value","defaultValue","onChange","useStableCallback","reason","noop","shownFinalState","setShownFinalState","useState","willBeHide","setWillBeHide","hasCSSAnimation","useRef","blockMouseEnterRef","blockFocusRef","blurTimeoutRef","handleCloseOnReferenceClickOutsideDisabled","handleCloseOnFloatingClickOutsideDisabled","triggerOnFocus","triggerOnClick","triggerOnHover","useResolveTriggerType","x","y","strategy","refs","middlewareData","useFloating","middleware","commitShownLocalState","useCallback","nextShown","prevState","mouseEnterDelay","mouseLeaveDelay","showWithDelay","debounce","hideWithDelay","handleFocusOnReference","current","handleBlurOnReference","event","clearTimeout","relatedTarget","setTimeout","waitWindowBlurFire","reference","getActiveElementByAnotherElement","contains","floating","handleClickOnReference","handleClickOnReferenceForOnlyClose","handleMouseEnterOnBoth","currentTarget","cancel","handleMouseLeaveOnBothForHoverAndFocusStates","handleFloatingAnimationStart","handleFloatingAnimationEnd","handleOnClose","handleRestoreFocus","handleEscapeKeyDown","handleClickOutside","useGlobalOnClickOutside","useIsomorphicLayoutEffect","setGlobalBlurForTriggerOnFocus","handleGlobalBlur","isHTMLElement","win","getWindow","addEventListener","removeEventListener","resolveShownStates","referencePropsRef","floatingPropsRef","style","convertFloatingDataToReactCSSProperties","pointerEvents","onFocus","onBlur","onClick","onMouseOver","onMouseLeave","onAnimationStart","onAnimationEnd","referenceProps","floatingProps","onClose","onEscapeKeyDown","onRestoreFocus"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce, noop } from '@vkontakte/vkjs';\nimport { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';\nimport { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';\nimport { useStableCallback } from '../../../hooks/useStableCallback';\nimport { contains, getActiveElementByAnotherElement } from '../../dom';\nimport { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';\nimport { autoUpdateFloatingElement, useFloating } from '../adapters';\nimport { convertFloatingDataToReactCSSProperties } from '../functions';\nimport { type UseFloatingOptions } from '../types/common';\nimport { DEFAULT_TRIGGER } from './constants';\nimport type {\n FloatingProps,\n ReferenceProps,\n ShownChangeReason,\n UseFloatingWithInteractionsProps,\n UseFloatingWithInteractionsReturn,\n} from './types';\nimport { useResolveTriggerType } from './useResolveTriggerType';\n\ntype LocalState = { shown: boolean; reason?: ShownChangeReason };\n\nconst whileElementsMounted: UseFloatingOptions['whileElementsMounted'] = (...args) =>\n /* istanbul ignore next: не знаю как проверить */\n autoUpdateFloatingElement(...args, { elementResize: true });\n\n/**\n * @private\n */\nexport const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>({\n trigger = DEFAULT_TRIGGER,\n\n // UseFloating\n placement: placementProp = 'bottom',\n middlewares,\n hoverDelay = 0,\n closeAfterClick = false,\n\n // disables\n disabled = false,\n disableInteractive = false,\n disableCloseOnClickOutside = false,\n disableCloseOnEscKey = false,\n\n // uncontrolled\n defaultShown = false,\n\n // controlled\n shown: shownProp,\n onShownChange: onShownChangeProp,\n onShownChanged: onShownChangedProp,\n}: UseFloatingWithInteractionsProps): UseFloatingWithInteractionsReturn<T> => {\n const memoizedValue = React.useMemo<LocalState | undefined>(\n () => (shownProp !== undefined ? { shown: shownProp } : undefined),\n [shownProp],\n );\n const [shownLocalState, setShownLocalState] = useCustomEnsuredControl<LocalState>({\n value: memoizedValue,\n disabled,\n defaultValue: { shown: defaultShown },\n onChange: useStableCallback(({ shown, reason }) => {\n if (onShownChangeProp) {\n onShownChangeProp(shown, reason);\n }\n }),\n });\n const onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);\n const [shownFinalState, setShownFinalState] = React.useState(() => shownLocalState.shown);\n const [willBeHide, setWillBeHide] = React.useState(false);\n\n const hasCSSAnimation = React.useRef(false);\n\n const blockMouseEnterRef = React.useRef(false);\n const blockFocusRef = React.useRef(false);\n const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleCloseOnReferenceClickOutsideDisabled =\n disabled || disableCloseOnClickOutside || willBeHide || !shownLocalState.shown;\n const handleCloseOnFloatingClickOutsideDisabled =\n disableInteractive || handleCloseOnReferenceClickOutsideDisabled;\n\n const { triggerOnFocus, triggerOnClick, triggerOnHover } = useResolveTriggerType(trigger);\n\n // Библиотека `floating-ui`\n const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({\n strategy: 'fixed',\n placement: placementProp,\n middleware: middlewares,\n whileElementsMounted,\n });\n\n const commitShownLocalState = React.useCallback(\n (nextShown: boolean, reason: ShownChangeReason) => {\n setShownLocalState((prevState) => {\n if (prevState.shown !== nextShown || prevState.reason !== reason) {\n return {\n shown: nextShown,\n reason,\n };\n }\n /* istanbul ignore next: страховка, если вдруг на момент вызова обновления состояния, оно уже будет актуальным */\n return prevState;\n });\n },\n [setShownLocalState],\n );\n\n const [mouseEnterDelay, mouseLeaveDelay] =\n typeof hoverDelay === 'number' ? [hoverDelay, hoverDelay] : hoverDelay;\n\n const showWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(true, 'hover'), mouseEnterDelay),\n [mouseEnterDelay, commitShownLocalState],\n );\n\n const hideWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(false, 'hover'), mouseLeaveDelay),\n [mouseLeaveDelay, commitShownLocalState],\n );\n\n const handleFocusOnReference = useStableCallback(() => {\n // Повторный вызов события фокуса - следствие клика на reference-элемент\n if (shownLocalState.shown) {\n commitShownLocalState(false, 'focus');\n return;\n }\n if (blockFocusRef.current) {\n /* istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) */\n blockFocusRef.current = false;\n return;\n }\n\n commitShownLocalState(true, 'focus');\n });\n\n const handleBlurOnReference = useStableCallback((event: React.FocusEvent) => {\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (!shownLocalState.shown) {\n clearTimeout(blurTimeoutRef.current);\n return;\n }\n\n const relatedTarget = event.relatedTarget;\n blurTimeoutRef.current = setTimeout(function waitWindowBlurFire() {\n const reference = refs.reference.current;\n // Если пользователь покинул текущее окно в открытом состоянии, то\n // не закрываем всплывающий элемент.\n /* istanbul ignore if: не умеем симулировать уход из текущего окна */\n if (!relatedTarget && getActiveElementByAnotherElement(reference) === reference) {\n /* istanbul ignore next */\n return;\n }\n\n // Если пользователь нажал на всплывающий элемент, то не закрываем всплывающий элемент.\n // Note: для этого элемент должен быть фокусируемый (например, за счёт `tabindex=\"-1\"`).\n if (contains(refs.floating.current, relatedTarget) || contains(reference, relatedTarget)) {\n return;\n }\n\n commitShownLocalState(false, 'focus');\n });\n });\n\n const handleClickOnReference = useStableCallback(() => {\n // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов\n if (shownLocalState.reason === 'focus') {\n commitShownLocalState(shownLocalState.shown, 'click');\n return;\n }\n commitShownLocalState(!shownLocalState.shown, 'click');\n });\n\n const handleClickOnReferenceForOnlyClose = useStableCallback(() => {\n blockMouseEnterRef.current = true;\n commitShownLocalState(false, 'click');\n });\n\n const handleMouseEnterOnBoth = useStableCallback((event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n if (!blockMouseEnterRef.current && !shownLocalState.shown) {\n showWithDelay();\n }\n });\n\n const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (triggerOnHover) {\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n hideWithDelay();\n }\n },\n );\n\n const handleFloatingAnimationStart = () => {\n hasCSSAnimation.current = true;\n };\n\n const handleFloatingAnimationEnd = () => {\n if (willBeHide) {\n setShownFinalState(false);\n setWillBeHide(false);\n onShownChanged(false, shownLocalState.reason);\n }\n };\n\n const handleOnClose = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'callback');\n }, [commitShownLocalState]);\n\n const handleRestoreFocus = React.useCallback(\n () => (triggerOnFocus ? blockFocusRef.current : true),\n [triggerOnFocus],\n );\n\n const handleEscapeKeyDown = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'escape-key');\n }, [commitShownLocalState]);\n\n const handleClickOutside = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'click-outside');\n }, [commitShownLocalState]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n handleCloseOnReferenceClickOutsideDisabled ? null : refs.reference,\n handleCloseOnFloatingClickOutsideDisabled ? null : refs.floating,\n );\n\n useIsomorphicLayoutEffect(\n /**\n * Если пользователь покинул активное окно и:\n * 1. целевой элемент был в состоянии фокуса;\n * 2. всплывающий элемент был закрытом состоянии;\n * то фокус должен быть заблокирован, когда пользователь вернётся обратно. Иначе покажется\n * всплывающий элемент.\n */\n function setGlobalBlurForTriggerOnFocus() {\n if (!triggerOnFocus || !refs.reference.current) {\n return;\n }\n\n const handleGlobalBlur = () => {\n /* istanbul ignore next */\n const reference = refs.reference.current;\n /* istanbul ignore if: не умеем симулировать уход из текущего окна */\n if (\n !shownLocalState.shown &&\n isHTMLElement(reference) &&\n reference === getActiveElementByAnotherElement(reference)\n ) {\n /* istanbul ignore next */\n blockFocusRef.current = true;\n }\n };\n\n const win = getWindow(refs.reference.current);\n win.addEventListener('blur', handleGlobalBlur);\n return () => {\n win.removeEventListener('blur', handleGlobalBlur);\n };\n },\n [triggerOnFocus, refs.reference, shownLocalState],\n );\n\n useIsomorphicLayoutEffect(\n function resolveShownStates() {\n if (willBeHide || shownLocalState.shown === shownFinalState) {\n return;\n }\n\n if (shownLocalState.shown) {\n setShownFinalState(true);\n onShownChanged(true, shownLocalState.reason);\n } else if (hasCSSAnimation.current && !willBeHide) {\n setWillBeHide(true);\n } else {\n setShownFinalState(false);\n }\n\n return () => {\n clearTimeout(blurTimeoutRef.current);\n };\n },\n [shownLocalState, shownFinalState, willBeHide, onShownChanged],\n );\n\n const referencePropsRef = React.useRef<ReferenceProps>({});\n const floatingPropsRef = React.useRef<FloatingProps>({ style: {} });\n\n if (shownFinalState) {\n floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(\n strategy,\n x,\n y,\n undefined,\n middlewareData,\n );\n\n if (disableInteractive) {\n floatingPropsRef.current.style.pointerEvents = 'none';\n }\n }\n\n if (triggerOnFocus) {\n referencePropsRef.current.onFocus = handleFocusOnReference;\n referencePropsRef.current.onBlur = handleBlurOnReference;\n }\n\n if (triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReference;\n }\n\n if (triggerOnHover) {\n referencePropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n\n if (closeAfterClick && !triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReferenceForOnlyClose;\n }\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n }\n }\n\n if (triggerOnHover || triggerOnFocus) {\n referencePropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n }\n }\n\n if (shownFinalState) {\n floatingPropsRef.current.onAnimationStart = handleFloatingAnimationStart;\n floatingPropsRef.current.onAnimationEnd = handleFloatingAnimationEnd;\n }\n\n return {\n placement,\n shown: shownFinalState,\n willBeHide,\n refs,\n referenceProps: referencePropsRef.current,\n floatingProps: floatingPropsRef.current,\n middlewareData,\n onClose: handleOnClose,\n // FocusTrap уже определяет нажатие на ESC, поэтому название события содержит конкретный код\n // кнопки вместо просто onKeyDown.\n onEscapeKeyDown: !shownFinalState || disableCloseOnEscKey ? undefined : handleEscapeKeyDown,\n // [Обход баги с FocusTrap]\n //\n // Если сфокусироваться на целевой элемент через нажатие, а потом нажать в область за пределами\n // целевого и всплывающего элемента, то появляется моргание из-за того, что FocusTrap\n // восстанавливает фокус, из-за чего всплывающий элемент снова показывается за счёт\n // `handleFocusOnReference`, а потом скрывается за счёт `handleBlurOnReference`.\n onRestoreFocus: handleRestoreFocus,\n };\n};\n"],"names":["useFloatingWithInteractions","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","trigger","DEFAULT_TRIGGER","placement","placementProp","middlewares","hoverDelay","closeAfterClick","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","onShownChangeProp","onShownChanged","onShownChangedProp","memoizedValue","React","useMemo","undefined","shownLocalState","setShownLocalState","useCustomEnsuredControl","value","defaultValue","onChange","useStableCallback","reason","noop","shownFinalState","setShownFinalState","useState","willBeHide","setWillBeHide","hasCSSAnimation","useRef","blockMouseEnterRef","blockFocusRef","blurTimeoutRef","handleCloseOnReferenceClickOutsideDisabled","handleCloseOnFloatingClickOutsideDisabled","triggerOnFocus","triggerOnClick","triggerOnHover","useResolveTriggerType","x","y","strategy","refs","middlewareData","useFloating","middleware","commitShownLocalState","useCallback","nextShown","prevState","mouseEnterDelay","mouseLeaveDelay","showWithDelay","debounce","hideWithDelay","handleFocusOnReference","current","handleBlurOnReference","event","clearTimeout","relatedTarget","setTimeout","waitWindowBlurFire","reference","getActiveElementByAnotherElement","contains","floating","handleClickOnReference","handleClickOnReferenceForOnlyClose","handleMouseEnterOnBoth","currentTarget","cancel","handleMouseLeaveOnBothForHoverAndFocusStates","handleFloatingAnimationStart","handleFloatingAnimationEnd","handleOnClose","handleRestoreFocus","handleEscapeKeyDown","handleClickOutside","useGlobalOnClickOutside","useIsomorphicLayoutEffect","setGlobalBlurForTriggerOnFocus","handleGlobalBlur","isHTMLElement","win","getWindow","addEventListener","removeEventListener","resolveShownStates","referencePropsRef","floatingPropsRef","style","convertFloatingDataToReactCSSProperties","pointerEvents","onFocus","onBlur","onClick","onMouseOver","onMouseLeave","onAnimationStart","onAnimationEnd","referenceProps","floatingProps","onClose","onEscapeKeyDown","onRestoreFocus"],"mappings":"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"}
@@ -117,6 +117,13 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
117
117
  const inputRef = useExternRef(getRef, inputRefHook);
118
118
  // Связано с CustomSelectDropdownProps
119
119
  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
120
+ const onDropdownPlacementChange = React.useCallback((placement)=>{
121
+ if (placement.startsWith('top')) {
122
+ setDropdownVerticalPlacement('top');
123
+ } else if (placement.startsWith('bottom')) {
124
+ setDropdownVerticalPlacement('bottom');
125
+ }
126
+ }, []);
120
127
  const dropdownId = React.useId();
121
128
  const dropdownCurrentItemId = focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;
122
129
  const dropdownScrollBoxRef = React.useRef(null);
@@ -244,13 +251,6 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
244
251
  focusedOptionIndex,
245
252
  setFocusedOption
246
253
  ]);
247
- const onDropdownPlacementChange = React.useCallback((placement)=>{
248
- /* istanbul ignore next: */ if (placement.startsWith('top')) {
249
- setDropdownVerticalPlacement('top');
250
- } else if (placement.startsWith('bottom')) {
251
- setDropdownVerticalPlacement('bottom');
252
- }
253
- }, []);
254
254
  const onDropdownMouseLeave = React.useCallback(()=>{
255
255
  setFocusedOptionIndex(null);
256
256
  }, [
@@ -262,7 +262,7 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
262
262
  setOpened
263
263
  ]);
264
264
  useGlobalOnClickOutside(handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
265
- const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && ((dropdownVerticalPlacement === null || dropdownVerticalPlacement === void 0 ? void 0 : dropdownVerticalPlacement.includes('top')) ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down") || undefined, [
265
+ const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && (dropdownVerticalPlacement.includes('top') ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down") || undefined, [
266
266
  dropdownOffsetDistance,
267
267
  opened,
268
268
  dropdownVerticalPlacement
@@ -308,7 +308,7 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
308
308
  opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
309
309
  "data-testid": dropdownTestId,
310
310
  targetRef: rootRef,
311
- placement: placementProp,
311
+ placement: dropdownVerticalPlacement,
312
312
  scrollBoxRef: dropdownScrollBoxRef,
313
313
  onPlacementChange: onDropdownPlacementChange,
314
314
  onMouseLeave: onDropdownMouseLeave,