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