npm - @vkontakte/vkui - Versions diffs - 6.2.1 → 6.3.0 - Mend

@vkontakte/vkui 6.2.1 → 6.3.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 (3114) hide show

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

@@ -1,5 +1,9 @@
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Стиль отображения компонента
+     */
+    mode?: 'primary' | 'secondary' | 'primary-alpha';
     /**
      * С этим свойством компонент не будет иметь отступы слева и справа
      */
@@ -8,5 +12,5 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ wide, mode, ...restProps }: SeparatorProps) => React.ReactNode;
 //# sourceMappingURL=Separator.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;~~AAED~~;;GAEG;AACH,eAAO,MAAM,SAAS,~~2BAA4B~~,cAAc,~~4CAO/D~~,CAAC"}
1	+ {"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,eAAe,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAQD;;GAEG;AACH,eAAO,MAAM,SAAS,iCAInB,cAAc,KAAG,KAAK,CAAC,SAOzB,CAAC"}

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

@@ -14,12 +14,18 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _vkjs = require("@vkontakte/vkjs");
 const _RootComponent = require("../RootComponent/RootComponent");
+const modeClassNames = {
+    'primary': "vkuiSeparator--mode-primary",
+    'secondary': "vkuiSeparator--mode-secondary",
+    'primary-alpha': "vkuiSeparator--mode-primaryAlpha"
+};
 const Separator = (_param)=>{
-    var { wide } = _param, restProps = _object_without_properties._(_param, [
-        "wide"
+    var { wide, mode = 'primary' } = _param, restProps = _object_without_properties._(_param, [
+        "wide",
+        "mode"
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiSeparator", !wide && "vkuiSeparator--padded"),
+        baseClassName: (0, _vkjs.classNames)(!wide && "vkuiSeparator--padded", modeClassNames[mode]),
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("hr", {
             className: "vkuiSeparator__in"
         })

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n С этим свойством компонент не будет иметь отступы слева и справа\n /\n wide?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n <RootComponent\n {...restProps}\n baseClassName={classNames(~~styles['Separator'],~~ !wide && styles['Separator--padded'])}\n >\n <hr className={styles['Separator__in']} />\n </RootComponent>\n);\n"],"names":["Separator","wide","restProps","RootComponent","baseClassName","classNames","hr","className"],"mappings":";;;;+~~BAeaA~~;;;eAAAA;;;;;;;~~sBAfc~~;+BAEG;~~AAavB~~,~~MAAMA~~,YAAY;QAAC,~~EAAEC~~,IAAI,~~EAAgC~~,~~WAA3BC~~;~~QAATD~~;;~~yBAC1B~~,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,~~mBAAsB~~,~~CAACJ~~;~~kBAEhD~~,cAAA,qBAACK;YAAGC,SAAS"}
1	+ {"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Стиль отображения компонента\n /\n mode?: 'primary' \| 'secondary' \| 'primary-alpha';\n /\n С этим свойством компонент не будет иметь отступы слева и справа\n /\n wide?: boolean;\n}\n\nconst modeClassNames = {\n 'primary': styles['Separator--mode-primary'],\n 'secondary': styles['Separator--mode-secondary'],\n 'primary-alpha': styles['Separator--mode-primaryAlpha'],\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n wide,\n mode = 'primary',\n ...restProps\n}: SeparatorProps): React.ReactNode => (\n <RootComponent\n {...restProps}\n baseClassName={classNames(!wide && styles['Separator--padded'], modeClassNames[mode])}\n >\n <hr className={styles['Separator__in']} />\n </RootComponent>\n);\n"],"names":["Separator","modeClassNames","wide","mode","restProps","RootComponent","baseClassName","classNames","hr","className"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;sBAzBc;+BAEG;AAc9B,MAAMC,iBAAiB;IACrB,SAAS;IACT,WAAW;IACX,eAAe;AACjB;AAKO,MAAMD,YAAY;QAAC,EACxBE,IAAI,EACJC,OAAO,SAAS,EAED,WADZC;QAFHF;QACAC;;yBAGA,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,EAAC,CAACL,iCAAqCD,cAAc,CAACE,KAAK;kBAEpF,cAAA,qBAACK;YAAGC,SAAS"}

package/dist/cjs/components/SimpleCell/Chevron/Chevron.d.ts CHANGED Viewed

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
     size?: 's' | 'm';
 }
-export declare const Chevron: ({ size, ...restProps }: ChevronProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chevron: ({ size, ...restProps }: ChevronProps) => React.ReactNode;
 //# sourceMappingURL=Chevron.d.ts.map

package/dist/cjs/components/SimpleCell/Chevron/Chevron.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,2BAAkC,YAAY,~~4CAIjE~~,CAAC"}
1	+ {"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,2BAAkC,YAAY,KAAG,KAAK,CAAC,SAI1E,CAAC"}

package/dist/cjs/components/SimpleCell/Chevron/Chevron.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n s: Icon16Chevron,\n m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' \| 'height'> {\n size?: 's' \| 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n const Icon = iconSize[size];\n\n return <Icon {...restProps} />;\n};\n"],"names":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}
1	+ {"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n s: Icon16Chevron,\n m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' \| 'height'> {\n size?: 's' \| 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {\n const Icon = iconSize[size];\n\n return <Icon {...restProps} />;\n};\n"],"names":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}

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

@@ -65,5 +65,5 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
-export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => React.ReactNode;
 //# sourceMappingURL=SimpleCell.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleCell.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAY/D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,aAAa;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU,sNAiBpB,eAAe,~~4CAqFjB~~,CAAC"}
1	+ {"version":3,"file":"SimpleCell.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAY/D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,aAAa;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU,sNAiBpB,eAAe,KAAG,KAAK,CAAC,SAqF1B,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['SimpleCell--sizeY-none'],\n ['compact']: styles['SimpleCell--sizeY-compact'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n /*\n Иконка 28 или `<Avatar size={28\|32\|40\|48\|72} />`\n /\n before?: React.ReactNode;\n /\n Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n /\n badgeBeforeTitle?: React.ReactNode;\n /\n Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n /\n badgeAfterTitle?: React.ReactNode;\n /\n Иконка 12. Добавится слева от текста `subtitle`.\n /\n badgeBeforeSubtitle?: React.ReactNode;\n /\n Иконка 12. Добавится справа от текста `subtitle`.\n /\n badgeAfterSubtitle?: React.ReactNode;\n /\n Контейнер для текста справа от `children`.\n /\n indicator?: React.ReactNode;\n /\n Дополнительная строка текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n /\n Иконка 24\|28 или `<Switch />`. Располагается справа от `indicator`.\n /\n after?: React.ReactNode;\n /\n Убирает анимацию нажатия\n /\n disabled?: boolean;\n /\n В режиме `auto` в iOS добавляет chevron справа.\n * Передавать `always`, если предполагается переход при клике по ячейке.\n /\n expandable?: 'auto' \| 'always';\n /\n Размер chevron\n /\n chevronSize?: 's' \| 'm';\n /\n Включает многострочный режим для отображения текста\n /\n multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/\n @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n badgeBeforeTitle,\n badgeAfterTitle,\n badgeBeforeSubtitle,\n badgeAfterSubtitle,\n before,\n indicator,\n children,\n after,\n expandable,\n multiline,\n subhead,\n subtitle,\n extraSubtitle,\n className,\n chevronSize = 'm',\n ...restProps\n}: SimpleCellProps) => {\n const platform = usePlatform();\n\n const hasChevron = expandable === 'always' \|\| (expandable === 'auto' && platform === 'ios');\n\n const hasAfter = hasReactNode(after) \|\| hasChevron;\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['SimpleCell'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n multiline && styles['SimpleCell--mult'],\n className,\n )}\n >\n <div\n className={classNames(\n styles['SimpleCell__before'],\n platform === 'ios' && styles['SimpleCell__before--ios'],\n )}\n >\n {before}\n </div>\n <div className={styles['SimpleCell__middle']}>\n {subhead && (\n <Subhead\n Component=\"span\"\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n >\n {subhead}\n </Subhead>\n )}\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeTitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n )}\n <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n {children}\n </Headline>\n {hasReactNode(badgeAfterTitle) && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n )}\n </div>\n {subtitle && (\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n )}\n <Footnote\n normalize={false}\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n >\n {subtitle}\n </Footnote>\n {badgeAfterSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n )}\n </div>\n )}\n {extraSubtitle && (\n <Footnote\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n >\n {extraSubtitle}\n </Footnote>\n )}\n </div>\n {hasReactNode(indicator) && (\n <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n {indicator}\n </Headline>\n )}\n {hasAfter && (\n <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n {after}\n {hasChevron && (\n <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n )}\n </div>\n )}\n </Tappable>\n );\n};\n"],"names":["SimpleCell","sizeYClassNames","none","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","hasChevron","hasAfter","hasReactNode","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;iEAlFU;sBACkB;+BACX;6BACF;0BAEY;0BACf;0BACA;yBACD;yBACA;AAGxB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAmEO,MAAMF,aAAa;QAAC,EACzBG,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,aAAaV,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAMG,WAAWC,IAAAA,kBAAY,EAACb,UAAUW;IACxC,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHR;QACJF,WAAWW,IAAAA,gBAAU,oBAEnBH,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CZ,qCACAI;;0BAGF,qBAACY;gBACCZ,WAAWW,IAAAA,gBAAU,4BAEnBR,aAAa;0BAGdZ;;0BAEH,sBAACqB;gBAAIZ,SAAS;;oBACXH,yBACC,qBAACgB,gBAAO;wBACNC,WAAU;wBACVd,WAAWW,IAAAA,gBAAU;kCAEpBd;;kCAGL,sBAACe;wBAAIZ,SAAS;;4BACXb,kCACC,qBAAC4B;gCAAKf,SAAS;0CAAgCb;;0CAEjD,qBAAC6B,kBAAQ;gCAACF,WAAU;gCAAOd,SAAS;gCAAkCiB,QAAO;0CAC1ExB;;4BAEFc,IAAAA,kBAAY,EAACnB,kCACZ,qBAAC2B;gCAAKf,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,sBAACc;wBAAIZ,SAAS;;4BACXX,qCACC,qBAAC0B;gCAAKf,SAAS;0CAAgCX;;0CAEjD,qBAAC6B,kBAAQ;gCACPC,WAAW;gCACXnB,WAAWW,IAAAA,gBAAU;0CAEpBb;;4BAEFR,oCACC,qBAACyB;gCAAKf,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,qBAACmB,kBAAQ;wBACPlB,WAAWW,IAAAA,gBAAU;kCAEpBZ;;;;YAINQ,IAAAA,kBAAY,EAACf,4BACZ,qBAACwB,kBAAQ;gBAACF,WAAU;gBAAOG,QAAO;gBAAIjB,SAAS;0BAC5CR;;YAGJc,0BACC,sBAACM;gBAAIZ,WAAWW,IAAAA,gBAAU,2BAA8B;;oBACrDjB;oBACAW,4BACC,qBAACe,gBAAO;wBAACC,MAAMpB;wBAAaD,SAAS;;;;;;AAMjD"}
1	+ {"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['SimpleCell--sizeY-none'],\n ['compact']: styles['SimpleCell--sizeY-compact'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n /*\n Иконка 28 или `<Avatar size={28\|32\|40\|48\|72} />`\n /\n before?: React.ReactNode;\n /\n Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n /\n badgeBeforeTitle?: React.ReactNode;\n /\n Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n /\n badgeAfterTitle?: React.ReactNode;\n /\n Иконка 12. Добавится слева от текста `subtitle`.\n /\n badgeBeforeSubtitle?: React.ReactNode;\n /\n Иконка 12. Добавится справа от текста `subtitle`.\n /\n badgeAfterSubtitle?: React.ReactNode;\n /\n Контейнер для текста справа от `children`.\n /\n indicator?: React.ReactNode;\n /\n Дополнительная строка текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n /\n Иконка 24\|28 или `<Switch />`. Располагается справа от `indicator`.\n /\n after?: React.ReactNode;\n /\n Убирает анимацию нажатия\n /\n disabled?: boolean;\n /\n В режиме `auto` в iOS добавляет chevron справа.\n * Передавать `always`, если предполагается переход при клике по ячейке.\n /\n expandable?: 'auto' \| 'always';\n /\n Размер chevron\n /\n chevronSize?: 's' \| 'm';\n /\n Включает многострочный режим для отображения текста\n /\n multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/\n @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n badgeBeforeTitle,\n badgeAfterTitle,\n badgeBeforeSubtitle,\n badgeAfterSubtitle,\n before,\n indicator,\n children,\n after,\n expandable,\n multiline,\n subhead,\n subtitle,\n extraSubtitle,\n className,\n chevronSize = 'm',\n ...restProps\n}: SimpleCellProps): React.ReactNode => {\n const platform = usePlatform();\n\n const hasChevron = expandable === 'always' \|\| (expandable === 'auto' && platform === 'ios');\n\n const hasAfter = hasReactNode(after) \|\| hasChevron;\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['SimpleCell'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n multiline && styles['SimpleCell--mult'],\n className,\n )}\n >\n <div\n className={classNames(\n styles['SimpleCell__before'],\n platform === 'ios' && styles['SimpleCell__before--ios'],\n )}\n >\n {before}\n </div>\n <div className={styles['SimpleCell__middle']}>\n {subhead && (\n <Subhead\n Component=\"span\"\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n >\n {subhead}\n </Subhead>\n )}\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeTitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n )}\n <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n {children}\n </Headline>\n {hasReactNode(badgeAfterTitle) && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n )}\n </div>\n {subtitle && (\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n )}\n <Footnote\n normalize={false}\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n >\n {subtitle}\n </Footnote>\n {badgeAfterSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n )}\n </div>\n )}\n {extraSubtitle && (\n <Footnote\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n >\n {extraSubtitle}\n </Footnote>\n )}\n </div>\n {hasReactNode(indicator) && (\n <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n {indicator}\n </Headline>\n )}\n {hasAfter && (\n <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n {after}\n {hasChevron && (\n <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n )}\n </div>\n )}\n </Tappable>\n );\n};\n"],"names":["SimpleCell","sizeYClassNames","none","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","hasChevron","hasAfter","hasReactNode","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;iEAlFU;sBACkB;+BACX;6BACF;0BAEY;0BACf;0BACA;yBACD;yBACA;AAGxB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAmEO,MAAMF,aAAa;QAAC,EACzBG,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,aAAaV,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAMG,WAAWC,IAAAA,kBAAY,EAACb,UAAUW;IACxC,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHR;QACJF,WAAWW,IAAAA,gBAAU,oBAEnBH,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CZ,qCACAI;;0BAGF,qBAACY;gBACCZ,WAAWW,IAAAA,gBAAU,4BAEnBR,aAAa;0BAGdZ;;0BAEH,sBAACqB;gBAAIZ,SAAS;;oBACXH,yBACC,qBAACgB,gBAAO;wBACNC,WAAU;wBACVd,WAAWW,IAAAA,gBAAU;kCAEpBd;;kCAGL,sBAACe;wBAAIZ,SAAS;;4BACXb,kCACC,qBAAC4B;gCAAKf,SAAS;0CAAgCb;;0CAEjD,qBAAC6B,kBAAQ;gCAACF,WAAU;gCAAOd,SAAS;gCAAkCiB,QAAO;0CAC1ExB;;4BAEFc,IAAAA,kBAAY,EAACnB,kCACZ,qBAAC2B;gCAAKf,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,sBAACc;wBAAIZ,SAAS;;4BACXX,qCACC,qBAAC0B;gCAAKf,SAAS;0CAAgCX;;0CAEjD,qBAAC6B,kBAAQ;gCACPC,WAAW;gCACXnB,WAAWW,IAAAA,gBAAU;0CAEpBb;;4BAEFR,oCACC,qBAACyB;gCAAKf,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,qBAACmB,kBAAQ;wBACPlB,WAAWW,IAAAA,gBAAU;kCAEpBZ;;;;YAINQ,IAAAA,kBAAY,EAACf,4BACZ,qBAACwB,kBAAQ;gBAACF,WAAU;gBAAOG,QAAO;gBAAIjB,SAAS;0BAC5CR;;YAGJc,0BACC,sBAACM;gBAAIZ,WAAWW,IAAAA,gBAAU,2BAA8B;;oBACrDjB;oBACAW,4BACC,qBAACe,gBAAO;wBAACC,MAAMpB;wBAAaD,SAAS;;;;;;AAMjD"}

package/dist/cjs/components/SimpleGrid/SimpleGrid.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { type GapsProp } from '../../lib/layouts';
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Количество колонок
+     */
+    columns?: number;
+    /**
+     * Отступы между элементами.
+     * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
+     * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+     *
+     * TODO [>=7]: порядок следования будет [row, column]
+     */
+    gap?: GapsProp;
+    /**
+     * Управляет отступами вокруг контейнера
+     * Значение `none` позволяет отключить отступы
+     * Значение `auto` позволяет задать платформенные отступы
+     * Значение `auto-inline` позволяет задать платформенные inline-отступы
+     * Значение `auto-block` позволяет задать платформенные block-отступы
+     */
+    margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';
+    /**
+     * Вместо задания количества колонок, можно указать минимальную ширину элементов
+     */
+    minColWidth?: number;
+    /**
+     * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`
+     */
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+}
+export declare const SimpleGrid: ({ columns, gap, style: styleProp, margin, minColWidth, align, ...props }: SimpleGridProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SimpleGrid.d.ts.map

package/dist/cjs/components/SimpleGrid/SimpleGrid.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkB7E,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC7D;AAED,eAAO,MAAM,UAAU,6EAQpB,eAAe,4CA4BjB,CAAC"}

package/dist/cjs/components/SimpleGrid/SimpleGrid.js ADDED Viewed

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SimpleGrid", {
+    enumerable: true,
+    get: function() {
+        return SimpleGrid;
+    }
+});
+const _object_spread = require("@swc/helpers/_/_object_spread");
+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 _vkjs = require("@vkontakte/vkjs");
+const _layouts = require("../../lib/layouts");
+const _RootComponent = require("../RootComponent/RootComponent");
+const marginClassNames = {
+    'auto': "vkuiSimpleGrid--margin-auto",
+    'auto-inline': "vkuiSimpleGrid--margin-auto-inline",
+    'auto-block': "vkuiSimpleGrid--margin-auto-block"
+};
+const alignClassNames = {
+    start: "vkuiSimpleGrid--align-start",
+    end: "vkuiSimpleGrid--align-end",
+    center: "vkuiSimpleGrid--align-center",
+    stretch: "vkuiSimpleGrid--align-stretch",
+    baseline: "vkuiSimpleGrid--align-baseline"
+};
+const SimpleGrid = (_param)=>{
+    var { columns = 1, gap, style: styleProp, margin = 'none', minColWidth, align = 'stretch' } = _param, props = _object_without_properties._(_param, [
+        "columns",
+        "gap",
+        "style",
+        "margin",
+        "minColWidth",
+        "align"
+    ]);
+    const style = {};
+    const [columnGap, rowGap] = (0, _layouts.calculateGap)(gap);
+    if (typeof rowGap === 'number') {
+        style['--vkui_internal--row_gap'] = `${rowGap}px`;
+    }
+    if (typeof columnGap === 'number') {
+        style['--vkui_internal--column_gap'] = `${columnGap}px`;
+    }
+    style['--vkui_internal--grid_columns'] = `${columns}`;
+    if (minColWidth) {
+        style['--vkui_internal--min_col_width'] = `${minColWidth}px`;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, props), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSimpleGrid", margin !== 'none' && marginClassNames[margin], alignClassNames[align], minColWidth && "vkuiSimpleGrid--with-min-width", typeof columnGap === 'string' && _layouts.columnGapClassNames[columnGap], typeof rowGap === 'string' && _layouts.rowGapClassNames[rowGap]),
+        style: _object_spread._({}, style, styleProp)
+    }));
+};
+//# sourceMappingURL=SimpleGrid.js.map

package/dist/cjs/components/SimpleGrid/SimpleGrid.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n calculateGap,\n columnGapClassNames,\n type GapsProp,\n rowGapClassNames,\n} from '../../lib/layouts';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n 'auto': styles['SimpleGrid--margin-auto'],\n 'auto-inline': styles['SimpleGrid--margin-auto-inline'],\n 'auto-block': styles['SimpleGrid--margin-auto-block'],\n};\n\nconst alignClassNames = {\n start: styles['SimpleGrid--align-start'],\n end: styles['SimpleGrid--align-end'],\n center: styles['SimpleGrid--align-center'],\n stretch: styles['SimpleGrid--align-stretch'],\n baseline: styles['SimpleGrid--align-baseline'],\n};\n\nexport interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /**\n * Количество колонок\n */\n columns?: number;\n /**\n * Отступы между элементами.\n * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\n *\n * TODO [>=7]: порядок следования будет [row, column]\n */\n gap?: GapsProp;\n /**\n * Управляет отступами вокруг контейнера\n * Значение `none` позволяет отключить отступы\n * Значение `auto` позволяет задать платформенные отступы\n * Значение `auto-inline` позволяет задать платформенные inline-отступы\n * Значение `auto-block` позволяет задать платформенные block-отступы\n */\n margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n /**\n * Вместо задания количества колонок, можно указать минимальную ширину элементов\n */\n minColWidth?: number;\n /**\n * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n */\n align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n columns = 1,\n gap,\n style: styleProp,\n margin = 'none',\n minColWidth,\n align = 'stretch',\n ...props\n}: SimpleGridProps) => {\n const style: CSSCustomProperties = {};\n const [columnGap, rowGap] = calculateGap(gap);\n if (typeof rowGap === 'number') {\n style['--vkui_internal--row_gap'] = `${rowGap}px`;\n }\n if (typeof columnGap === 'number') {\n style['--vkui_internal--column_gap'] = `${columnGap}px`;\n }\n style['--vkui_internal--grid_columns'] = `${columns}`;\n if (minColWidth) {\n style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n }\n\n return (\n <RootComponent\n {...props}\n baseClassName={classNames(\n styles.SimpleGrid,\n margin !== 'none' && marginClassNames[margin],\n alignClassNames[align],\n minColWidth && styles['SimpleGrid--with-min-width'],\n typeof columnGap === 'string' && columnGapClassNames[columnGap],\n typeof rowGap === 'string' && rowGapClassNames[rowGap],\n )}\n style={{ ...style, ...styleProp }}\n />\n );\n};\n"],"names":["SimpleGrid","marginClassNames","alignClassNames","start","end","center","stretch","baseline","columns","gap","style","styleProp","margin","minColWidth","align","props","columnGap","rowGap","calculateGap","RootComponent","baseClassName","classNames","columnGapClassNames","rowGapClassNames"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;sBAxDc;yBAMpB;+BAEuB;AAG9B,MAAMC,mBAAmB;IACvB,MAAM;IACN,aAAa;IACb,YAAY;AACd;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAiCO,MAAMP,aAAa;QAAC,EACzBQ,UAAU,CAAC,EACXC,GAAG,EACHC,OAAOC,SAAS,EAChBC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EAED,WADbC;QANHP;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAMJ,QAA6B,CAAC;IACpC,MAAM,CAACM,WAAWC,OAAO,GAAGC,IAAAA,qBAAY,EAACT;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BP,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEO,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCN,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEM,UAAU,EAAE,CAAC;IACzD;IACAN,KAAK,CAAC,gCAAgC,GAAG,CAAC,EAAEF,QAAQ,CAAC;IACrD,IAAIK,aAAa;QACfH,KAAK,CAAC,iCAAiC,GAAG,CAAC,EAAEG,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,qBAACM,4BAAa,8CACRJ;QACJK,eAAeC,IAAAA,gBAAU,oBAEvBT,WAAW,UAAUX,gBAAgB,CAACW,OAAO,EAC7CV,eAAe,CAACY,MAAM,EACtBD,iDACA,OAAOG,cAAc,YAAYM,4BAAmB,CAACN,UAAU,EAC/D,OAAOC,WAAW,YAAYM,yBAAgB,CAACN,OAAO;QAExDP,OAAO,qBAAKA,OAAUC;;AAG5B"}

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

@@ -29,5 +29,5 @@ export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement
  *
  * @since 6.1.0
  */
-export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => React.ReactNode;
 //# sourceMappingURL=Skeleton.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7E,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sKAgBlB,aAAa,~~4CAqCf~~,CAAC"}
1	+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7E,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sKAgBlB,aAAa,KAAG,KAAK,CAAC,SAqCxB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /*\n Начальный цвет анимации\n /\n colorFrom?: string;\n\n /\n Финальный цвет анимации\n /\n colorTo?: string;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет\n /\n noAnimation?: boolean;\n\n /\n Длительность анимации в секундах\n /\n duration?: number;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n */\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n style,\n children,\n colorFrom,\n colorTo,\n noAnimation,\n duration,\n margin,\n ...restProps\n}: SkeletonProps) => {\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={classNames(\n styles['Skeleton'],\n noAnimation && styles['Skeleton--disableAnimation'],\n )}\n style={{ ...skeletonStyle, ...style }}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","RootComponent","Component","baseClassName","classNames"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;;iEAnDU;sBACI;+BAEG;AAgDvB,MAAMA,WAAW;QAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EAEQ,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,qBAACM,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,kBAEvBV;QAEFJ,OAAO,qBAAKQ,eAAkBR;OAC1BO;kBAEHN,0BAAY;sBAAE;;;AAGrB"}
1	+ {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /*\n Начальный цвет анимации\n /\n colorFrom?: string;\n\n /\n Финальный цвет анимации\n /\n colorTo?: string;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет\n /\n noAnimation?: boolean;\n\n /\n Длительность анимации в секундах\n /\n duration?: number;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n */\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n style,\n children,\n colorFrom,\n colorTo,\n noAnimation,\n duration,\n margin,\n ...restProps\n}: SkeletonProps): React.ReactNode => {\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={classNames(\n styles['Skeleton'],\n noAnimation && styles['Skeleton--disableAnimation'],\n )}\n style={{ ...skeletonStyle, ...style }}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","RootComponent","Component","baseClassName","classNames"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;;iEAnDU;sBACI;+BAEG;AAgDvB,MAAMA,WAAW;QAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EAEQ,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,qBAACM,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,kBAEvBV;QAEFJ,OAAO,qBAAKQ,eAAkBR;OAC1BO;kBAEHN,0BAAY;sBAAE;;;AAGrB"}

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

@@ -41,5 +41,5 @@ export interface SliderMultipleProps extends SliderBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, size, ...restProps }: SliderProps | SliderMultipleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, size, ...restProps }: SliderProps | SliderMultipleProps) => React.ReactNode;
 //# sourceMappingURL=Slider.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AA0BhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,2LAgBhB,WAAW,GAAG,mBAAmB,~~4CAwMnC~~,CAAC"}
1	+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AA0BhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,2LAgBhB,WAAW,GAAG,mBAAmB,KAAG,KAAK,CAAC,SAwM5C,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n none: styles['Slider--sizeY-none'],\n ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n l: styles['Slider--size-l'],\n m: styles['Slider--size-m'],\n s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n /*\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: (index: number) => string;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: (value: number, index: number) => string;\n withTooltip?: boolean;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n multiple?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number, event: TouchEvent \| React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n multiple: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number], event: TouchEvent \| React.ChangeEvent) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n onChange,\n withTooltip,\n size = 'l',\n ...restProps\n}: SliderProps \| SliderMultipleProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n const isControlled = valueProp !== undefined;\n const [localValue, setValue] = React.useState(defaultValue);\n\n const value = React.useMemo<InternalValueState>(() => {\n const resolvedValue = isControlled ? valueProp : localValue;\n return Array.isArray(resolvedValue)\n ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n : [clamp(resolvedValue, min, max), null];\n }, [isControlled, valueProp, localValue, min, max]);\n\n const [startValue, endValue] = value;\n const multiple = multipleProp && endValue !== null;\n const startValueInPercent = toPercent(startValue, min, max);\n const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType \| null>(null);\n\n const gesture = React.useRef<InternalGestureRef>({\n dragging: null,\n startX: 0,\n containerWidth: 0,\n }).current;\n const thumbsContainerRef = useExternRef(getRootRef);\n const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n extractSliderAriaAttributesFromRestProps(restProps);\n\n const changeValue = (nextValue: InternalValueState, event: TouchEvent \| React.ChangeEvent) => {\n if (disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n\n if (multipleProp) {\n if (isMultipleValues(nextValue)) {\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n }\n } else {\n !isControlled && setValue(nextValue[0]);\n onChange && onChange(nextValue[0], event);\n }\n };\n\n const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n if (!thumbsContainerRef.current) {\n return;\n }\n\n const { left: nextContainerX, width: nextContainerWidth } =\n thumbsContainerRef.current.getBoundingClientRect();\n\n // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n const nextStartX = event.startX - nextContainerX;\n const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n gesture.dragging = nextDragging;\n gesture.containerWidth = nextContainerWidth;\n gesture.startX = nextStartX;\n\n const updatedInternalStateValue = updateInternalStateValue(\n value,\n nextValue,\n min,\n max,\n nextDragging,\n );\n\n const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n if (\n thumbStartInputRef.current &&\n (foundDraggingType === 'start' \|\|\n (nextStartValue !== startValue && nextEndValue === endValue))\n ) {\n thumbStartInputRef.current.focus();\n event.originalEvent.preventDefault();\n } else if (\n thumbEndInputRef.current &&\n (foundDraggingType === 'end' \|\| (nextEndValue !== endValue && nextStartValue === startValue))\n ) {\n thumbEndInputRef.current.focus();\n event.originalEvent.preventDefault();\n }\n\n changeValue(updatedInternalStateValue, event);\n\n event.originalEvent.stopPropagation();\n setActiveThumb(gesture.dragging);\n };\n\n const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n const { startX, containerWidth, dragging } = gesture;\n\n const { shiftX = 0 } = event;\n const nextStartX = startX + shiftX;\n const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n };\n\n const handlePointerEnd: TouchEventHandler = (event) => {\n gesture.dragging = null;\n event.originalEvent.stopPropagation();\n setActiveThumb(null);\n };\n\n const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n changeValue(\n updateInternalStateValueByNativeChange(\n value,\n Number(event.target.value),\n getDraggingTypeByTargetDataset(event.target),\n ),\n event,\n );\n };\n\n return (\n <Touch\n data-value={multiple ? `${startValue},${endValue}` : startValue}\n {...restPropsWithoutAriaAttributes}\n className={classNames(\n styles['Slider'],\n disabled && styles['Slider--disabled'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n sizeClassNames[size],\n className,\n )}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles['Slider__track']} />\n <div\n className={styles['Slider__track-fill']}\n style={\n multiple\n ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n : { width: `${startValueInPercent}%` }\n }\n />\n <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n <SliderThumb\n data-type=\"start\"\n className={styles['Slider__thumb']}\n style={{\n left: `${startValueInPercent}%`,\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'start'}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={styles['Slider__thumb']}\n style={{ left: `${endReversedValueInPercent}%` }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'end'}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["Slider","sizeYClassNames","none","sizeClassNames","l","m","s","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","useAdaptivity","isControlled","undefined","localValue","setValue","React","useState","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps","isActive"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n none: styles['Slider--sizeY-none'],\n ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n l: styles['Slider--size-l'],\n m: styles['Slider--size-m'],\n s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n /*\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: (index: number) => string;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: (value: number, index: number) => string;\n withTooltip?: boolean;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n multiple?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number, event: TouchEvent \| React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n multiple: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number], event: TouchEvent \| React.ChangeEvent) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n onChange,\n withTooltip,\n size = 'l',\n ...restProps\n}: SliderProps \| SliderMultipleProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n const isControlled = valueProp !== undefined;\n const [localValue, setValue] = React.useState(defaultValue);\n\n const value = React.useMemo<InternalValueState>(() => {\n const resolvedValue = isControlled ? valueProp : localValue;\n return Array.isArray(resolvedValue)\n ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n : [clamp(resolvedValue, min, max), null];\n }, [isControlled, valueProp, localValue, min, max]);\n\n const [startValue, endValue] = value;\n const multiple = multipleProp && endValue !== null;\n const startValueInPercent = toPercent(startValue, min, max);\n const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType \| null>(null);\n\n const gesture = React.useRef<InternalGestureRef>({\n dragging: null,\n startX: 0,\n containerWidth: 0,\n }).current;\n const thumbsContainerRef = useExternRef(getRootRef);\n const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n extractSliderAriaAttributesFromRestProps(restProps);\n\n const changeValue = (nextValue: InternalValueState, event: TouchEvent \| React.ChangeEvent) => {\n if (disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n\n if (multipleProp) {\n if (isMultipleValues(nextValue)) {\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n }\n } else {\n !isControlled && setValue(nextValue[0]);\n onChange && onChange(nextValue[0], event);\n }\n };\n\n const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n if (!thumbsContainerRef.current) {\n return;\n }\n\n const { left: nextContainerX, width: nextContainerWidth } =\n thumbsContainerRef.current.getBoundingClientRect();\n\n // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n const nextStartX = event.startX - nextContainerX;\n const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n gesture.dragging = nextDragging;\n gesture.containerWidth = nextContainerWidth;\n gesture.startX = nextStartX;\n\n const updatedInternalStateValue = updateInternalStateValue(\n value,\n nextValue,\n min,\n max,\n nextDragging,\n );\n\n const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n if (\n thumbStartInputRef.current &&\n (foundDraggingType === 'start' \|\|\n (nextStartValue !== startValue && nextEndValue === endValue))\n ) {\n thumbStartInputRef.current.focus();\n event.originalEvent.preventDefault();\n } else if (\n thumbEndInputRef.current &&\n (foundDraggingType === 'end' \|\| (nextEndValue !== endValue && nextStartValue === startValue))\n ) {\n thumbEndInputRef.current.focus();\n event.originalEvent.preventDefault();\n }\n\n changeValue(updatedInternalStateValue, event);\n\n event.originalEvent.stopPropagation();\n setActiveThumb(gesture.dragging);\n };\n\n const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n const { startX, containerWidth, dragging } = gesture;\n\n const { shiftX = 0 } = event;\n const nextStartX = startX + shiftX;\n const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n };\n\n const handlePointerEnd: TouchEventHandler = (event) => {\n gesture.dragging = null;\n event.originalEvent.stopPropagation();\n setActiveThumb(null);\n };\n\n const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n changeValue(\n updateInternalStateValueByNativeChange(\n value,\n Number(event.target.value),\n getDraggingTypeByTargetDataset(event.target),\n ),\n event,\n );\n };\n\n return (\n <Touch\n data-value={multiple ? `${startValue},${endValue}` : startValue}\n {...restPropsWithoutAriaAttributes}\n className={classNames(\n styles['Slider'],\n disabled && styles['Slider--disabled'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n sizeClassNames[size],\n className,\n )}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles['Slider__track']} />\n <div\n className={styles['Slider__track-fill']}\n style={\n multiple\n ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n : { width: `${startValueInPercent}%` }\n }\n />\n <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n <SliderThumb\n data-type=\"start\"\n className={styles['Slider__thumb']}\n style={{\n left: `${startValueInPercent}%`,\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'start'}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={styles['Slider__thumb']}\n style={{ left: `${endReversedValueInPercent}%` }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'end'}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["Slider","sizeYClassNames","none","sizeClassNames","l","m","s","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","useAdaptivity","isControlled","undefined","localValue","setValue","React","useState","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps","isActive"],"mappings":"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"}

package/dist/cjs/components/Slider/SliderThumb/SliderThumb.d.ts CHANGED Viewed

@@ -7,6 +7,6 @@ interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute
     withTooltip?: boolean;
     isActive?: boolean;
 }
-export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, isActive, ...restProps }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, isActive, ...restProps }: SliderThumbProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=SliderThumb.d.ts.map

package/dist/cjs/components/Slider/SliderThumb/SliderThumb.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,+EAOrB,gBAAgB,~~4CAkGlB~~,CAAC"}
1	+ {"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,+EAOrB,gBAAgB,KAAG,KAAK,CAAC,SAkG3B,CAAC"}

package/dist/cjs/components/Slider/SliderThumb/SliderThumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string;\n style?: React.CSSProperties;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n HasDataAttribute;\n withTooltip?: boolean;\n isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n isActive,\n ...restProps\n}: SliderThumbProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles['SliderThumb--focus-visible'],\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const {\n value: isHovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered \|\| isActive);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(\n styles['SliderThumb'],\n focusVisibleClassNames,\n isActive && styles['SliderThumb--active'],\n isHovered && styles['SliderThumb--hover'],\n className,\n )}\n >\n <input\n {...inputProps}\n type=\"range\"\n className={styles['SliderThumb__nativeInput']}\n aria-orientation=\"horizontal\"\n onBlur={onBlur}\n onFocus={onFocus}\n />\n </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties(\n floatingPositionStrategy,\n floatingDataX,\n floatingDataY,\n )}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n text={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","arrowRef","setArrowRef","React","useState","memoizedMiddlewares","useMemo","offsetMiddleware","crossAxis","mainAxis","flipMiddleware","shiftMiddleware","padding","arrowMiddleware","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","useFloating","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","useBooleanState","handleRootRef","useExternRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","classNames","input","type","aria-orientation","TooltipBase","appearance","setFloating","style","convertFloatingDataToReactCSSProperties","arrowProps","coords","text"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;iCACK;8BACH;iCACG;0CACS;0BAQlC;6BAEqB;AAarB,MAAMA,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EAES,WADdC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDL;QACAM,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsBF,OAAMG,OAAO,CAAC;QACxC,OAAO;YACLC,IAAAA,0BAAgB,EAAC;gBACfC,WAAW;gBACXC,UAAU;YACZ;YACAC,IAAAA,wBAAc;YACdC,IAAAA,yBAAe,EAAC;gBAAEC,SAAS;YAAE;YAC7BC,IAAAA,yBAAe,EAAC;gBACdC,SAASb;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJc,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGC,IAAAA,qBAAW,EAAC;QACdV,WAAW;QACXW,YAAYzB;IACd;IAEA,MAAM,EACJ0B,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGC,IAAAA,gCAAe,EAAC;IAEpB,MAAMC,gBAAgBC,IAAAA,0BAAY,EAAkBlD,YAAYgC,KAAKmB,YAAY;IAEjF,MAAMC,oBAAoBlD,eAAgBG,CAAAA,gBAAgBsC,aAAaxC,QAAO;IAE9E,MAAMkD,aAAapD,cAAcA,WAAWyC,KAAK;IACjD5B,OAAMwC,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDd;QACF;IACF,GACA;QAACc;QAAYd;QAAuBa;KAAkB;IAGxD,qBACE,sBAACtC,OAAM0C,QAAQ;;0BACb,qBAACC,oDACKrD;gBACJsD,KAAKT;gBACLU,cAAcd;gBACde,cAAcb;gBACdhD,WAAW8D,IAAAA,gBAAU,qBAEnBpD,wBACAN,uCACAwC,uCACA5C;0BAGF,cAAA,qBAAC+D,qDACK7D;oBACJ8D,MAAK;oBACLhE,SAAS;oBACTiE,oBAAiB;oBACjB1D,QAAQA;oBACRC,SAASA;;;YAGZ6C,mCACC,qBAACa,wBAAW;gBACVC,YAAW;gBACXlE,YAAYgC,KAAKmC,WAAW;gBAC5BC,OAAOC,IAAAA,iDAAuC,EAC5CnC,0BACAP,eACAE;gBAEFyC,YAAY;oBACVC,QAAQlC;oBACRP,WAAWC;oBACX/B,YAAYa;gBACd;gBACA2D,MAAMnB;;;;AAKhB"}
1	+ {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string;\n style?: React.CSSProperties;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n HasDataAttribute;\n withTooltip?: boolean;\n isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n isActive,\n ...restProps\n}: SliderThumbProps): React.ReactNode => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles['SliderThumb--focus-visible'],\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const {\n value: isHovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered \|\| isActive);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(\n styles['SliderThumb'],\n focusVisibleClassNames,\n isActive && styles['SliderThumb--active'],\n isHovered && styles['SliderThumb--hover'],\n className,\n )}\n >\n <input\n {...inputProps}\n type=\"range\"\n className={styles['SliderThumb__nativeInput']}\n aria-orientation=\"horizontal\"\n onBlur={onBlur}\n onFocus={onFocus}\n />\n </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties(\n floatingPositionStrategy,\n floatingDataX,\n floatingDataY,\n )}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n text={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","arrowRef","setArrowRef","React","useState","memoizedMiddlewares","useMemo","offsetMiddleware","crossAxis","mainAxis","flipMiddleware","shiftMiddleware","padding","arrowMiddleware","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","useFloating","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","useBooleanState","handleRootRef","useExternRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","classNames","input","type","aria-orientation","TooltipBase","appearance","setFloating","style","convertFloatingDataToReactCSSProperties","arrowProps","coords","text"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;iCACK;8BACH;iCACG;0CACS;0BAQlC;6BAEqB;AAarB,MAAMA,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EAES,WADdC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDL;QACAM,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsBF,OAAMG,OAAO,CAAC;QACxC,OAAO;YACLC,IAAAA,0BAAgB,EAAC;gBACfC,WAAW;gBACXC,UAAU;YACZ;YACAC,IAAAA,wBAAc;YACdC,IAAAA,yBAAe,EAAC;gBAAEC,SAAS;YAAE;YAC7BC,IAAAA,yBAAe,EAAC;gBACdC,SAASb;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJc,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGC,IAAAA,qBAAW,EAAC;QACdV,WAAW;QACXW,YAAYzB;IACd;IAEA,MAAM,EACJ0B,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGC,IAAAA,gCAAe,EAAC;IAEpB,MAAMC,gBAAgBC,IAAAA,0BAAY,EAAkBlD,YAAYgC,KAAKmB,YAAY;IAEjF,MAAMC,oBAAoBlD,eAAgBG,CAAAA,gBAAgBsC,aAAaxC,QAAO;IAE9E,MAAMkD,aAAapD,cAAcA,WAAWyC,KAAK;IACjD5B,OAAMwC,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDd;QACF;IACF,GACA;QAACc;QAAYd;QAAuBa;KAAkB;IAGxD,qBACE,sBAACtC,OAAM0C,QAAQ;;0BACb,qBAACC,oDACKrD;gBACJsD,KAAKT;gBACLU,cAAcd;gBACde,cAAcb;gBACdhD,WAAW8D,IAAAA,gBAAU,qBAEnBpD,wBACAN,uCACAwC,uCACA5C;0BAGF,cAAA,qBAAC+D,qDACK7D;oBACJ8D,MAAK;oBACLhE,SAAS;oBACTiE,oBAAiB;oBACjB1D,QAAQA;oBACRC,SAASA;;;YAGZ6C,mCACC,qBAACa,wBAAW;gBACVC,YAAW;gBACXlE,YAAYgC,KAAKmC,WAAW;gBAC5BC,OAAOC,IAAAA,iDAAuC,EAC5CnC,0BACAP,eACAE;gBAEFyC,YAAY;oBACVC,QAAQlC;oBACRP,WAAWC;oBACX/B,YAAYa;gBACd;gBACA2D,MAAMnB;;;;AAKhB"}

package/dist/cjs/components/Slider/helpers.d.ts CHANGED Viewed

@@ -5,14 +5,11 @@ export declare const offsetToValue: (startX: number, width: number, min: number,
 export declare const updateInternalStateValue: (prevValue: InternalValueState, nextValue: number, min: number, max: number, dragging: InternalDraggingType | null) => InternalValueState;
 export declare const updateInternalStateValueByNativeChange: (prevValue: InternalValueState, nextValue: number, dragging: InternalDraggingType | null) => InternalValueState;
 export declare function isMultipleValues(value: InternalValueState): value is [number, number];
-export declare const snapDirection: (prevValue: InternalValueState, nextValue: number, type: InternalDraggingType | null) => "end" | "start";
-export declare const getDraggingTypeByTargetDataset: <T extends (EventTarget & HTMLElement) | null>(target: T) => "end" | "start" | null;
+export declare const snapDirection: (prevValue: InternalValueState, nextValue: number, type: InternalDraggingType | null) => "start" | "end";
+export declare const getDraggingTypeByTargetDataset: <T extends (EventTarget & HTMLElement) | null>(target: T) => "start" | "end" | null;
 export declare const extractSliderAriaAttributesFromRestProps: <T extends React.AriaAttributes>(restProps: T) => T & {
     ariaLabel: string | undefined;
     ariaValueText: string | undefined;
     ariaLabelledBy: string | undefined;
-    'aria-label': undefined;
-    'aria-valuetext': undefined;
-    'aria-labelledby': undefined;
 };
 //# sourceMappingURL=helpers.d.ts.map

package/dist/cjs/components/Slider/helpers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,~~WAAoC~~,CAAC;~~AAElG~~,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,~~WAGd~~,CAAC;AAYF,eAAO,MAAM,wBAAwB,cACxB,kBAAkB,aAClB,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,KACpC,kBAoBF,CAAC;AAEF,eAAO,MAAM,sCAAsC,cACtC,kBAAkB,aAClB,MAAM,YACP,oBAAoB,GAAG,IAAI,KACpC,kBAWF,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,cACb,kBAAkB,aAClB,MAAM,QACX,oBAAoB,GAAG,IAAI,~~oBAelC~~,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,IAAI,UACjF,CAAC,~~2BAWV~~,CAAC;AAQF,eAAO,MAAM,wCAAwC,GAAI,CAAC,SAAS,KAAK,CAAC,cAAc,aAC1E,CAAC~~;;;;;;;CAMb~~,CAAC"}
1	+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,KAAG,MAC/B,CAAC;AAElC,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,KACZ,MAEF,CAAC;AAYF,eAAO,MAAM,wBAAwB,cACxB,kBAAkB,aAClB,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,KACpC,kBAoBF,CAAC;AAEF,eAAO,MAAM,sCAAsC,cACtC,kBAAkB,aAClB,MAAM,YACP,oBAAoB,GAAG,IAAI,KACpC,kBAWF,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,cACb,kBAAkB,aAClB,MAAM,QACX,oBAAoB,GAAG,IAAI,KAChC,OAAO,GAAG,KAcZ,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,IAAI,UACjF,CAAC,KACR,OAAO,GAAG,KAAK,GAAG,IAUpB,CAAC;AAQF,eAAO,MAAM,wCAAwC,GAAI,CAAC,SAAS,KAAK,CAAC,cAAc,aAC1E,CAAC,KACX,CAAC,GAAG;IACL,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;CAMpC,CAAC"}

package/dist/cjs/components/Slider/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n startX: number,\n width: number,\n min: number,\n max: number,\n step?: number,\n) => {\n return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n if (value < min) {\n return min;\n }\n if (value > max) {\n return max;\n }\n return value;\n};\n\nexport const updateInternalStateValue = (\n prevValue: InternalValueState,\n nextValue: number,\n min: number,\n max: number,\n dragging: InternalDraggingType \| null,\n): InternalValueState => {\n const [prevStartValue, prevEndValue] = prevValue;\n\n if (prevEndValue === null) {\n return [restrictValueByMinMax(nextValue, min, max), null];\n }\n\n switch (dragging) {\n case 'start':\n return nextValue > prevEndValue\n ? [prevEndValue, prevEndValue]\n : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n case 'end':\n return nextValue < prevStartValue\n ? [prevStartValue, prevStartValue]\n : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n case null:\n default:\n return prevValue;\n }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n prevValue: InternalValueState,\n nextValue: number,\n dragging: InternalDraggingType \| null,\n): InternalValueState => {\n const [prevStartValue, prevEndValue] = prevValue;\n switch (dragging) {\n case 'start':\n return [nextValue, prevEndValue];\n case 'end':\n return [prevStartValue, nextValue];\n case null:\n default:\n return prevValue;\n }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n return value[1] !== null;\n}\n\nexport const snapDirection = (\n prevValue: InternalValueState,\n nextValue: number,\n type: InternalDraggingType \| null,\n) => {\n if (type === 'start') {\n return 'start';\n }\n if (type === 'end') {\n return 'end';\n }\n\n const [startRaw, endRaw] = prevValue;\n /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n const FORCE_DIFF_VALUE = 0.1;\n const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) \| null>(\n target: T,\n) => {\n if (target) {\n if (target.dataset.type === 'start') {\n return 'start';\n }\n if (target.dataset.type === 'end') {\n return 'end';\n }\n }\n return null;\n};\n\nconst resetProps = {\n 'aria-label': undefined,\n 'aria-valuetext': undefined,\n 'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n restProps: T,\n) => {\n const ariaLabel = restProps['aria-label'];\n const ariaValueText = restProps['aria-valuetext'];\n const ariaLabelledBy = restProps['aria-labelledby'];\n return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","v","min","max","startX","width","step","rescale","restrictValueByMinMax","value","prevValue","nextValue","dragging","prevStartValue","prevEndValue","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","target","dataset","resetProps","undefined","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":";;;;;;;;;;;~~IAmHaA~~,wCAAwC;eAAxCA;;IApBAC,8BAA8B;eAA9BA;;IAxBGC,gBAAgB;eAAhBA;;IAjEHC,aAAa;eAAbA;;IAqEAC,aAAa;eAAbA;;~~IAvEAC~~,SAAS;eAATA;;~~IAsBAC~~,wBAAwB;eAAxBA;;IA4BAC,sCAAsC;eAAtCA;;;;;;~~iEAtDU~~;sBACC;AAGjB,MAAMF,YAAY,CAACG,GAAWC,KAAaC,~~MAAgB~~,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;~~AAEvF~~,MAAMN,gBAAgB,CAC3BQ,QACAC,OACAH,KACAC,KACAG;IAEA,OAAOC,IAAAA,aAAO,EAACH,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACH;QAAKC;KAAI,EAAE;QAAEG;IAAK;AACxD;AAEA,MAAME,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEO,MAAMV,2BAA2B,CACtCW,WACAC,WACAT,KACAC,KACAS;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACN,sBAAsBG,WAAWT,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQS;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACN,sBAAsBG,WAAWT,KAAKC;gBAAMW;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBL,sBAAsBG,WAAWT,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOO;IACX;AACF;AAEO,MAAMV,yCAAyC,CACpDU,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF;AAEO,SAASf,iBAAiBc,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEO,MAAMZ,gBAAgB,CAC3Ba,WACAC,WACAI;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGP;IAC3B,2EAA2E,GAC3E,MAAMQ,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQR,cAAcU,KAAKC,GAAG,CAACF,MAAMT,aAAa,UAAU;AAC9E;AAEO,MAAMjB,iCAAiC,CAC5C6B;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACT,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIQ,OAAOC,OAAO,CAACT,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEO,MAAMjC,2CAA2C,CACtDkC;~~IAEA~~,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,4CAAKA,WAAcF;QAAYG;QAAWC;QAAeC;;AAClE"}
1	+ {"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number): number =>\n ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n startX: number,\n width: number,\n min: number,\n max: number,\n step?: number,\n): number => {\n return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n if (value < min) {\n return min;\n }\n if (value > max) {\n return max;\n }\n return value;\n};\n\nexport const updateInternalStateValue = (\n prevValue: InternalValueState,\n nextValue: number,\n min: number,\n max: number,\n dragging: InternalDraggingType \| null,\n): InternalValueState => {\n const [prevStartValue, prevEndValue] = prevValue;\n\n if (prevEndValue === null) {\n return [restrictValueByMinMax(nextValue, min, max), null];\n }\n\n switch (dragging) {\n case 'start':\n return nextValue > prevEndValue\n ? [prevEndValue, prevEndValue]\n : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n case 'end':\n return nextValue < prevStartValue\n ? [prevStartValue, prevStartValue]\n : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n case null:\n default:\n return prevValue;\n }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n prevValue: InternalValueState,\n nextValue: number,\n dragging: InternalDraggingType \| null,\n): InternalValueState => {\n const [prevStartValue, prevEndValue] = prevValue;\n switch (dragging) {\n case 'start':\n return [nextValue, prevEndValue];\n case 'end':\n return [prevStartValue, nextValue];\n case null:\n default:\n return prevValue;\n }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n return value[1] !== null;\n}\n\nexport const snapDirection = (\n prevValue: InternalValueState,\n nextValue: number,\n type: InternalDraggingType \| null,\n): 'start' \| 'end' => {\n if (type === 'start') {\n return 'start';\n }\n if (type === 'end') {\n return 'end';\n }\n\n const [startRaw, endRaw] = prevValue;\n /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n const FORCE_DIFF_VALUE = 0.1;\n const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) \| null>(\n target: T,\n): 'start' \| 'end' \| null => {\n if (target) {\n if (target.dataset.type === 'start') {\n return 'start';\n }\n if (target.dataset.type === 'end') {\n return 'end';\n }\n }\n return null;\n};\n\nconst resetProps = {\n 'aria-label': undefined,\n 'aria-valuetext': undefined,\n 'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n restProps: T,\n): T & {\n ariaLabel: string \| undefined;\n ariaValueText: string \| undefined;\n ariaLabelledBy: string \| undefined;\n} => {\n const ariaLabel = restProps['aria-label'];\n const ariaValueText = restProps['aria-valuetext'];\n const ariaLabelledBy = restProps['aria-labelledby'];\n return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","v","min","max","startX","width","step","rescale","restrictValueByMinMax","value","prevValue","nextValue","dragging","prevStartValue","prevEndValue","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","target","dataset","resetProps","undefined","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":";;;;;;;;;;;IAoHaA,wCAAwC;eAAxCA;;IApBAC,8BAA8B;eAA9BA;;IAxBGC,gBAAgB;eAAhBA;;IAjEHC,aAAa;eAAbA;;IAqEAC,aAAa;eAAbA;;IAxEAC,SAAS;eAATA;;IAuBAC,wBAAwB;eAAxBA;;IA4BAC,sCAAsC;eAAtCA;;;;;;iEAvDU;sBACC;AAGjB,MAAMF,YAAY,CAACG,GAAWC,KAAaC,MAChD,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAEvB,MAAMN,gBAAgB,CAC3BQ,QACAC,OACAH,KACAC,KACAG;IAEA,OAAOC,IAAAA,aAAO,EAACH,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACH;QAAKC;KAAI,EAAE;QAAEG;IAAK;AACxD;AAEA,MAAME,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEO,MAAMV,2BAA2B,CACtCW,WACAC,WACAT,KACAC,KACAS;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACN,sBAAsBG,WAAWT,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQS;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACN,sBAAsBG,WAAWT,KAAKC;gBAAMW;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBL,sBAAsBG,WAAWT,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOO;IACX;AACF;AAEO,MAAMV,yCAAyC,CACpDU,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF;AAEO,SAASf,iBAAiBc,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEO,MAAMZ,gBAAgB,CAC3Ba,WACAC,WACAI;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGP;IAC3B,2EAA2E,GAC3E,MAAMQ,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQR,cAAcU,KAAKC,GAAG,CAACF,MAAMT,aAAa,UAAU;AAC9E;AAEO,MAAMjB,iCAAiC,CAC5C6B;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACT,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIQ,OAAOC,OAAO,CAACT,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEO,MAAMjC,2CAA2C,CACtDkC;IAMA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,4CAAKA,WAAcF;QAAYG;QAAWC;QAAeC;;AAClE"}

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

@@ -5,6 +5,12 @@ import type { SnackbarPlacement } from './types';
 export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>, BasicProps {
     /**
      * Задаёт расположение компонента.
+     *
+     * > Note: в мобильном режиме:
+     * > - `"top-start"`/`"top-end"` перебивается на `"top"`, чтобы поведение было схожим с нативными
+     * >   уведомлениями;
+     * > - `"bottom"`/`"bottom-end"` перебивается на "bottom-start", чтобы избежать вызова системных
+     * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.
      */
     placement?: SnackbarPlacement;
     /**
@@ -32,8 +38,7 @@ export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: {
-    ({ placement, children, layout, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, getRootRef, ...restProps }: SnackbarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Snackbar: React.FC<SnackbarProps> & {
     Basic: typeof Basic;
 };
 //# sourceMappingURL=Snackbar.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAU~~/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ~~;;OAEG~~;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ~~;yJAgBlB~~,aAAa~~;;CAmMf~~,CAAC"}
1	+ {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CAqNrE,CAAC"}

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

@@ -18,6 +18,7 @@ const _vkjs = require("@vkontakte/vkjs");
 const _useExternRef = require("../../hooks/useExternRef");
 const _useFocusWithin = require("../../hooks/useFocusWithin");
 const _useGlobalEscKeyDown = require("../../hooks/useGlobalEscKeyDown");
+const _useMediaQueries = require("../../hooks/useMediaQueries");
 const _usePlatform = require("../../hooks/usePlatform");
 const _animation = require("../../lib/animation");
 const _dom = require("../../lib/dom");
@@ -70,6 +71,7 @@ const Snackbar = (_param)=>{
     const shiftDataRef = _react.useRef(null);
     const rafRef = _react.useRef(null);
     const closeTimeoutIdRef = _react.useRef();
+    const mediaQueries = (0, _useMediaQueries.useMediaQueries)();
     const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(open ? 'enter' : 'exit', {
         onExited: onClose
     });
@@ -101,7 +103,7 @@ const Snackbar = (_param)=>{
     const handleTouchStart = (event)=>{
         panGestureRecognizer.current = new _touch.UIPanGestureRecognizer();
         panGestureRecognizer.current.setStartCoords(event.nativeEvent);
-        shiftDataRef.current = (0, _utils.getInitialShiftData)(rootRef.current.offsetWidth, rootRef.current.offsetHeight);
+        shiftDataRef.current = (0, _utils.getInitialShiftData)(rootRef.current.offsetWidth, rootRef.current.offsetHeight, mediaQueries);
         setTouched(true);
     };
     const handleTouchMove = (event)=>{