@vkontakte/vkui 6.2.1 → 6.2.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 (109) hide show
  1. package/dist/cjs/components/Checkbox/Checkbox.d.ts.map +1 -1
  2. package/dist/cjs/components/Checkbox/Checkbox.js +10 -8
  3. package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
  4. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  5. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js +1 -3
  6. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  7. package/dist/cjs/components/FocusTrap/FocusTrap.d.ts.map +1 -1
  8. package/dist/cjs/components/FocusTrap/FocusTrap.js +10 -1
  9. package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
  10. package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.d.ts.map +1 -1
  11. package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js +1 -1
  12. package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  13. package/dist/cjs/components/Snackbar/Snackbar.d.ts +6 -0
  14. package/dist/cjs/components/Snackbar/Snackbar.d.ts.map +1 -1
  15. package/dist/cjs/components/Snackbar/Snackbar.js +3 -1
  16. package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
  17. package/dist/cjs/components/Snackbar/types.d.ts +1 -0
  18. package/dist/cjs/components/Snackbar/types.d.ts.map +1 -1
  19. package/dist/cjs/components/Snackbar/utils.d.ts +4 -8
  20. package/dist/cjs/components/Snackbar/utils.d.ts.map +1 -1
  21. package/dist/cjs/components/Snackbar/utils.js +31 -41
  22. package/dist/cjs/components/Snackbar/utils.js.map +1 -1
  23. package/dist/cjs/helpers/array.d.ts +5 -0
  24. package/dist/cjs/helpers/array.d.ts.map +1 -0
  25. package/dist/cjs/helpers/array.js +20 -0
  26. package/dist/cjs/helpers/array.js.map +1 -0
  27. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  28. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +9 -5
  29. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  30. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  31. package/dist/components/Checkbox/Checkbox.js +10 -8
  32. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  33. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  34. package/dist/components/ChipsInputBase/ChipsInputBase.js +1 -3
  35. package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  36. package/dist/components/FocusTrap/FocusTrap.d.ts.map +1 -1
  37. package/dist/components/FocusTrap/FocusTrap.js +10 -1
  38. package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
  39. package/dist/components/PanelHeaderContext/PanelHeaderContext.d.ts.map +1 -1
  40. package/dist/components/PanelHeaderContext/PanelHeaderContext.js +1 -1
  41. package/dist/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  42. package/dist/components/Snackbar/Snackbar.d.ts +6 -0
  43. package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
  44. package/dist/components/Snackbar/Snackbar.js +3 -1
  45. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  46. package/dist/components/Snackbar/types.d.ts +1 -0
  47. package/dist/components/Snackbar/types.d.ts.map +1 -1
  48. package/dist/components/Snackbar/types.js.map +1 -1
  49. package/dist/components/Snackbar/utils.d.ts +4 -8
  50. package/dist/components/Snackbar/utils.d.ts.map +1 -1
  51. package/dist/components/Snackbar/utils.js +30 -41
  52. package/dist/components/Snackbar/utils.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 +101 -75
  56. package/dist/cssm/components/Checkbox/Checkbox.d.ts.map +1 -1
  57. package/dist/cssm/components/Checkbox/Checkbox.js +10 -8
  58. package/dist/cssm/components/Checkbox/Checkbox.js.map +1 -1
  59. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  60. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +1 -3
  61. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  62. package/dist/cssm/components/FocusTrap/FocusTrap.d.ts.map +1 -1
  63. package/dist/cssm/components/FocusTrap/FocusTrap.js +10 -1
  64. package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
  65. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.d.ts.map +1 -1
  66. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js +1 -1
  67. package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
  68. package/dist/cssm/components/Search/Search.module.css +4 -5
  69. package/dist/cssm/components/Snackbar/Snackbar.d.ts +6 -0
  70. package/dist/cssm/components/Snackbar/Snackbar.d.ts.map +1 -1
  71. package/dist/cssm/components/Snackbar/Snackbar.js +3 -1
  72. package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
  73. package/dist/cssm/components/Snackbar/Snackbar.module.css +47 -33
  74. package/dist/cssm/components/Snackbar/types.d.ts +1 -0
  75. package/dist/cssm/components/Snackbar/types.d.ts.map +1 -1
  76. package/dist/cssm/components/Snackbar/types.js.map +1 -1
  77. package/dist/cssm/components/Snackbar/utils.d.ts +4 -8
  78. package/dist/cssm/components/Snackbar/utils.d.ts.map +1 -1
  79. package/dist/cssm/components/Snackbar/utils.js +30 -41
  80. package/dist/cssm/components/Snackbar/utils.js.map +1 -1
  81. package/dist/cssm/helpers/array.d.ts +5 -0
  82. package/dist/cssm/helpers/array.d.ts.map +1 -0
  83. package/dist/cssm/helpers/array.js +10 -0
  84. package/dist/cssm/helpers/array.js.map +1 -0
  85. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  86. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +9 -5
  87. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  88. package/dist/helpers/array.d.ts +5 -0
  89. package/dist/helpers/array.d.ts.map +1 -0
  90. package/dist/helpers/array.js +10 -0
  91. package/dist/helpers/array.js.map +1 -0
  92. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  93. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +9 -5
  94. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  95. package/dist/vkui.css +2 -2
  96. package/dist/vkui.css.map +1 -1
  97. package/dist/vkui.js.tmp +101 -75
  98. package/package.json +1 -1
  99. package/src/components/Checkbox/Checkbox.tsx +11 -8
  100. package/src/components/ChipsInputBase/ChipsInputBase.tsx +1 -3
  101. package/src/components/FocusTrap/FocusTrap.tsx +10 -1
  102. package/src/components/PanelHeaderContext/PanelHeaderContext.tsx +2 -0
  103. package/src/components/Search/Search.module.css +4 -5
  104. package/src/components/Snackbar/Snackbar.module.css +47 -33
  105. package/src/components/Snackbar/Snackbar.tsx +9 -0
  106. package/src/components/Snackbar/types.ts +8 -1
  107. package/src/components/Snackbar/utils.ts +46 -42
  108. package/src/helpers/array.ts +9 -0
  109. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +18 -10
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAWpE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC,EACxB,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,2MAiBlB,aAAa,4CAwIf,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAepE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC,EACxB,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,2MAiBlB,aAAa,4CAuIf,CAAC"}
@@ -26,6 +26,9 @@ const _Tappable = require("../Tappable/Tappable");
26
26
  const _Footnote = require("../Typography/Footnote/Footnote");
27
27
  const _Text = require("../Typography/Text/Text");
28
28
  const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
29
+ function setIndeterminate(el, indeterminate) {
30
+ el.indeterminate = indeterminate;
31
+ }
29
32
  const sizeYClassNames = {
30
33
  none: "vkuiCheckbox--sizeY-none",
31
34
  ['compact']: "vkuiCheckbox--sizeY-compact"
@@ -54,9 +57,9 @@ const Checkbox = (_param)=>{
54
57
  const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
55
58
  const { sizeY: adaptiveSizeY } = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)();
56
59
  _react.useEffect(()=>{
57
- const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
60
+ const indeterminateValue = indeterminate !== null && indeterminate !== void 0 ? indeterminate : Boolean(defaultIndeterminate);
58
61
  if (inputRef.current) {
59
- inputRef.current.indeterminate = Boolean(indeterminateValue);
62
+ setIndeterminate(inputRef.current, indeterminateValue);
60
63
  }
61
64
  }, [
62
65
  defaultIndeterminate,
@@ -64,19 +67,18 @@ const Checkbox = (_param)=>{
64
67
  inputRef
65
68
  ]);
66
69
  const handleChange = _react.useCallback((event)=>{
67
- if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
68
- inputRef.current.indeterminate = false;
70
+ if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
71
+ event.currentTarget.indeterminate = false;
69
72
  }
70
- if (indeterminate !== undefined && inputRef.current) {
71
- inputRef.current.indeterminate = indeterminate;
73
+ if (indeterminate !== undefined) {
74
+ event.currentTarget.indeterminate = indeterminate;
72
75
  }
73
76
  onChange && onChange(event);
74
77
  }, [
75
78
  defaultIndeterminate,
76
79
  indeterminate,
77
80
  restProps.checked,
78
- onChange,
79
- inputRef
81
+ onChange
80
82
  ]);
81
83
  if (process.env.NODE_ENV === 'development') {
82
84
  if (defaultIndeterminate && restProps.defaultChecked) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20CheckBoxIndetermanate,\n Icon20CheckBoxOff,\n Icon20CheckBoxOn,\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n none: styles['Checkbox--sizeY-none'],\n ['compact']: styles['Checkbox--sizeY-compact'],\n};\n\nexport interface CheckboxProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement>,\n Pick<\n TappableProps,\n 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n indeterminate?: boolean;\n defaultIndeterminate?: boolean;\n titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n children,\n className,\n style,\n getRootRef,\n getRef,\n description,\n indeterminate,\n defaultIndeterminate,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n onChange,\n titleAfter,\n ...restProps\n}: CheckboxProps) => {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminateValue);\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange: CheckboxProps['onChange'] = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined &&\n inputRef.current\n ) {\n inputRef.current.indeterminate = false;\n }\n if (indeterminate !== undefined && inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <Tappable\n Component=\"label\"\n className={classNames(\n styles['Checkbox'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n className,\n )}\n style={style}\n disabled={restProps.disabled}\n activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"checkbox\"\n onChange={handleChange}\n className={styles['Checkbox__input']}\n getRootRef={inputRef}\n />\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n {platform === 'vkcom' ? (\n <Icon20CheckBoxOn />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n {platform === 'vkcom' ? (\n <Icon20CheckBoxOff />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div\n className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n >\n {platform === 'vkcom' ? (\n <Icon20CheckBoxIndetermanate width={20} height={20} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.compact.className}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.regular.className}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={styles['Checkbox__content']}>\n <div className={styles['Checkbox__title']}>\n <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n </div>\n {hasReactNode(description) && (\n <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n )}\n </div>\n </Tappable>\n );\n};\n"],"names":["Checkbox","sizeYClassNames","none","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","hasReactNode","disabled","activeEffectDelay","DEFAULT_ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20CheckBoxIndetermanate,\n Icon20CheckBoxOff,\n Icon20CheckBoxOn,\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nfunction setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {\n el.indeterminate = indeterminate;\n}\n\nconst sizeYClassNames = {\n none: styles['Checkbox--sizeY-none'],\n ['compact']: styles['Checkbox--sizeY-compact'],\n};\n\nexport interface CheckboxProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement>,\n Pick<\n TappableProps,\n 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n indeterminate?: boolean;\n defaultIndeterminate?: boolean;\n titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n children,\n className,\n style,\n getRootRef,\n getRef,\n description,\n indeterminate,\n defaultIndeterminate,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n onChange,\n titleAfter,\n ...restProps\n}: CheckboxProps) => {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);\n\n if (inputRef.current) {\n setIndeterminate(inputRef.current, indeterminateValue);\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange: CheckboxProps['onChange'] = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined\n ) {\n event.currentTarget.indeterminate = false;\n }\n if (indeterminate !== undefined) {\n event.currentTarget.indeterminate = indeterminate;\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <Tappable\n Component=\"label\"\n className={classNames(\n styles['Checkbox'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n className,\n )}\n style={style}\n disabled={restProps.disabled}\n activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"checkbox\"\n onChange={handleChange}\n className={styles['Checkbox__input']}\n getRootRef={inputRef}\n />\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n {platform === 'vkcom' ? (\n <Icon20CheckBoxOn />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n {platform === 'vkcom' ? (\n <Icon20CheckBoxOff />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div\n className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n >\n {platform === 'vkcom' ? (\n <Icon20CheckBoxIndetermanate width={20} height={20} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.compact.className}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.regular.className}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={styles['Checkbox__content']}>\n <div className={styles['Checkbox__title']}>\n <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n </div>\n {hasReactNode(description) && (\n <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n )}\n </div>\n </Tappable>\n );\n};\n"],"names":["Checkbox","setIndeterminate","el","indeterminate","sizeYClassNames","none","warn","warnOnce","children","className","style","getRootRef","getRef","description","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","React","useEffect","indeterminateValue","Boolean","current","handleChange","useCallback","event","undefined","checked","currentTarget","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","hasReactNode","disabled","activeEffectDelay","DEFAULT_ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChipsInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,UAAU,EAAmB,0BAA0B,EAAc,MAAM,SAAS,CAAC;AAQnG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,kQA2BhD,0BAA0B,CAAC,CAAC,CAAC,4CA+M/B,CAAC"}
1
+ {"version":3,"file":"ChipsInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,UAAU,EAAmB,0BAA0B,EAAc,MAAM,SAAS,CAAC;AAQnG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,kQA2BhD,0BAA0B,CAAC,CAAC,CAAC,4CA6M/B,CAAC"}
@@ -147,9 +147,7 @@ const ChipsInputBase = (_param)=>{
147
147
  if ((0, _dom1.contains)(event.currentTarget, (0, _dom1.getActiveElementByAnotherElement)(event.currentTarget))) {
148
148
  return;
149
149
  }
150
- if (valueLength > 0 && listboxRef.current) {
151
- moveFocusToChipOption(0, 'first', listboxRef.current);
152
- } else if (inputRef.current) {
150
+ if (inputRef.current) {
153
151
  inputRef.current.focus();
154
152
  }
155
153
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles['ChipsInputBase--sizeY-none'],\n compact: styles['ChipsInputBase--sizeY-compact'],\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n ...restProps\n}: ChipsInputBasePrivateProps<O>) => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O | ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!inputRef.current || !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented || !listboxRef.current || !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {\n return;\n }\n\n if (valueLength > 0 && listboxRef.current) {\n moveFocusToChipOption(0, 'first', listboxRef.current);\n } else if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={after}\n status={status}\n mode={mode}\n className={className}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles['ChipsInputBase'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles['ChipsInputBase--hasPlaceholder'],\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.label}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled || disabled,\n 'readOnly': option.readOnly || readOnly,\n 'className': styles['ChipsInputBase__chip'],\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp || `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles['ChipsInputBase__el']}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["ChipsInputBase","sizeYClassNames","none","compact","getRootRef","style","className","before","after","status","mode","value","DEFAULT_VALUE","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","renderChipDefault","getRef","id","idProp","inputValue","DEFAULT_INPUT_VALUE","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","restProps","sizeY","useAdaptivity","idGenerated","React","useId","inputRef","useExternRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","getNextChipOptionIndexByNavigateToProp","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","isHTMLElement","key","Keys","ENTER","checkTargetIsInputEl","isInputValueEmpty","preventDefault","DELETE","BACKSPACE","getChipOptionValueByHTMLElement","getChipOptionIndexByHTMLElement","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","getHorizontalFocusGoTo","handleInputBlur","handleChipRemove","v","stopPropagation","getChipOptionIndexByValueProp","handleRootClick","contains","currentTarget","getActiveElementByAnotherElement","FormField","Component","onClick","undefined","div","classNames","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","Text","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","onChange"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles['ChipsInputBase--sizeY-none'],\n compact: styles['ChipsInputBase--sizeY-compact'],\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n ...restProps\n}: ChipsInputBasePrivateProps<O>) => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O | ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!inputRef.current || !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented || !listboxRef.current || !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {\n return;\n }\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={after}\n status={status}\n mode={mode}\n className={className}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles['ChipsInputBase'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles['ChipsInputBase--hasPlaceholder'],\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.label}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled || disabled,\n 'readOnly': option.readOnly || readOnly,\n 'className': styles['ChipsInputBase__chip'],\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp || `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles['ChipsInputBase__el']}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["ChipsInputBase","sizeYClassNames","none","compact","getRootRef","style","className","before","after","status","mode","value","DEFAULT_VALUE","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","renderChipDefault","getRef","id","idProp","inputValue","DEFAULT_INPUT_VALUE","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","restProps","sizeY","useAdaptivity","idGenerated","React","useId","inputRef","useExternRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","getNextChipOptionIndexByNavigateToProp","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","isHTMLElement","key","Keys","ENTER","checkTargetIsInputEl","isInputValueEmpty","preventDefault","DELETE","BACKSPACE","getChipOptionValueByHTMLElement","getChipOptionIndexByHTMLElement","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","getHorizontalFocusGoTo","handleInputBlur","handleChipRemove","v","stopPropagation","getChipOptionIndexByValueProp","handleRootClick","contains","currentTarget","getActiveElementByAnotherElement","FormField","Component","onClick","undefined","div","classNames","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","Text","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","onChange"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAWzE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,+HAW5C,cAAc,CAAC,CAAC,CAAC,4CAiMnB,CAAC"}
1
+ {"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAYzE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,+HAW5C,cAAc,CAAC,CAAC,CAAC,4CAyMnB,CAAC"}
@@ -13,6 +13,7 @@ const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
13
13
  const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
14
14
  const _jsxruntime = require("react/jsx-runtime");
15
15
  const _react = require("react");
16
+ const _array = require("../../helpers/array");
16
17
  const _useExternRef = require("../../hooks/useExternRef");
17
18
  const _accessibility = require("../../lib/accessibility");
18
19
  const _dom = require("../../lib/dom");
@@ -37,7 +38,9 @@ const FocusTrap = (_param)=>{
37
38
  const focusNodeByIndex = (nodeIndex)=>{
38
39
  const element = focusableNodesRef.current[nodeIndex];
39
40
  if (element) {
40
- element.focus();
41
+ element.focus({
42
+ preventScroll: true
43
+ });
41
44
  }
42
45
  };
43
46
  const recalculateFocusableNodesRef = (parentNode)=>{
@@ -57,7 +60,13 @@ const FocusTrap = (_param)=>{
57
60
  focusableNodesRef.current = nodes;
58
61
  };
59
62
  const onMutateParentHandler = (parentNode)=>{
63
+ const oldFocusableNodes = [
64
+ ...focusableNodesRef.current
65
+ ];
60
66
  recalculateFocusableNodesRef(parentNode);
67
+ if ((0, _array.arraysEquals)(oldFocusableNodes, focusableNodesRef.current)) {
68
+ return;
69
+ }
61
70
  if (document) {
62
71
  const activeElement = document.activeElement;
63
72
  const currentElementIndex = Math.max(document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, 0);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n contains,\n getActiveElementByAnotherElement,\n getWindow,\n isHTMLElement,\n useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n extends AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n autoFocus?: boolean;\n restoreFocus?: boolean | (() => boolean);\n mount?: boolean;\n timeout?: number;\n onClose?: () => void;\n /**\n * Форсированное отключение захвата фокуса\n */\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n Component = 'div',\n onClose,\n autoFocus = true,\n restoreFocus = true,\n disabled = false,\n mount = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps<T>) => {\n const ref = useExternRef<T>(getRootRef);\n const { document } = useDOM();\n\n const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n const focusNodeByIndex = (nodeIndex: number) => {\n const element = focusableNodesRef.current[nodeIndex];\n\n if (element) {\n element.focus();\n }\n };\n\n const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n // eslint-disable-next-line no-restricted-properties\n const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n const nodes: HTMLElement[] = [];\n newFocusableElements.forEach((focusableEl) => {\n const { display, visibility } = getComputedStyle(focusableEl);\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl);\n }\n });\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(parentNode);\n }\n focusableNodesRef.current = nodes;\n };\n\n const onMutateParentHandler = (parentNode: HTMLElement) => {\n recalculateFocusableNodesRef(parentNode);\n\n if (document) {\n const activeElement = document.activeElement as HTMLElement;\n const currentElementIndex = Math.max(\n document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n 0,\n );\n focusNodeByIndex(currentElementIndex);\n }\n };\n\n useIsomorphicLayoutEffect(\n function collectFocusableNodesRef() {\n if (!ref.current) {\n return;\n }\n const parentNode = ref.current;\n const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n observer.observe(ref.current, {\n subtree: true,\n childList: true,\n });\n recalculateFocusableNodesRef(parentNode);\n return () => observer.disconnect();\n },\n [ref],\n );\n\n useIsomorphicLayoutEffect(\n function tryToAutoFocusToFirstNode() {\n if (!ref.current || !autoFocus || disabled) {\n return;\n }\n\n const autoFocusToFirstNode = () => {\n if (!ref.current || !focusableNodesRef.current.length) {\n return;\n }\n const activeElement = getActiveElementByAnotherElement(ref.current);\n if (!contains(ref.current, activeElement)) {\n focusableNodesRef.current[0].focus();\n }\n };\n const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n },\n [autoFocus, timeout, disabled],\n );\n\n const restoreFocusImpl = useCallback(() => {\n const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n return;\n }\n\n setTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n setRestoreFocusTo(null);\n }\n }, timeout);\n }, [restoreFocus, restoreFocusTo, timeout]);\n\n useIsomorphicLayoutEffect(\n function calculateRestoreFocusTo() {\n if (!ref.current || !restoreFocus || !mount) {\n setRestoreFocusTo(null);\n return;\n }\n setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n },\n [ref, mount, restoreFocus],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusOnUnmount() {\n return () => restoreFocusImpl();\n },\n [restoreFocusImpl],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusWhenFakeUnmount() {\n if (!mount) {\n restoreFocusImpl();\n }\n },\n [mount, restoreFocusImpl],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const onDocumentKeydown = (event: KeyboardEvent) => {\n if (disabled) {\n return;\n }\n\n const pressedKeyResult = pressedKey(event);\n\n switch (pressedKeyResult) {\n case Keys.TAB: {\n if (!focusableNodesRef.current.length) {\n return false;\n }\n\n const lastIdx = focusableNodesRef.current.length - 1;\n const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n event.preventDefault();\n\n const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== getActiveElementByAnotherElement(node)) {\n node.focus();\n }\n\n return false;\n }\n\n break;\n }\n case Keys.ESCAPE: {\n if (onClose) {\n event.preventDefault();\n onClose();\n }\n }\n }\n\n return true;\n };\n\n const doc = getWindow(ref.current).document;\n doc.addEventListener('keydown', onDocumentKeydown, {\n capture: true,\n });\n return () => {\n doc.removeEventListener('keydown', onDocumentKeydown, true);\n };\n }, [onClose, ref, disabled]);\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { arraysEquals } from '../../helpers/array';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n contains,\n getActiveElementByAnotherElement,\n getWindow,\n isHTMLElement,\n useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n extends AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n autoFocus?: boolean;\n restoreFocus?: boolean | (() => boolean);\n mount?: boolean;\n timeout?: number;\n onClose?: () => void;\n /**\n * Форсированное отключение захвата фокуса\n */\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n Component = 'div',\n onClose,\n autoFocus = true,\n restoreFocus = true,\n disabled = false,\n mount = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps<T>) => {\n const ref = useExternRef<T>(getRootRef);\n const { document } = useDOM();\n\n const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n const focusNodeByIndex = (nodeIndex: number) => {\n const element = focusableNodesRef.current[nodeIndex];\n\n if (element) {\n element.focus({\n preventScroll: true,\n });\n }\n };\n\n const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n // eslint-disable-next-line no-restricted-properties\n const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n const nodes: HTMLElement[] = [];\n newFocusableElements.forEach((focusableEl) => {\n const { display, visibility } = getComputedStyle(focusableEl);\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl);\n }\n });\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(parentNode);\n }\n focusableNodesRef.current = nodes;\n };\n\n const onMutateParentHandler = (parentNode: HTMLElement) => {\n const oldFocusableNodes = [...focusableNodesRef.current];\n\n recalculateFocusableNodesRef(parentNode);\n\n if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {\n return;\n }\n\n if (document) {\n const activeElement = document.activeElement as HTMLElement;\n const currentElementIndex = Math.max(\n document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n 0,\n );\n focusNodeByIndex(currentElementIndex);\n }\n };\n\n useIsomorphicLayoutEffect(\n function collectFocusableNodesRef() {\n if (!ref.current) {\n return;\n }\n const parentNode = ref.current;\n const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n observer.observe(ref.current, {\n subtree: true,\n childList: true,\n });\n recalculateFocusableNodesRef(parentNode);\n return () => observer.disconnect();\n },\n [ref],\n );\n\n useIsomorphicLayoutEffect(\n function tryToAutoFocusToFirstNode() {\n if (!ref.current || !autoFocus || disabled) {\n return;\n }\n\n const autoFocusToFirstNode = () => {\n if (!ref.current || !focusableNodesRef.current.length) {\n return;\n }\n const activeElement = getActiveElementByAnotherElement(ref.current);\n if (!contains(ref.current, activeElement)) {\n focusableNodesRef.current[0].focus();\n }\n };\n const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n },\n [autoFocus, timeout, disabled],\n );\n\n const restoreFocusImpl = useCallback(() => {\n const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n return;\n }\n\n setTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n setRestoreFocusTo(null);\n }\n }, timeout);\n }, [restoreFocus, restoreFocusTo, timeout]);\n\n useIsomorphicLayoutEffect(\n function calculateRestoreFocusTo() {\n if (!ref.current || !restoreFocus || !mount) {\n setRestoreFocusTo(null);\n return;\n }\n setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n },\n [ref, mount, restoreFocus],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusOnUnmount() {\n return () => restoreFocusImpl();\n },\n [restoreFocusImpl],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusWhenFakeUnmount() {\n if (!mount) {\n restoreFocusImpl();\n }\n },\n [mount, restoreFocusImpl],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const onDocumentKeydown = (event: KeyboardEvent) => {\n if (disabled) {\n return;\n }\n\n const pressedKeyResult = pressedKey(event);\n\n switch (pressedKeyResult) {\n case Keys.TAB: {\n if (!focusableNodesRef.current.length) {\n return false;\n }\n\n const lastIdx = focusableNodesRef.current.length - 1;\n const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n event.preventDefault();\n\n const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== getActiveElementByAnotherElement(node)) {\n node.focus();\n }\n\n return false;\n }\n\n break;\n }\n case Keys.ESCAPE: {\n if (onClose) {\n event.preventDefault();\n onClose();\n }\n }\n }\n\n return true;\n };\n\n const doc = getWindow(ref.current).document;\n doc.addEventListener('keydown', onDocumentKeydown, {\n capture: true,\n });\n return () => {\n doc.removeEventListener('keydown', onDocumentKeydown, true);\n };\n }, [onClose, ref, disabled]);\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","preventScroll","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","oldFocusableNodes","arraysEquals","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDAwDzB,CAAC"}
1
+ {"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDA0DzB,CAAC"}
@@ -36,7 +36,7 @@ const PanelHeaderContext = (_param)=>{
36
36
  const platform = (0, _usePlatform.usePlatform)();
37
37
  const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
38
38
  const elementRef = _react.useRef(null);
39
- const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit');
39
+ const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit', undefined, true);
40
40
  const visible = animationState !== 'exited';
41
41
  (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && visible);
42
42
  const handleGlobalOnClickOutside = _react.useCallback((event)=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n none: styles['PanelHeaderContext--sizeX-none'],\n compact: styles['PanelHeaderContext--sizeX-compact'],\n regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n opened: boolean;\n onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n children,\n opened = false,\n className,\n onClose,\n ...restProps\n}: PanelHeaderContextProps) => {\n const platform = usePlatform();\n const { sizeX = 'none' } = useAdaptivity();\n const elementRef = React.useRef<HTMLDivElement>(null);\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n opened ? 'enter' : 'exit',\n );\n const visible = animationState !== 'exited';\n\n useScrollLock(platform !== 'vkcom' && visible);\n\n const handleGlobalOnClickOutside = React.useCallback(\n (event: MouseEvent) => {\n if (opened) {\n event.stopPropagation();\n onClose();\n }\n },\n [opened, onClose],\n );\n\n useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n if (!visible) {\n return null;\n }\n\n return (\n <FixedLayout\n {...restProps}\n className={classNames(\n styles['PanelHeaderContext'],\n platform === 'ios' && styles['PanelHeaderContext--ios'],\n opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n sizeXClassNames[sizeX],\n className,\n )}\n vertical=\"top\"\n >\n <div\n onClick={(event) => {\n event.stopPropagation();\n onClose();\n }}\n className={styles['PanelHeaderContext__fade']}\n />\n <div\n data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n className={styles['PanelHeaderContext__in']}\n ref={elementRef}\n {...animationHandlers}\n >\n <div className={styles['PanelHeaderContext__content']}>{children}</div>\n </div>\n </FixedLayout>\n );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU;IAErB,MAAMc,UAAUH,mBAAmB;IAEnCI,IAAAA,4BAAa,EAACX,aAAa,WAAWU;IAEtC,MAAME,6BAA6BP,OAAMQ,WAAW,CAClD,CAACC;QACC,IAAIlB,QAAQ;YACVkB,MAAMC,eAAe;YACrBjB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBkB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUN,aAAa;IAE3E,IAAI,CAACM,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNlB;QACJF,WAAWqB,IAAAA,gBAAU,4BAEnBlB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFsB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBjB;gBACF;gBACAD,SAAS;;0BAEX,qBAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3D7B,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACY;oBAAIvB,SAAS;8BAA0CF;;;;;AAIhE"}
1
+ {"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n none: styles['PanelHeaderContext--sizeX-none'],\n compact: styles['PanelHeaderContext--sizeX-compact'],\n regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n opened: boolean;\n onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n children,\n opened = false,\n className,\n onClose,\n ...restProps\n}: PanelHeaderContextProps) => {\n const platform = usePlatform();\n const { sizeX = 'none' } = useAdaptivity();\n const elementRef = React.useRef<HTMLDivElement>(null);\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n opened ? 'enter' : 'exit',\n undefined,\n true,\n );\n const visible = animationState !== 'exited';\n\n useScrollLock(platform !== 'vkcom' && visible);\n\n const handleGlobalOnClickOutside = React.useCallback(\n (event: MouseEvent) => {\n if (opened) {\n event.stopPropagation();\n onClose();\n }\n },\n [opened, onClose],\n );\n\n useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n if (!visible) {\n return null;\n }\n\n return (\n <FixedLayout\n {...restProps}\n className={classNames(\n styles['PanelHeaderContext'],\n platform === 'ios' && styles['PanelHeaderContext--ios'],\n opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n sizeXClassNames[sizeX],\n className,\n )}\n vertical=\"top\"\n >\n <div\n onClick={(event) => {\n event.stopPropagation();\n onClose();\n }}\n className={styles['PanelHeaderContext__fade']}\n />\n <div\n data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n className={styles['PanelHeaderContext__in']}\n ref={elementRef}\n {...animationHandlers}\n >\n <div className={styles['PanelHeaderContext__content']}>{children}</div>\n </div>\n </FixedLayout>\n );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","undefined","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU,QACnBc,WACA;IAEF,MAAMC,UAAUJ,mBAAmB;IAEnCK,IAAAA,4BAAa,EAACZ,aAAa,WAAWW;IAEtC,MAAME,6BAA6BR,OAAMS,WAAW,CAClD,CAACC;QACC,IAAInB,QAAQ;YACVmB,MAAMC,eAAe;YACrBlB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBmB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUP,aAAa;IAE3E,IAAI,CAACO,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNnB;QACJF,WAAWsB,IAAAA,gBAAU,4BAEnBnB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFuB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBlB;gBACF;gBACAD,SAAS;;0BAEX,qBAACwB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYhB;gBAC3Db,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACa;oBAAIxB,SAAS;8BAA0CF;;;;;AAIhE"}
@@ -5,6 +5,12 @@ import type { SnackbarPlacement } from './types';
5
5
  export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>, BasicProps {
6
6
  /**
7
7
  * Задаёт расположение компонента.
8
+ *
9
+ * > Note: в мобильном режиме:
10
+ * > - `"top-start"`/`"top-end"` перебивается на `"top"`, чтобы поведение было схожим с нативными
11
+ * > уведомлениями;
12
+ * > - `"bottom"`/`"bottom-end"` перебивается на "bottom-start", чтобы избежать вызова системных
13
+ * > функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.
8
14
  */
9
15
  placement?: SnackbarPlacement;
10
16
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;yJAgBlB,aAAa;;CAmMf,CAAC"}
1
+ {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;yJAgBlB,aAAa;;CAqMf,CAAC"}
@@ -18,6 +18,7 @@ const _vkjs = require("@vkontakte/vkjs");
18
18
  const _useExternRef = require("../../hooks/useExternRef");
19
19
  const _useFocusWithin = require("../../hooks/useFocusWithin");
20
20
  const _useGlobalEscKeyDown = require("../../hooks/useGlobalEscKeyDown");
21
+ const _useMediaQueries = require("../../hooks/useMediaQueries");
21
22
  const _usePlatform = require("../../hooks/usePlatform");
22
23
  const _animation = require("../../lib/animation");
23
24
  const _dom = require("../../lib/dom");
@@ -70,6 +71,7 @@ const Snackbar = (_param)=>{
70
71
  const shiftDataRef = _react.useRef(null);
71
72
  const rafRef = _react.useRef(null);
72
73
  const closeTimeoutIdRef = _react.useRef();
74
+ const mediaQueries = (0, _useMediaQueries.useMediaQueries)();
73
75
  const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(open ? 'enter' : 'exit', {
74
76
  onExited: onClose
75
77
  });
@@ -101,7 +103,7 @@ const Snackbar = (_param)=>{
101
103
  const handleTouchStart = (event)=>{
102
104
  panGestureRecognizer.current = new _touch.UIPanGestureRecognizer();
103
105
  panGestureRecognizer.current.setStartCoords(event.nativeEvent);
104
- shiftDataRef.current = (0, _utils.getInitialShiftData)(rootRef.current.offsetWidth, rootRef.current.offsetHeight);
106
+ shiftDataRef.current = (0, _utils.getInitialShiftData)(rootRef.current.offsetWidth, rootRef.current.offsetHeight, mediaQueries);
105
107
  setTouched(true);
106
108
  };
107
109
  const handleTouchMove = (event)=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n getInitialShiftData,\n getMovedShiftData,\n resolveOffsetYCssStyle,\n shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nconst placementClassNames = {\n 'top-start': styles['Snackbar--placement-top-start'],\n 'top': styles['Snackbar--placement-top'],\n 'top-end': styles['Snackbar--placement-top-end'],\n 'bottom-start': styles['Snackbar--placement-bottom-start'],\n 'bottom': styles['Snackbar--placement-bottom'],\n 'bottom-end': styles['Snackbar--placement-bottom-end'],\n};\n\nconst animationStateClassNames = {\n enter: styles['Snackbar--state-enter'],\n entering: styles['Snackbar--state-entering'],\n entered: styles['Snackbar--state-entered'],\n exit: styles['Snackbar--state-exit'],\n exiting: styles['Snackbar--state-exiting'],\n exited: undefined,\n};\n\nexport interface SnackbarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n BasicProps {\n /**\n * Задаёт расположение компонента.\n */\n placement?: SnackbarPlacement;\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (event: React.MouseEvent) => void;\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick = noop,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n style,\n getRootRef,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n\n const [open, setOpen] = React.useState(true);\n const [touched, setTouched] = React.useState(false);\n\n const rootRef = useExternRef(getRootRef);\n const focused = useFocusWithin(rootRef);\n const inRef = React.useRef<HTMLDivElement>(null);\n const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onExited: onClose,\n },\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number | null, y: number | null) => {\n rafRef.current = requestAnimationFrame(() => {\n if (rootRef.current) {\n x === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n y === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n }\n });\n },\n [rootRef],\n );\n\n const close = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleActionClick = (event: React.MouseEvent) => {\n close();\n if (action) {\n onActionClick(event);\n }\n };\n\n const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n panGestureRecognizer.current = new UIPanGestureRecognizer();\n panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n shiftDataRef.current = getInitialShiftData(\n rootRef.current!.offsetWidth,\n rootRef.current!.offsetHeight,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(shiftDataRef.current.x, shiftDataRef.current.y);\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (\n touched &&\n shiftDataRef.current &&\n panGestureRecognizer.current &&\n shouldBeClosedByShiftData(\n placement,\n shiftDataRef.current,\n getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n panGestureRecognizer.current.velocity(),\n )\n ) {\n close();\n }\n\n setTouched(false);\n };\n\n useIsomorphicLayoutEffect(\n function closeAfterDelay() {\n if (!open || focused || touched || animationState !== 'entered') {\n return;\n }\n closeTimeoutIdRef.current = setTimeout(close, duration);\n return function preventCloseAfterDelayOnUnmount() {\n clearTimeout(closeTimeoutIdRef.current);\n };\n },\n [open, focused, touched, animationState, close, duration],\n );\n\n useIsomorphicLayoutEffect(\n function clearUserInteractionDataAfterTouchEnd() {\n if (!touched) {\n clearRAF();\n shiftDataRef.current = null;\n panGestureRecognizer.current = null;\n\n if (open) {\n updateShiftAxisCSSProperties(null, null);\n }\n }\n },\n [touched, open, updateShiftAxisCSSProperties, clearRAF],\n );\n\n React.useEffect(() => clearRAF, [clearRAF]);\n\n useGlobalEscKeyDown(open, close);\n\n if (animationState === 'exited') {\n return null;\n }\n\n return (\n <RootComponent\n {...restProps}\n role=\"presentation\"\n baseClassName={classNames(\n styles['Snackbar'],\n platform === 'ios' && styles['Snackbar--ios'],\n touched && styles['Snackbar--touched'],\n placementClassNames[placement],\n animationStateClassNames[animationState],\n )}\n style={resolveOffsetYCssStyle(placement, style, offsetY)}\n getRootRef={rootRef}\n >\n <div\n role=\"alert\"\n className={styles['Snackbar__in']}\n ref={inRef}\n // mobile\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n // desktop\n onMouseDown={handleTouchStart}\n onMouseMove={handleTouchMove}\n onMouseUp={handleTouchEnd}\n onMouseLeave={handleTouchEnd}\n {...animationHandlers}\n >\n <Basic\n mode={mode}\n layout={layout}\n before={before}\n after={after}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={\n mode === 'dark'\n ? /* istanbul ignore next: проверяется в e2e */\n 'overlay'\n : 'accent'\n }\n size=\"s\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )\n }\n >\n {children}\n </Basic>\n </div>\n </RootComponent>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","placement","children","layout","action","before","after","duration","onActionClick","noop","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","platform","usePlatform","open","setOpen","React","useState","touched","setTouched","rootRef","useExternRef","focused","useFocusWithin","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","animationState","animationHandlers","useCSSKeyframesAnimationController","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","UIPanGestureRecognizer","setStartCoords","nativeEvent","getInitialShiftData","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","getMovedShiftData","delta","shifted","handleTouchEnd","shouldBeClosedByShiftData","getRelativeBoundingClientRect","velocity","useIsomorphicLayoutEffect","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","useGlobalEscKeyDown","RootComponent","role","baseClassName","classNames","resolveOffsetYCssStyle","div","className","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","Basic","Button","align","appearance","size","onClick"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n getInitialShiftData,\n getMovedShiftData,\n resolveOffsetYCssStyle,\n shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nconst placementClassNames = {\n 'top-start': styles['Snackbar--placement-top-start'],\n 'top': styles['Snackbar--placement-top'],\n 'top-end': styles['Snackbar--placement-top-end'],\n 'bottom-start': styles['Snackbar--placement-bottom-start'],\n 'bottom': styles['Snackbar--placement-bottom'],\n 'bottom-end': styles['Snackbar--placement-bottom-end'],\n};\n\nconst animationStateClassNames = {\n enter: styles['Snackbar--state-enter'],\n entering: styles['Snackbar--state-entering'],\n entered: styles['Snackbar--state-entered'],\n exit: styles['Snackbar--state-exit'],\n exiting: styles['Snackbar--state-exiting'],\n exited: undefined,\n};\n\nexport interface SnackbarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n BasicProps {\n /**\n * Задаёт расположение компонента.\n *\n * > Note: в мобильном режиме:\n * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n * > уведомлениями;\n * > - `\"bottom\"`/`\"bottom-end\"` перебивается на \"bottom-start\", чтобы избежать вызова системных\n * > функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n */\n placement?: SnackbarPlacement;\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (event: React.MouseEvent) => void;\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick = noop,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n style,\n getRootRef,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n\n const [open, setOpen] = React.useState(true);\n const [touched, setTouched] = React.useState(false);\n\n const rootRef = useExternRef(getRootRef);\n const focused = useFocusWithin(rootRef);\n const inRef = React.useRef<HTMLDivElement>(null);\n const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();\n const mediaQueries = useMediaQueries();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onExited: onClose,\n },\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number | null, y: number | null) => {\n rafRef.current = requestAnimationFrame(() => {\n if (rootRef.current) {\n x === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n y === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n }\n });\n },\n [rootRef],\n );\n\n const close = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleActionClick = (event: React.MouseEvent) => {\n close();\n if (action) {\n onActionClick(event);\n }\n };\n\n const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n panGestureRecognizer.current = new UIPanGestureRecognizer();\n panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n shiftDataRef.current = getInitialShiftData(\n rootRef.current!.offsetWidth,\n rootRef.current!.offsetHeight,\n mediaQueries,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(shiftDataRef.current.x, shiftDataRef.current.y);\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (\n touched &&\n shiftDataRef.current &&\n panGestureRecognizer.current &&\n shouldBeClosedByShiftData(\n placement,\n shiftDataRef.current,\n getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n panGestureRecognizer.current.velocity(),\n )\n ) {\n close();\n }\n\n setTouched(false);\n };\n\n useIsomorphicLayoutEffect(\n function closeAfterDelay() {\n if (!open || focused || touched || animationState !== 'entered') {\n return;\n }\n closeTimeoutIdRef.current = setTimeout(close, duration);\n return function preventCloseAfterDelayOnUnmount() {\n clearTimeout(closeTimeoutIdRef.current);\n };\n },\n [open, focused, touched, animationState, close, duration],\n );\n\n useIsomorphicLayoutEffect(\n function clearUserInteractionDataAfterTouchEnd() {\n if (!touched) {\n clearRAF();\n shiftDataRef.current = null;\n panGestureRecognizer.current = null;\n\n if (open) {\n updateShiftAxisCSSProperties(null, null);\n }\n }\n },\n [touched, open, updateShiftAxisCSSProperties, clearRAF],\n );\n\n React.useEffect(() => clearRAF, [clearRAF]);\n\n useGlobalEscKeyDown(open, close);\n\n if (animationState === 'exited') {\n return null;\n }\n\n return (\n <RootComponent\n {...restProps}\n role=\"presentation\"\n baseClassName={classNames(\n styles['Snackbar'],\n platform === 'ios' && styles['Snackbar--ios'],\n touched && styles['Snackbar--touched'],\n placementClassNames[placement],\n animationStateClassNames[animationState],\n )}\n style={resolveOffsetYCssStyle(placement, style, offsetY)}\n getRootRef={rootRef}\n >\n <div\n role=\"alert\"\n className={styles['Snackbar__in']}\n ref={inRef}\n // mobile\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n // desktop\n onMouseDown={handleTouchStart}\n onMouseMove={handleTouchMove}\n onMouseUp={handleTouchEnd}\n onMouseLeave={handleTouchEnd}\n {...animationHandlers}\n >\n <Basic\n mode={mode}\n layout={layout}\n before={before}\n after={after}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={\n mode === 'dark'\n ? /* istanbul ignore next: проверяется в e2e */\n 'overlay'\n : 'accent'\n }\n size=\"s\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )\n }\n >\n {children}\n </Basic>\n </div>\n </RootComponent>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","placement","children","layout","action","before","after","duration","onActionClick","noop","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","platform","usePlatform","open","setOpen","React","useState","touched","setTouched","rootRef","useExternRef","focused","useFocusWithin","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","useMediaQueries","animationState","animationHandlers","useCSSKeyframesAnimationController","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","UIPanGestureRecognizer","setStartCoords","nativeEvent","getInitialShiftData","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","getMovedShiftData","delta","shifted","handleTouchEnd","shouldBeClosedByShiftData","getRelativeBoundingClientRect","velocity","useIsomorphicLayoutEffect","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","useGlobalEscKeyDown","RootComponent","role","baseClassName","classNames","resolveOffsetYCssStyle","div","className","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","Basic","Button","align","appearance","size","onClick"],"mappings":"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"}
@@ -5,5 +5,6 @@ export type ShiftData = {
5
5
  width: number;
6
6
  height: number;
7
7
  shifted: boolean;
8
+ isDesktop: boolean;
8
9
  };
9
10
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC"}
@@ -1,12 +1,8 @@
1
+ import * as React from 'react';
2
+ import type { MediaQueries } from '../../lib/adaptivity';
1
3
  import type { ShiftData, SnackbarPlacement } from './types';
2
- export declare function resolveOffsetYCssStyle(placement: SnackbarPlacement, style?: React.CSSProperties, offsetY?: React.CSSProperties['inset']): import("react").CSSProperties | undefined;
3
- export declare function getInitialShiftData(width: number, height: number): {
4
- shifted: boolean;
5
- x: number;
6
- y: number;
7
- width: number;
8
- height: number;
9
- };
4
+ export declare function resolveOffsetYCssStyle(placement: SnackbarPlacement, style?: React.CSSProperties, offsetY?: React.CSSProperties['inset']): React.CSSProperties | undefined;
5
+ export declare function getInitialShiftData(width: number, height: number, mediaQueries: MediaQueries): ShiftData;
10
6
  export declare function getMovedShiftData(placement: SnackbarPlacement, shiftData: ShiftData, nextShift: {
11
7
  x: number;
12
8
  y: number;
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5D,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,iBAAiB,EAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,EAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,6CAevC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;EAQhE;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,aA6BpC;AAID,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,OAAO,EAC3B,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,WA2CnC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5D,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,iBAAiB,EAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,EAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,mCAevC;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GACzB,SAAS,CASX;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAClC,SAAS,CAuBX;AAID,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,OAAO,EAC3B,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,WA6CnC"}