npm - @vkontakte/vkui - Versions diffs - 6.1.1 → 6.2.0 - Mend

@vkontakte/vkui 6.1.1 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2039) hide show

package/dist/cjs/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n none: styles['Radio--sizeY-none'],\n ['compact']: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n </svg>\n );\n};\n\nexport interface RadioProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n Pick<\n TappableProps,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n titleAfter?: React.ReactNode;\n /*\n Позволяет передавать data-* аттрибуты элементу label\n /\n labelProps?: HasDataAttribute;\n}\n\n/\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n children,\n description,\n style,\n className,\n getRootRef,\n titleAfter,\n getRef,\n labelProps,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n ...restProps\n}: RadioProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n Component=\"label\"\n style={style}\n className={classNames(\n styles['Radio'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n {...labelProps}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"radio\"\n getRootRef={getRef}\n className={styles['Radio__input']}\n />\n <div className={styles['Radio__container']}>\n <RadioIcon className={styles['Radio__icon']} />\n <div className={styles['Radio__content']}>\n <div className={styles['Radio__title']}>\n <Text>{children}</Text>\n <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n </div>\n {hasReactNode(description) && (\n <Footnote className={styles['Radio__description']}>{description}</Footnote>\n )}\n </div>\n </div>\n </Tappable>\n );\n};\n"],"names":["Radio","sizeYClassNames","none","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","platform","usePlatform","sizeY","useAdaptivity","Tappable","Component","classNames","activeEffectDelay","DEFAULT_ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","Text","hasReactNode","Footnote"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;iEA7CU;sBACkB;+BACX;6BACF;0BAEgB;0BACC;0BACpB;sBACJ;gCACU;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,YAAY,CAACC;IACjB,qBACE,sBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,aAAW;OAAKJ;;0BAC1E,qBAACK;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,qBAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAAwBD,MAAK;;;;AAG5E;AAqBO,MAAMf,QAAQ;QAAC,EACpBiB,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLH,SAAS,EACTI,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEL,WADRC;QAbHZ;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ;QACPC,WAAU;QACVhB,OAAOA;QACPH,WAAWoB,IAAAA,gBAAU,eAEnBJ,UAAU,aAAa/B,eAAe,CAAC+B,MAAM,EAC7ChB;QAEFqB,mBAAmBP,aAAa,QAAQ,MAAMQ,qCAA2B;QACzEC,UAAUV,UAAUU,QAAQ;QAC5BnB,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;OACdL;;0BAEJ,qBAACiB,8BAAc,8CACTX;gBACJM,WAAU;gBACVM,MAAK;gBACLrB,YAAYE;gBACZN,SAAS;;0BAEX,sBAAC0B;gBAAI1B,SAAS;;kCACZ,qBAACb;wBAAUa,SAAS;;kCACpB,sBAAC0B;wBAAI1B,SAAS;;0CACZ,sBAAC0B;gCAAI1B,SAAS;;kDACZ,qBAAC2B,UAAI;kDAAE1B;;kDACP,qBAACyB;wCAAI1B,SAAS;kDAAgCK;;;;4BAE/CuB,IAAAA,kBAAY,EAAC1B,8BACZ,qBAAC2B,kBAAQ;gCAAC7B,SAAS;0CAAiCE;;;;;;;;AAMhE"}
1	+ {"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n none: styles['Radio--sizeY-none'],\n ['compact']: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n </svg>\n );\n};\n\nexport interface RadioProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n Pick<\n TappableProps,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n titleAfter?: React.ReactNode;\n /*\n Позволяет передавать data-* аттрибуты элементу label\n /\n labelProps?: HasDataAttribute;\n}\n\n/\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n children,\n description,\n style,\n className,\n getRootRef,\n titleAfter,\n getRef,\n labelProps,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n ...restProps\n}: RadioProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n Component=\"label\"\n style={style}\n className={classNames(\n styles['Radio'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n {...labelProps}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"radio\"\n getRootRef={getRef}\n className={styles['Radio__input']}\n />\n <div className={styles['Radio__container']}>\n <RadioIcon className={styles['Radio__icon']} />\n <div className={styles['Radio__content']}>\n <div className={styles['Radio__title']}>\n <Text>{children}</Text>\n <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n </div>\n {hasReactNode(description) && (\n <Footnote className={styles['Radio__description']}>{description}</Footnote>\n )}\n </div>\n </div>\n </Tappable>\n );\n};\n"],"names":["Radio","sizeYClassNames","none","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","platform","usePlatform","sizeY","useAdaptivity","Tappable","Component","classNames","activeEffectDelay","DEFAULT_ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","Text","hasReactNode","Footnote"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;iEA7CU;sBACkB;+BACX;6BACF;0BAEgB;0BACC;0BACpB;sBACJ;gCACU;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,YAAY,CAACC;IACjB,qBACE,sBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,aAAW;OAAKJ;;0BAC1E,qBAACK;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,qBAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAAwBD,MAAK;;;;AAG5E;AAqBO,MAAMf,QAAQ;QAAC,EACpBiB,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLH,SAAS,EACTI,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEL,WADRC;QAbHZ;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ;QACPC,WAAU;QACVhB,OAAOA;QACPH,WAAWoB,IAAAA,gBAAU,eAEnBJ,UAAU,aAAa/B,eAAe,CAAC+B,MAAM,EAC7ChB;QAEFqB,mBAAmBP,aAAa,QAAQ,MAAMQ,qCAA2B;QACzEC,UAAUV,UAAUU,QAAQ;QAC5BnB,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;OACdL;;0BAEJ,qBAACiB,8BAAc,8CACTX;gBACJM,WAAU;gBACVM,MAAK;gBACLrB,YAAYE;gBACZN,SAAS;;0BAEX,sBAAC0B;gBAAI1B,SAAS;;kCACZ,qBAACb;wBAAUa,SAAS;;kCACpB,sBAAC0B;wBAAI1B,SAAS;;0CACZ,sBAAC0B;gCAAI1B,SAAS;;kDACZ,qBAAC2B,UAAI;kDAAE1B;;kDACP,qBAACyB;wCAAI1B,SAAS;kDAAgCK;;;;4BAE/CuB,IAAAA,kBAAY,EAAC1B,8BACZ,qBAAC2B,kBAAQ;gCAAC7B,SAAS;0CAAiCE;;;;;;;;AAMhE"}

package/dist/cjs/components/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (\n <RootComponent\n baseClassName={classNames(\n styles['RadioGroup'],\n 'vkuiInternalRadioGroup',\n mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n )}\n {...restProps}\n />\n);\n"],"names":["RadioGroup","mode","restProps","RootComponent","baseClassName","classNames"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAYaA;;;eAAAA;;;;;;sBAZc;+BAEG;AAUvB,MAAMA,aAAa;QAAC,EAAEC,OAAO,UAAU,EAAiC,WAA5BC;QAAtBD;;yBAC3B,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,oBAEvB,0BACAJ,SAAS;OAEPC"}
1	+ {"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (\n <RootComponent\n baseClassName={classNames(\n styles['RadioGroup'],\n 'vkuiInternalRadioGroup',\n mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n )}\n {...restProps}\n />\n);\n"],"names":["RadioGroup","mode","restProps","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;sBAZc;+BAEG;AAUvB,MAAMA,aAAa;QAAC,EAAEC,OAAO,UAAU,EAAiC,WAA5BC;QAAtBD;;yBAC3B,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,oBAEvB,0BACAJ,SAAS;OAEPC"}

package/dist/cjs/components/Removable/Removable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n /\n (test) iOS only. testId кнопки, которая активирует кнопку удаления\n /\n toggleButtonTestId?: string;\n /\n (test) testId кнопки удаления\n /\n removeButtonTestId?: string;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children: childrenProp,\n toggleButtonTestId,\n removeButtonTestId,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n className={classNames(\n styles['Removable__action'],\n styles['Removable__toggle'],\n 'vkuiInternalRemovable__action',\n )}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n data-testid={toggleButtonTestId}\n >\n <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {typeof childrenProp === 'function'\n ? childrenProp({ isRemoving: removeOffset > 0 })\n : childrenProp}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n data-testid={removeButtonTestId}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableIosRenderProps {\n /\n Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n * Когда контент сдвинут `isRemoving = true`.\n /\n isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n RemovableProps {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n indent = false,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n platform === 'ios' && styles['Removable--ios'],\n align === 'start' && styles['Removable--align-start'],\n indent && styles['Removable--indent'],\n )}\n >\n {platform !== 'ios' && (\n <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={classNames(styles['Removable__action'], 'vkuiInternalRemovable__action')}\n onClick={onRemoveClick}\n label={removePlaceholderString}\n data-testid={removeButtonTestId}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === 'ios' && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n >\n {children}\n </RemovableIos>\n )}\n </RootComponent>\n );\n};\n"],"names":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","window","useDOM","removeButtonRef","React","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","onClick","disabled","data-testid","VisuallyHidden","i","role","isRemoving","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","onRemoveClick","preventDefault","getTextFromChildren","RootComponent","baseClassName","activeMode","hoverMode","label","Icon24Cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n /\n (test) iOS only. testId кнопки, которая активирует кнопку удаления\n /\n toggleButtonTestId?: string;\n /\n (test) testId кнопки удаления\n /\n removeButtonTestId?: string;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children: childrenProp,\n toggleButtonTestId,\n removeButtonTestId,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n className={classNames(\n styles['Removable__action'],\n styles['Removable__toggle'],\n 'vkuiInternalRemovable__action',\n )}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n data-testid={toggleButtonTestId}\n >\n <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {typeof childrenProp === 'function'\n ? childrenProp({ isRemoving: removeOffset > 0 })\n : childrenProp}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n data-testid={removeButtonTestId}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableIosRenderProps {\n /\n Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n * Когда контент сдвинут `isRemoving = true`.\n /\n isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n RemovableProps {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n indent = false,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n platform === 'ios' && styles['Removable--ios'],\n align === 'start' && styles['Removable--align-start'],\n indent && styles['Removable--indent'],\n )}\n >\n {platform !== 'ios' && (\n <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={classNames(styles['Removable__action'], 'vkuiInternalRemovable__action')}\n onClick={onRemoveClick}\n label={removePlaceholderString}\n data-testid={removeButtonTestId}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === 'ios' && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n >\n {children}\n </RemovableIos>\n )}\n </RootComponent>\n );\n};\n"],"names":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","window","useDOM","removeButtonRef","React","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","onClick","disabled","data-testid","VisuallyHidden","i","role","isRemoving","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","onRemoveClick","preventDefault","getTextFromChildren","RootComponent","baseClassName","activeMode","hoverMode","label","Icon24Cancel"],"mappings":"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"}

package/dist/cjs/components/RichCell/RichCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['RichCell--sizeY-none'],\n ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 28 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","Icon","RichCellIcon"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;;iEAlEU;sBACI;+BACG;0BACU;yBAChB;8BACK;AAG7B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAuDO,MAAMF,WAAW;QAAC,EACvBG,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EAEK,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDG,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CF;;YAGDN,wBAAU,qBAACY;gBAAIN,SAAS;0BAA+BN;;0BACxD,sBAACY;gBAAIN,SAAS;;kCACZ,sBAACM;wBAAIN,SAAS;;0CACZ,sBAACM;gCAAIN,SAAS;;oCACXV,yBACC,qBAACiB,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BV;;kDAGL,qBAACgB;wCAAIN,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,qBAACc;wCAAIN,SAAS;kDAA6BR;;oCACnDC,yBACC,qBAACc,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BP;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,sBAACU;gCAAIN,SAAS;;oCACXL,uBAAS,qBAACW;wCAAIN,SAAS;kDAAuCL;;oCAC9DC,8BACC,qBAACU;wCAAIN,SAAS;kDAAsCJ;;;;;;oBAK3DC,wBAAU,qBAACS;wBAAIN,SAAS;kCAA+BH;;oBACvDC,yBAAW,qBAACQ;wBAAIN,SAAS;kCAAgCF;;;;;;AAIlE;AAEAX,SAASsB,IAAI,GAAGC,0BAAY"}
1	+ {"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['RichCell--sizeY-none'],\n ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 28 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","Icon","RichCellIcon"],"mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;;iEAlEU;sBACI;+BACG;0BACU;yBAChB;8BACK;AAG7B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAuDO,MAAMF,WAAW;QAAC,EACvBG,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EAEK,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDG,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CF;;YAGDN,wBAAU,qBAACY;gBAAIN,SAAS;0BAA+BN;;0BACxD,sBAACY;gBAAIN,SAAS;;kCACZ,sBAACM;wBAAIN,SAAS;;0CACZ,sBAACM;gCAAIN,SAAS;;oCACXV,yBACC,qBAACiB,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BV;;kDAGL,qBAACgB;wCAAIN,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,qBAACc;wCAAIN,SAAS;kDAA6BR;;oCACnDC,yBACC,qBAACc,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BP;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,sBAACU;gCAAIN,SAAS;;oCACXL,uBAAS,qBAACW;wCAAIN,SAAS;kDAAuCL;;oCAC9DC,8BACC,qBAACU;wCAAIN,SAAS;kDAAsCJ;;;;;;oBAK3DC,wBAAU,qBAACS;wBAAIN,SAAS;kCAA+BH;;oBACvDC,yBAAW,qBAACQ;wBAAIN,SAAS;kCAAgCF;;;;;;AAIlE;AAEAX,SAASsB,IAAI,GAAGC,0BAAY"}

package/dist/cjs/components/RichCell/RichCellIcon/RichCellIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RichCellIcon","props","RootComponent","baseClassName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAMaA;;;eAAAA;;;;;+BALiB;AAKvB,MAAMA,eAAe,CAACC;IAC3B,qBAAO,qBAACC,4BAAa;QAACC,aAAa;OAA8BF;AACnE"}
1	+ {"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RichCellIcon","props","RootComponent","baseClassName"],"mappings":";;;;+BAMaA;;;eAAAA;;;;;+BALiB;AAKvB,MAAMA,eAAe,CAACC;IAC3B,qBAAO,qBAACC,4BAAa;QAACC,aAAa;OAA8BF;AACnE"}

package/dist/cjs/components/Root/Root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAK~~/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,~~4CA2HX~~,CAAC"}
1	+ {"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,4CAkHX,CAAC"}

package/dist/cjs/components/Root/Root.js CHANGED Viewed

@@ -16,7 +16,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
 const _dom = require("../../lib/dom");
 const _getNavId = require("../../lib/getNavId");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
@@ -94,26 +93,17 @@ const Root = (_param)=>{
         transition,
         prevView
     ]);
-    const fallbackTransition = (0, _useTimeout.useTimeout)(finishTransition, platform === 'ios' ? 600 : 300);
-    _react.useEffect(()=>{
-        if (!transition) {
-            fallbackTransition.clear();
-            return;
+    _react.useEffect(function onAnimationEndFallback() {
+        if (transition && disableAnimation) {
+            finishTransition();
         }
-        fallbackTransition.set();
     }, [
-        fallbackTransition,
-        transition
+        transition,
+        disableAnimation,
+        finishTransition
     ]);
-    const onAnimationEnd = (e)=>{
-        if ([
-            "vkuiroot-android-animation-hide-back",
-            "vkuiroot-android-animation-show-forward",
-            "vkuiroot-ios-animation-hide-back",
-            "vkuiroot-ios-animation-show-forward"
-        ].includes(e.animationName)) {
-            finishTransition();
-        }
+    const onAnimationEnd = ()=>{
+        finishTransition();
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiRoot", platform === 'ios' && "vkuiRoot--ios", transition && "vkuiRoot--transition"),

package/dist/cjs/components/Root/Root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement \| null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled \|\| !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n const fallbackTransition = useTimeout(finishTransition, platform === 'ios' ? 600 : 300);\n React.useEffect(() => {\n if (!transition) {\n fallbackTransition.clear();\n return;\n }\n fallbackTransition.set();\n }, [fallbackTransition, transition]);\n\n const onAnimationEnd = (e: React.AnimationEvent) => {\n if (\n [\n styles['root-android-animation-hide-back'],\n styles['root-android-animation-show-forward'],\n styles['root-ios-animation-hide-back'],\n styles['root-ios-animation-show-forward'],\n ].includes(e.animationName)\n ) {\n finishTransition();\n }\n };\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Root'],\n platform === 'ios' && styles['Root--ios'],\n transition && styles['Root--transition'],\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView \|\| (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionDirectionProvider isBack={isBack}>\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </NavTransitionDirectionProvider>\n </div>\n );\n })}\n </RootComponent>\n );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","transitionMotionEnabled","useConfigProvider","animate","SplitColContext","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","useEffect","clear","set","onAnimationEnd","e","includes","animationName","RootComponent","baseClassName","classNames","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","NavTransitionDirectionProvider","NavTransitionProvider","entering","style","marginTop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement \| null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled \|\| !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n React.useEffect(\n function onAnimationEndFallback() {\n if (transition && disableAnimation) {\n finishTransition();\n }\n },\n [transition, disableAnimation, finishTransition],\n );\n\n const onAnimationEnd = () => {\n finishTransition();\n };\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Root'],\n platform === 'ios' && styles['Root--ios'],\n transition && styles['Root--transition'],\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView \|\| (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionDirectionProvider isBack={isBack}>\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </NavTransitionDirectionProvider>\n </div>\n );\n })}\n </RootComponent>\n );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","transitionMotionEnabled","useConfigProvider","animate","SplitColContext","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","RootComponent","baseClassName","classNames","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","NavTransitionDirectionProvider","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}

package/dist/cjs/components/RootComponent/RootComponent.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,~~yEAMvB~~,~~mBAAmB~~,CAAC,CAAC,4CAEvB,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,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,qEAM5B,kBAAkB,CAAC,CAAC,CAAC,4CAEvB,CAAC"}

package/dist/cjs/components/RootComponent/RootComponent.js.map CHANGED Viewed

	@@ -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>) => (\n <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAcaA;;;eAAAA;;;;;;;iEAdU;sBACI;AAapB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE"}
1	+ {"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { 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>) => (\n <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;iEAdU;sBACI;AAapB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE"}

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,~~MAAM~~,QAAQ,CAAC,aAAa,CAAC,4CAiBtE,CAAC"}
1	+ {"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAiBtE,CAAC"}

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,qBAAqB,CAACC,sBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,qBAAqB,CAACC,sBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK"}

package/dist/cjs/components/ScreenSpinner/Icon48DoneOutline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,~~MAAM~~,QAAQ,CAAC,aAAa,CAAC,4CAkBrE,CAAC"}
1	+ {"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAkBrE,CAAC"}

package/dist/cjs/components/ScreenSpinner/Icon48DoneOutline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M9 24L19 34L39 14\"\n stroke=\"currentColor\"\n strokeWidth=\"3.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,oBAAoB,CAACC,sBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M9 24L19 34L39 14\"\n stroke=\"currentColor\"\n strokeWidth=\"3.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,oBAAoB,CAACC,sBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe"}

package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' \| 'cancelable' \| 'done' \| 'error';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n style,\n className,\n state = 'loading',\n size = 'large',\n onClick,\n children = 'Пожалуйста, подождите...',\n ...restProps\n}: ScreenSpinnerProps) => {\n const hideSpinner = state === 'done' \|\| state === 'error';\n\n const Icon = {\n loading: () => null,\n cancelable: Icon24Cancel,\n done: Icon48DoneOutline,\n error: Icon48CancelCircle,\n }[state];\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n noBackground\n className={classNames(\n styles['ScreenSpinner'],\n state === 'cancelable' && styles['ScreenSpinner--clickable'],\n className,\n )}\n style={style}\n >\n <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n <Spinner\n className={classNames(\n styles['ScreenSpinner__spinner'],\n hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n )}\n size={size}\n {...restProps}\n >\n {children}\n </Spinner>\n <div\n className={classNames(\n styles['ScreenSpinner__icon'],\n state === 'done' && styles['ScreenSpinner__icon--state-done'],\n )}\n >\n <Icon />\n </div>\n </div>\n </PopoutWrapper>\n );\n};\n"],"names":["ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","noBackground","classNames","div","Spinner"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;uBAhBgB;sBACF;+BACG;+BACA;yBACQ;oCACH;mCACD;AAU3B,MAAMA,gBAAgB;QAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EAElB,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,YAAY;QACZjB,WAAWkB,IAAAA,gBAAU,uBAEnBjB,UAAU,gDACVD;QAEFD,OAAOA;kBAEP,cAAA,sBAACoB;YAAInB,SAAS;YAAsCG,SAASA;;8BAC3D,qBAACiB,gBAAO;oBACNpB,WAAWkB,IAAAA,gBAAU,gCAEnBZ;oBAEFJ,MAAMA;mBACFG;8BAEHD;;8BAEH,qBAACe;oBACCnB,WAAWkB,IAAAA,gBAAU,6BAEnBjB,UAAU;8BAGZ,cAAA,qBAACM;;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' \| 'cancelable' \| 'done' \| 'error';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n style,\n className,\n state = 'loading',\n size = 'large',\n onClick,\n children = 'Пожалуйста, подождите...',\n ...restProps\n}: ScreenSpinnerProps) => {\n const hideSpinner = state === 'done' \|\| state === 'error';\n\n const Icon = {\n loading: () => null,\n cancelable: Icon24Cancel,\n done: Icon48DoneOutline,\n error: Icon48CancelCircle,\n }[state];\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n noBackground\n className={classNames(\n styles['ScreenSpinner'],\n state === 'cancelable' && styles['ScreenSpinner--clickable'],\n className,\n )}\n style={style}\n >\n <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n <Spinner\n className={classNames(\n styles['ScreenSpinner__spinner'],\n hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n )}\n size={size}\n {...restProps}\n >\n {children}\n </Spinner>\n <div\n className={classNames(\n styles['ScreenSpinner__icon'],\n state === 'done' && styles['ScreenSpinner__icon--state-done'],\n )}\n >\n <Icon />\n </div>\n </div>\n </PopoutWrapper>\n );\n};\n"],"names":["ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","noBackground","classNames","div","Spinner"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;uBAhBgB;sBACF;+BACG;+BACA;yBACQ;oCACH;mCACD;AAU3B,MAAMA,gBAAgB;QAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EAElB,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,YAAY;QACZjB,WAAWkB,IAAAA,gBAAU,uBAEnBjB,UAAU,gDACVD;QAEFD,OAAOA;kBAEP,cAAA,sBAACoB;YAAInB,SAAS;YAAsCG,SAASA;;8BAC3D,qBAACiB,gBAAO;oBACNpB,WAAWkB,IAAAA,gBAAU,gCAEnBZ;oBAEFJ,MAAMA;mBACFG;8BAEHD;;8BAEH,qBAACe;oBACCnB,WAAWkB,IAAAA,gBAAU,6BAEnBjB,UAAU;8BAGZ,cAAA,qBAACM;;;;;AAKX"}

package/dist/cjs/components/ScrollArrow/ScrollArrow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n up: styles['ScrollArrow--direction-up'],\n right: styles['ScrollArrow--direction-right'],\n down: styles['ScrollArrow--direction-down'],\n left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n up: 'Назад',\n right: 'Вперед',\n down: 'Вперед',\n left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n let Icon = Icon24Chevron;\n if (size === 'm') {\n Icon = Icon16Chevron;\n }\n\n return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'up' \| 'right' \| 'down' \| 'left';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n label?: string;\n}\n\n/\n Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n \n @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n size = 'l',\n offsetY,\n direction,\n label: labelProp,\n children = <ArrowIcon size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n const label = labelProp ?? labelDirection[direction];\n\n return (\n <RootComponent\n Component=\"button\"\n type=\"button\"\n baseClassName={classNames(\n styles['ScrollArrow'],\n stylesSize[size],\n stylesDirection[direction],\n )}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </RootComponent>\n );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","Icon24Chevron","Icon16Chevron","className","offsetY","direction","label","labelProp","children","restProps","RootComponent","Component","type","baseClassName","classNames","VisuallyHidden","span","style","top","undefined"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA4DaA;;;eAAAA;;;;;;;;iEA5DU;uBACsB;sBAClB;+BAEG;gCACC;AAG/B,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOC,oBAAa;IACxB,IAAIF,SAAS,KAAK;QAChBC,OAAOE,oBAAa;IACtB;IAEA,qBAAO,qBAACF;QAAKG,SAAS;;AACxB;AA0BO,MAAMf,cAAc;QAAC,EAC1BW,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,qBAACV;QAAUC,MAAMA;MAAQ,EAEnB,WADdU;QALHV;QACAK;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,sBAACK,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,eAAeC,IAAAA,gBAAU,qBAEvBzB,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACa,UAAU;OAExBI;;YAEHH,uBAAS,qBAACS,8BAAc;0BAAET;;0BAC3B,qBAACU;gBAAKb,SAAS;gBAA+Bc,OAAOb,UAAU;oBAAEc,KAAKd;gBAAQ,IAAIe;0BAC/EX;;;;AAIT"}
1	+ {"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n up: styles['ScrollArrow--direction-up'],\n right: styles['ScrollArrow--direction-right'],\n down: styles['ScrollArrow--direction-down'],\n left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n up: 'Назад',\n right: 'Вперед',\n down: 'Вперед',\n left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n let Icon = Icon24Chevron;\n if (size === 'm') {\n Icon = Icon16Chevron;\n }\n\n return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'up' \| 'right' \| 'down' \| 'left';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n label?: string;\n}\n\n/\n Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n \n @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n size = 'l',\n offsetY,\n direction,\n label: labelProp,\n children = <ArrowIcon size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n const label = labelProp ?? labelDirection[direction];\n\n return (\n <RootComponent\n Component=\"button\"\n type=\"button\"\n baseClassName={classNames(\n styles['ScrollArrow'],\n stylesSize[size],\n stylesDirection[direction],\n )}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </RootComponent>\n );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","Icon24Chevron","Icon16Chevron","className","offsetY","direction","label","labelProp","children","restProps","RootComponent","Component","type","baseClassName","classNames","VisuallyHidden","span","style","top","undefined"],"mappings":";;;;+BA4DaA;;;eAAAA;;;;;;;;iEA5DU;uBACsB;sBAClB;+BAEG;gCACC;AAG/B,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOC,oBAAa;IACxB,IAAIF,SAAS,KAAK;QAChBC,OAAOE,oBAAa;IACtB;IAEA,qBAAO,qBAACF;QAAKG,SAAS;;AACxB;AA0BO,MAAMf,cAAc;QAAC,EAC1BW,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,qBAACV;QAAUC,MAAMA;MAAQ,EAEnB,WADdU;QALHV;QACAK;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,sBAACK,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,eAAeC,IAAAA,gBAAU,qBAEvBzB,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACa,UAAU;OAExBI;;YAEHH,uBAAS,qBAACS,8BAAc;0BAAET;;0BAC3B,qBAACU;gBAAKb,SAAS;gBAA+Bc,OAAOb,UAAU;oBAAEc,KAAKd;gBAAQ,IAAIe;0BAC/EX;;;;AAIT"}

package/dist/cjs/components/Search/Search.js.map CHANGED Viewed

	@@ -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 } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\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;\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,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps) => {\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 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 icon && 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 {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n )}\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","onIconClick","noop","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","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","IconButton","hoverMode","onPointerDown","onClick","VisuallyHidden","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\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;\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,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps) => {\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 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 icon && 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 {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n )}\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","onIconClick","noop","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","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","IconButton","hoverMode","onPointerDown","onClick","VisuallyHidden","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n /*\n Вставляет элемент перед основным контентом.\n * Рекомендуется использовать только иконки с размером 20\n /\n before?: React.ReactNode;\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n defaultValue = options[0]?.value,\n children,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = React.useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['SegmentedControl'],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n )}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </RootComponent>\n );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","warn","warnOnce","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","React","useId","useCustomEnsuredControl","sizeY","useAdaptivity","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","RootComponent","baseClassName","classNames","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionProps","SegmentedControlOption","checked"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;mCACU;2CACE;0BACjB;+BAEK;wCACS;IAwCtBC;AArCjB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,mBAAmB;QAAC,EAC/BM,OAAO,GAAG,EACVC,IAAI,EACJN,OAAO,EACPO,gBAAeP,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYQ,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAN;QACAO;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKC,OAAMC,KAAK;IAEtB,MAAM,CAACR,OAAOE,SAAS,GAAGO,IAAAA,0CAAuB,EAAC;QAChDP,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,cAAcpB,QAAQqB,SAAS,CAAC,CAACC,SAAWA,OAAOd,KAAK,KAAKA;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEvB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACiB;KAAY;IAEhB,MAAMO,aAAa,CAAC,WAAW,EAAE,MAAMP,YAAY,EAAE,CAAC;IAEtD,qBACE,qBAACQ,4BAAa,8CACRf;QACJgB,eAAeC,IAAAA,gBAAU,0BAEvBZ,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7Cb,SAAS;kBAGX,cAAA,sBAAC0B;YAAIC,MAAK;YAAaC,SAAS;;gBAC7Bb,cAAc,CAAC,mBACd,qBAACW;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMpC,QAAQqC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWX;wBACXY,iBAAiBZ;oBACnB;;gBAGH3B,QAAQwC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,qBAACE,8CAAsB,8CAEjBD;wBACJpC,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACd8B,SAASpC,UAAUkC,YAAYlC,KAAK;wBACpCE,UAAU,IAAMA,SAASgC,YAAYlC,KAAK;kCAEzCiC;wBANI,CAAC,EAAEC,YAAYlC,KAAK,CAAC,CAAC;;;;;AAYvC"}
1	+ {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n /*\n Вставляет элемент перед основным контентом.\n * Рекомендуется использовать только иконки с размером 20\n /\n before?: React.ReactNode;\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n defaultValue = options[0]?.value,\n children,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = React.useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['SegmentedControl'],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n )}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </RootComponent>\n );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","warn","warnOnce","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","React","useId","useCustomEnsuredControl","sizeY","useAdaptivity","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","RootComponent","baseClassName","classNames","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionProps","SegmentedControlOption","checked"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;mCACU;2CACE;0BACjB;+BAEK;wCACS;IAwCtBC;AArCjB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,mBAAmB;QAAC,EAC/BM,OAAO,GAAG,EACVC,IAAI,EACJN,OAAO,EACPO,gBAAeP,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYQ,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAN;QACAO;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKC,OAAMC,KAAK;IAEtB,MAAM,CAACR,OAAOE,SAAS,GAAGO,IAAAA,0CAAuB,EAAC;QAChDP,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,cAAcpB,QAAQqB,SAAS,CAAC,CAACC,SAAWA,OAAOd,KAAK,KAAKA;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEvB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACiB;KAAY;IAEhB,MAAMO,aAAa,CAAC,WAAW,EAAE,MAAMP,YAAY,EAAE,CAAC;IAEtD,qBACE,qBAACQ,4BAAa,8CACRf;QACJgB,eAAeC,IAAAA,gBAAU,0BAEvBZ,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7Cb,SAAS;kBAGX,cAAA,sBAAC0B;YAAIC,MAAK;YAAaC,SAAS;;gBAC7Bb,cAAc,CAAC,mBACd,qBAACW;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMpC,QAAQqC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWX;wBACXY,iBAAiBZ;oBACnB;;gBAGH3B,QAAQwC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,qBAACE,8CAAsB,8CAEjBD;wBACJpC,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACd8B,SAASpC,UAAUkC,YAAYlC,KAAK;wBACpCE,UAAU,IAAMA,SAASgC,YAAYlC,KAAK;kCAEzCiC;wBANI,CAAC,EAAEC,YAAYlC,KAAK,CAAC,CAAC;;;;;AAYvC"}

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement> {\n before?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n getRootRef,\n before,\n ...restProps\n}: SegmentedControlOptionProps) => (\n <Clickable\n Component=\"label\"\n baseClassName={styles['SegmentedControlOption']}\n hoverClassName={styles['SegmentedControlOption--hover']}\n activeClassName={styles['SegmentedControlOption--hover']}\n className={className}\n getRootRef={getRootRef}\n style={style}\n >\n <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n {hasReactNode(before) && (\n <div className={styles['SegmentedControlOption__before']}>{before}</div>\n )}\n <Headline level=\"2\" weight=\"2\">\n {children}\n </Headline>\n </Clickable>\n);\n"],"names":["SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Clickable","Component","baseClassName","hoverClassName","activeClassName","VisuallyHidden","type","hasReactNode","div","Headline","level","weight"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACM;2BAEH;0BACD;gCACM;AAaxB,MAAMA,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,sBAACE,oBAAS;QACRC,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfV,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,qBAACU,8BAAc,8CAAKN;gBAAWE,WAAU;gBAAQJ,YAAYJ;gBAAQa,MAAK;;YACzEC,IAAAA,kBAAY,EAACT,yBACZ,qBAACU;gBAAId,SAAS;0BAA6CI;;0BAE7D,qBAACW,kBAAQ;gBAACC,OAAM;gBAAIC,QAAO;0BACxBf"}
1	+ {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement> {\n before?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n getRootRef,\n before,\n ...restProps\n}: SegmentedControlOptionProps) => (\n <Clickable\n Component=\"label\"\n baseClassName={styles['SegmentedControlOption']}\n hoverClassName={styles['SegmentedControlOption--hover']}\n activeClassName={styles['SegmentedControlOption--hover']}\n className={className}\n getRootRef={getRootRef}\n style={style}\n >\n <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n {hasReactNode(before) && (\n <div className={styles['SegmentedControlOption__before']}>{before}</div>\n )}\n <Headline level=\"2\" weight=\"2\">\n {children}\n </Headline>\n </Clickable>\n);\n"],"names":["SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Clickable","Component","baseClassName","hoverClassName","activeClassName","VisuallyHidden","type","hasReactNode","div","Headline","level","weight"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACM;2BAEH;0BACD;gCACM;AAaxB,MAAMA,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,sBAACE,oBAAS;QACRC,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfV,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,qBAACU,8BAAc,8CAAKN;gBAAWE,WAAU;gBAAQJ,YAAYJ;gBAAQa,MAAK;;YACzEC,IAAAA,kBAAY,EAACT,yBACZ,qBAACU;gBAAId,SAAS;0BAA6CI;;0BAE7D,qBAACW,kBAAQ;gBAACC,OAAM;gBAAIC,QAAO;0BACxBf"}

package/dist/cjs/components/Select/Select.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, className, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/dist/cjs/components/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"~~AAGA~~,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,~~wEAGhB~~,~~YAAY~~,OAAO,CAAC,~~4CAgDtB~~,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,4CAqDtB,CAAC"}

package/dist/cjs/components/Select/Select.js CHANGED Viewed

@@ -14,12 +14,14 @@ const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
 const _CustomSelect = require("../CustomSelect/CustomSelect");
 const _NativeSelect = require("../NativeSelect/NativeSelect");
 const Select = (_param)=>{
-    var { children } = _param, props = _object_without_properties._(_param, [
-        "children"
+    var { children, className } = _param, props = _object_without_properties._(_param, [
+        "children",
+        "className"
     ]);
     const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode } = props, restProps = _object_without_properties._(props, [
         "options",
@@ -48,12 +50,16 @@ const Select = (_param)=>{
         "after",
         "mode"
     ]);
-    const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    const { deviceType } = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)();
     const nativeProps = restProps;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
         children: [
-            (hasPointer === undefined || hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({}, props)),
-            (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({}, nativeProps), {
+            deviceType.desktop && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.desktop.className)
+            }, props)),
+            deviceType.mobile && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.mobile.className)
+            }, nativeProps), {
                 children: options.map(({ label, value })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
                         value: value,
                         children: label

package/dist/cjs/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~useAdaptivityHasPointer~~ } from '../../hooks/~~useAdaptivityHasPointer~~';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' \| 'plain' \| 'accent';\n\n/*\n @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n children,\n ...props\n}: SelectProps<OptionT>) => {\n const {\n options = [],\n searchable,\n emptyText,\n onInputChange,\n filterFn,\n popupDirection,\n renderOption,\n renderDropdown,\n fetching,\n onClose,\n onOpen,\n icon,\n ClearButton,\n allowClearButton,\n clearButtonTestId,\n dropdownOffsetDistance,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n labelTextTestId,\n nativeSelectTestId,\n after,\n mode,\n ...restProps\n } = props;\n\n const ~~hasPointer~~ = ~~useAdaptivityHasPointer~~();\n\n const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n return (\n <React.Fragment>\n {~~(hasPointer~~ ~~=== undefined \|\| hasPointer)~~ && <CustomSelect {...props} />}\n {~~(hasPointer~~ ~~=== undefined \|\| !hasPointer)~~ && (\n <NativeSelect {...nativeProps}>\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","~~hasPointer~~","~~useAdaptivityHasPointer~~","nativeProps","React","Fragment","~~undefined~~","CustomSelect","NativeSelect","map","label","value","option"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAcaA~~;;;eAAAA;;;;;;;;~~iEAdU~~;~~yCACiB~~;~~8BAMjC~~;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,~~EAEa~~,WADlBC;~~QADHD~~;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,~~MAAME~~,~~aAAaC~~,IAAAA,~~gDAAuB~~;~~IAE1C~~,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;~~YACXJ~~,~~CAAAA~~,~~eAAeK~~,~~aAAaL~~,~~UAAS~~,~~mBAAM~~,~~qBAACM~~,~~0BAAY~~,~~uBAAKjC;YAC7D2B~~,~~CAAAA~~,~~eAAeK~~,~~aAAa~~,~~CAACL~~,~~UAAS~~,~~mBACtC~~,~~qBAACO~~,0BAAY,~~8CAAKL~~;~~0BACf5B~~,~~QAAQkC~~,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}
1	+ {"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' \| 'plain' \| 'accent';\n\n/*\n @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n children,\n className,\n ...props\n}: SelectProps<OptionT>) => {\n const {\n options = [],\n searchable,\n emptyText,\n onInputChange,\n filterFn,\n popupDirection,\n renderOption,\n renderDropdown,\n fetching,\n onClose,\n onOpen,\n icon,\n ClearButton,\n allowClearButton,\n clearButtonTestId,\n dropdownOffsetDistance,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n labelTextTestId,\n nativeSelectTestId,\n after,\n mode,\n ...restProps\n } = props;\n\n const { deviceType } = useAdaptivityConditionalRender();\n\n const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n return (\n <React.Fragment>\n {deviceType.desktop && (\n <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n )}\n {deviceType.mobile && (\n <NativeSelect\n className={classNames(className, deviceType.mobile.className)}\n {...nativeProps}\n >\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"names":["Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","useAdaptivityConditionalRender","nativeProps","React","Fragment","desktop","CustomSelect","classNames","mobile","NativeSelect","map","label","value","option"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACI;gDACoB;8BAMxC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGC,IAAAA,8DAA8B;IAErD,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACZJ,WAAWK,OAAO,kBACjB,qBAACC,0BAAY;gBAAClC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWK,OAAO,CAACjC,SAAS;eAAOC;YAEnF2B,WAAWQ,MAAM,kBAChB,qBAACC,0BAAY;gBACXrC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWQ,MAAM,CAACpC,SAAS;eACxD8B;0BAEH5B,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}

package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n none: styles['Select--sizeY-none'],\n ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'after' \| 'status'> {\n multiline?: boolean;\n disabled?: boolean;\n selectType?: SelectType;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n tabIndex = 0,\n placeholder,\n children,\n align,\n getRootRef,\n multiline,\n disabled,\n onClick,\n before,\n after = <DropdownIcon />,\n selectType = 'default',\n status,\n className,\n autoFocus,\n ...restProps\n}: SelectMimicryProps) => {\n const rootRef = useExternRef(getRootRef);\n\n const { sizeY = 'none' } = useAdaptivity();\n const title = children \|\| placeholder;\n\n useAutoFocus(rootRef, autoFocus);\n\n return (\n <FormField\n {...restProps}\n tabIndex={disabled ? undefined : tabIndex}\n className={classNames(\n styles['Select'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !children && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n before && styles['Select--hasBefore'],\n className,\n )}\n getRootRef={rootRef}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n before={before}\n after={after}\n mode={getFormFieldModeFromSelectType(selectType)}\n status={status}\n >\n <div className={styles['Select__container']}>\n <SelectTypography selectType={selectType} className={styles['Select__title']}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","sizeY","useAdaptivity","title","useAutoFocus","FormField","undefined","classNames","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;wBACkB;8BAElB;2BACa;kCAET;AAGjC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAeO,MAAMF,gBAAgB;QAAC,EAC5BG,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,qBAACC,0BAAY,KAAG,EACxBC,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBN,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAAChB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPgB,MAAMC,IAAAA,sCAA8B,EAACf;QACrCC,QAAQA;kBAER,cAAA,qBAACe;YAAId,SAAS;sBACZ,cAAA,qBAACe,kCAAgB;gBAACjB,YAAYA;gBAAYE,SAAS;0BAChDO;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n none: styles['Select--sizeY-none'],\n ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'after' \| 'status'> {\n multiline?: boolean;\n disabled?: boolean;\n selectType?: SelectType;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n tabIndex = 0,\n placeholder,\n children,\n align,\n getRootRef,\n multiline,\n disabled,\n onClick,\n before,\n after = <DropdownIcon />,\n selectType = 'default',\n status,\n className,\n autoFocus,\n ...restProps\n}: SelectMimicryProps) => {\n const rootRef = useExternRef(getRootRef);\n\n const { sizeY = 'none' } = useAdaptivity();\n const title = children \|\| placeholder;\n\n useAutoFocus(rootRef, autoFocus);\n\n return (\n <FormField\n {...restProps}\n tabIndex={disabled ? undefined : tabIndex}\n className={classNames(\n styles['Select'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !children && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n before && styles['Select--hasBefore'],\n className,\n )}\n getRootRef={rootRef}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n before={before}\n after={after}\n mode={getFormFieldModeFromSelectType(selectType)}\n status={status}\n >\n <div className={styles['Select__container']}>\n <SelectTypography selectType={selectType} className={styles['Select__title']}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","sizeY","useAdaptivity","title","useAutoFocus","FormField","undefined","classNames","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;wBACkB;8BAElB;2BACa;kCAET;AAGjC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAeO,MAAMF,gBAAgB;QAAC,EAC5BG,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,qBAACC,0BAAY,KAAG,EACxBC,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBN,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAAChB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPgB,MAAMC,IAAAA,sCAA8B,EAACf;QACrCC,QAAQA;kBAER,cAAA,qBAACe;YAAId,SAAS;sBACZ,cAAA,qBAACe,kCAAgB;gBAACjB,YAAYA;gBAAYE,SAAS;0BAChDO;;;;AAKX"}