@vkontakte/vkui 7.3.5 → 7.3.7
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/components/ChipsInputBase/Chip/Chip.d.ts.map +1 -1
- package/dist/components/ChipsInputBase/Chip/Chip.js +1 -0
- package/dist/components/ChipsInputBase/Chip/Chip.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js +3 -8
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/components/Clickable/Clickable.js +3 -2
- package/dist/components/Clickable/Clickable.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +7 -6
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/PanelHeader/PanelHeader.d.ts +0 -2
- package/dist/components/PanelHeader/PanelHeader.d.ts.map +1 -1
- package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/Chip/Chip.js +1 -0
- package/dist/cssm/components/ChipsInputBase/Chip/Chip.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +3 -8
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/Clickable/Clickable.js +1 -1
- package/dist/cssm/components/Clickable/Clickable.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +5 -5
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cssm/hooks/useGlobalOnClickOutside.js +10 -7
- package/dist/cssm/hooks/useGlobalOnClickOutside.js.map +1 -1
- package/dist/cssm/lib/date.js +1 -1
- package/dist/cssm/lib/date.js.map +1 -1
- package/dist/cssm/lib/layouts/gaps.js +1 -1
- package/dist/cssm/lib/layouts/gaps.js.map +1 -1
- package/dist/hooks/useGlobalOnClickOutside.d.ts +1 -0
- package/dist/hooks/useGlobalOnClickOutside.d.ts.map +1 -1
- package/dist/hooks/useGlobalOnClickOutside.js +10 -7
- package/dist/hooks/useGlobalOnClickOutside.js.map +1 -1
- package/dist/lib/date.js +1 -1
- package/dist/lib/date.js.map +1 -1
- package/dist/lib/layouts/gaps.js +1 -1
- package/dist/lib/layouts/gaps.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ChipsInputBase/Chip/Chip.tsx +1 -0
- package/src/components/ChipsSelect/ChipsSelect.tsx +5 -9
- package/src/components/Clickable/Clickable.tsx +1 -0
- package/src/components/CustomSelect/CustomSelect.tsx +5 -4
- package/src/components/PanelHeader/PanelHeader.tsx +0 -2
- package/src/hooks/useGlobalOnClickOutside.ts +19 -8
- package/src/lib/date.ts +1 -1
- package/src/lib/layouts/gaps.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wKAelB,SAAS,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wKAelB,SAAS,KAAG,KAAK,CAAC,SAgEpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n Component = 'span',\n value = '',\n removable = true,\n onRemove,\n removeLabel = 'Удалить',\n before,\n after,\n disabled,\n readOnly,\n children,\n className,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: ChipProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const { focusVisible, onFocus, onBlur } = useFocusVisible();\n const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n onFocus(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n onBlur(event);\n };\n\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove?.(event, value);\n },\n [onRemove, value],\n );\n\n return (\n <RootComponent\n {...restProps}\n Component={Component}\n className={classNames(\n styles.host,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n focusVisibleClassName,\n className,\n )}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n onFocus={disabled ? undefined : handleFocus}\n onBlur={disabled ? undefined : handleBlur}\n >\n <div className={styles.in}>\n {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n <Footnote className={styles.content}>{children}</Footnote>\n {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n </div>\n {!readOnly && removable && (\n <div className={styles.removable}>\n <button\n tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n disabled={disabled}\n className={styles.remove}\n onClick={disabled ? undefined : onRemoveWrapper}\n >\n <VisuallyHidden>\n {removeLabel} {children}\n </VisuallyHidden>\n <Icon16Cancel />\n </button>\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAbHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM,EAAE2B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGtB;IAC1C,MAAM2B,wBAAwB1B,yBAAyB;QAAEyB;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBpC,MAAMqC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACR,uDACKsB;QACJf,WAAWA;QACXU,WAAWtB,6BAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXrB,aAAagB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACX;wBAASgB,SAAS;kCAAmBD;;oBACrCpB,aAAaiB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n Component = 'span',\n value = '',\n removable = true,\n onRemove,\n removeLabel = 'Удалить',\n before,\n after,\n disabled,\n readOnly,\n children,\n className,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: ChipProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const { focusVisible, onFocus, onBlur } = useFocusVisible();\n const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n onFocus(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n onBlur(event);\n };\n\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove?.(event, value);\n },\n [onRemove, value],\n );\n\n return (\n <RootComponent\n {...restProps}\n Component={Component}\n className={classNames(\n styles.host,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n focusVisibleClassName,\n className,\n )}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n onFocus={disabled ? undefined : handleFocus}\n onBlur={disabled ? undefined : handleBlur}\n >\n <div className={styles.in}>\n {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n <Footnote className={styles.content}>{children}</Footnote>\n {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n </div>\n {!readOnly && removable && (\n <div className={styles.removable}>\n <button\n type=\"button\"\n tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n disabled={disabled}\n className={styles.remove}\n onClick={disabled ? undefined : onRemoveWrapper}\n >\n <VisuallyHidden>\n {removeLabel} {children}\n </VisuallyHidden>\n <Icon16Cancel />\n </button>\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","type","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAbHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM,EAAE2B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGtB;IAC1C,MAAM2B,wBAAwB1B,yBAAyB;QAAEyB;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBpC,MAAMqC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACR,uDACKsB;QACJf,WAAWA;QACXU,WAAWtB,6BAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXrB,aAAagB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACX;wBAASgB,SAAS;kCAAmBD;;oBACrCpB,aAAaiB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACXvB,UAAUA;oBACVG,SAAS;oBACTqB,SAASxB,WAAWmB,YAAYJ;;sCAEhC,MAAC3B;;gCAAe;gCACNS;gCAAY;gCAAEK;;;sCAExB,KAACtB;;;;;;AAMb,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAa7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkC5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,CACpD,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC,EAClD,IAAI,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnF;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,UAAU,EAAE,ytBAmDpD,gBAAgB,CAAC,MAAM,CAAC,KAAG,KAAK,CAAC,SAwanC,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { classNames } from "@vkontakte/vkjs";
|
|
8
8
|
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
9
|
-
import {
|
|
9
|
+
import { useGlobalOnEventOutside } from "../../hooks/useGlobalOnClickOutside.js";
|
|
10
10
|
import { Keys } from "../../lib/accessibility.js";
|
|
11
11
|
import { defaultFilterFn } from "../../lib/select.js";
|
|
12
12
|
import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase.js";
|
|
@@ -121,7 +121,6 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
|
|
|
121
121
|
// Связано с ChipsInputProps
|
|
122
122
|
const rootRef = useExternRef(getRootRef);
|
|
123
123
|
const inputRef = useExternRef(getRef, inputRefHook);
|
|
124
|
-
const forbidCloseByOutsideClick = React.useRef(false);
|
|
125
124
|
// Связано с CustomSelectDropdownProps
|
|
126
125
|
const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
|
|
127
126
|
const onDropdownPlacementChange = React.useCallback((placement)=>{
|
|
@@ -264,14 +263,11 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
|
|
|
264
263
|
setFocusedOptionIndex
|
|
265
264
|
]);
|
|
266
265
|
const handleClickOutside = React.useCallback(()=>{
|
|
267
|
-
|
|
268
|
-
setOpened(false);
|
|
269
|
-
}
|
|
270
|
-
forbidCloseByOutsideClick.current = false;
|
|
266
|
+
setOpened(false);
|
|
271
267
|
}, [
|
|
272
268
|
setOpened
|
|
273
269
|
]);
|
|
274
|
-
|
|
270
|
+
useGlobalOnEventOutside('mousedown', handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
|
|
275
271
|
const onDropdownIconClick = React.useCallback((e)=>{
|
|
276
272
|
if (opened) {
|
|
277
273
|
e.preventDefault();
|
|
@@ -321,7 +317,6 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
|
|
|
321
317
|
if (!event.defaultPrevented) {
|
|
322
318
|
closeAfterSelect && setOpened(false);
|
|
323
319
|
addOption(option);
|
|
324
|
-
forbidCloseByOutsideClick.current = true;
|
|
325
320
|
clearInput();
|
|
326
321
|
}
|
|
327
322
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type MouseEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n const forbidCloseByOutsideClick = React.useRef(false);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n if (!forbidCloseByOutsideClick.current) {\n setOpened(false);\n }\n forbidCloseByOutsideClick.current = false;\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n forbidCloseByOutsideClick.current = true;\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","forbidCloseByOutsideClick","useRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnEventOutside(\n 'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AAqBjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAgDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,OAAO,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AAqBjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAgDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,OAAO,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAmB9D,CAAC"}
|
|
@@ -76,9 +76,10 @@ import { RealClickable } from "./RealClickable.js";
|
|
|
76
76
|
const commonProps = component(props);
|
|
77
77
|
const isClickable = checkClickable(props);
|
|
78
78
|
const Component = isClickable ? RealClickable : NonClickable;
|
|
79
|
-
const { baseClassName, disabled } = props, restProps = _object_without_properties(props, [
|
|
79
|
+
const { baseClassName, disabled, Component: ignore } = props, restProps = _object_without_properties(props, [
|
|
80
80
|
"baseClassName",
|
|
81
|
-
"disabled"
|
|
81
|
+
"disabled",
|
|
82
|
+
"Component"
|
|
82
83
|
]);
|
|
83
84
|
return /*#__PURE__*/ _jsx(Component, _object_spread({
|
|
84
85
|
baseClassName: classNames(baseClassName, "vkuiClickable__host")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n focusVisibleMode,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined ||\n props.onClick !== undefined ||\n props.onClickCapture !== undefined ||\n props.Component === 'a' ||\n props.Component === 'button' ||\n props.Component === 'label' ||\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component, disabled };\n } else if (href !== undefined) {\n return {\n Component: 'a',\n\n /**\n * Если ссылка отключена, добавляем атрибуты для доступности.\n *\n * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n *\n * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n *\n */\n ...(disabled && {\n 'aria-disabled': true,\n 'role': 'link',\n }),\n };\n } else if (onClick !== undefined || onClickCapture !== undefined) {\n return {\n Component: 'div',\n role: 'button',\n ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n };\n }\n\n return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(props);\n const isClickable = checkClickable(props);\n const Component = isClickable ? RealClickable : NonClickable;\n\n const {\n baseClassName,\n disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n ...restProps\n } = props;\n\n return (\n <Component\n baseClassName={classNames(baseClassName, styles.host)}\n {...commonProps}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAShD;;CAEC,GACD,MAAMC,eAAe;QAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAEE,WADfC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAEuB,KAACd,kCAAkBe;;AAE5C;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;WAWPC,YAAY;YACd,iBAAiB;YACjB,QAAQ;QACV;IAEJ,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;WACFF,WAAW;YAAE,iBAAiB;QAAK,IAAI;YAAEG,UAAU;QAAE;IAE7D;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAczB,gBAAgBC;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n focusVisibleMode,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined ||\n props.onClick !== undefined ||\n props.onClickCapture !== undefined ||\n props.Component === 'a' ||\n props.Component === 'button' ||\n props.Component === 'label' ||\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component, disabled };\n } else if (href !== undefined) {\n return {\n Component: 'a',\n\n /**\n * Если ссылка отключена, добавляем атрибуты для доступности.\n *\n * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n *\n * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n *\n */\n ...(disabled && {\n 'aria-disabled': true,\n 'role': 'link',\n }),\n };\n } else if (onClick !== undefined || onClickCapture !== undefined) {\n return {\n Component: 'div',\n role: 'button',\n ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n };\n }\n\n return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(props);\n const isClickable = checkClickable(props);\n const Component = isClickable ? RealClickable : NonClickable;\n\n const {\n baseClassName,\n disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n Component: ignore,\n ...restProps\n } = props;\n\n return (\n <Component\n baseClassName={classNames(baseClassName, styles.host)}\n {...commonProps}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","ignore"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAShD;;CAEC,GACD,MAAMC,eAAe;QAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAEE,WADfC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAEuB,KAACd,kCAAkBe;;AAE5C;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;WAWPC,YAAY;YACd,iBAAiB;YACjB,QAAQ;QACV;IAEJ,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;WACFF,WAAW;YAAE,iBAAiB;QAAK,IAAI;YAAEG,UAAU;QAAE;IAE7D;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAczB,gBAAgBC;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACRD,WAAWS,MAAM,EAElB,GAAGX,OADCF,uCACDE;QAJFU;QACAP;QACAD;;IAIF,qBACE,KAACA;QACCQ,eAAe5B,WAAW4B;OACtBF,aACAV;AAGV,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAM7D,OAAO,KAAK,EACV,iBAAiB,EAEjB,WAAW,EACZ,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,uCAAuC,CAAC;AAgH/C,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,2BAA2B,CAC7E,SAAQ,uBAAuB;IAC/B;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;CACX;AAED,YAAY,EAAE,4BAA4B,EAAE,CAAC;AAE7C,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,IAAI,CAAC,yBAAyB,EAAE,oBAAoB,CAAC,EACrD,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAClF;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACpE;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -89,7 +89,7 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
89
89
|
* @see https://vkcom.github.io/VKUI/#/CustomSelect
|
|
90
90
|
*/ export function CustomSelect(props) {
|
|
91
91
|
const [opened, setOpened] = React.useState(false);
|
|
92
|
-
const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, onInputKeyDown } = props, restProps = _object_without_properties(props, [
|
|
92
|
+
const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, onInputKeyDown, readOnly } = props, restProps = _object_without_properties(props, [
|
|
93
93
|
"before",
|
|
94
94
|
"name",
|
|
95
95
|
"className",
|
|
@@ -124,7 +124,8 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
124
124
|
"required",
|
|
125
125
|
"getSelectInputRef",
|
|
126
126
|
"overscrollBehavior",
|
|
127
|
-
"onInputKeyDown"
|
|
127
|
+
"onInputKeyDown",
|
|
128
|
+
"readOnly"
|
|
128
129
|
]);
|
|
129
130
|
if (process.env.NODE_ENV === 'development') {
|
|
130
131
|
checkOptionsValueType(optionsProp);
|
|
@@ -612,7 +613,7 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
612
613
|
iconProp,
|
|
613
614
|
opened
|
|
614
615
|
]);
|
|
615
|
-
const afterIcons = (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
616
|
+
const afterIcons = !readOnly && (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
616
617
|
children: [
|
|
617
618
|
clearButton,
|
|
618
619
|
icon
|
|
@@ -706,13 +707,13 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
706
707
|
onFocus: onFocus,
|
|
707
708
|
onBlur: onBlur,
|
|
708
709
|
className: openedClassNames,
|
|
709
|
-
readOnly: !searchable,
|
|
710
|
+
readOnly: readOnly || !searchable,
|
|
710
711
|
fetching: fetching,
|
|
711
712
|
value: inputValue,
|
|
712
713
|
onKeyUp: handleKeyUp,
|
|
713
|
-
onKeyDown: _onInputKeyDown,
|
|
714
|
+
onKeyDown: !readOnly ? _onInputKeyDown : undefined,
|
|
714
715
|
onChange: onInputChange,
|
|
715
|
-
onClick: onClick,
|
|
716
|
+
onClick: !readOnly ? onClick : undefined,
|
|
716
717
|
before: before,
|
|
717
718
|
after: afterIcons,
|
|
718
719
|
selectType: selectType,
|