npm - @vkontakte/vkui - Versions diffs - 5.2.0 → 5.2.2 - Mend

@vkontakte/vkui 5.2.0 → 5.2.2

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

Files changed (1184) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarTime.js","names":["hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","React","useCallback","event","setHours","Number","target","onMinutesChange","setMinutes","SizeType","COMPACT","getHours","getMinutes"],"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~setHours,~~ ~~setMinutes~~ } from '../../lib/~~date~~';\nimport { ~~CustomSelect~~ } from '~~../CustomSelect~~/~~CustomSelect~~';\nimport { ~~Button~~ } from '../~~Button~~/~~Button~~';\nimport { ~~SizeType~~ } from '~~../../lib~~/~~adaptivity~~';\nimport { ~~AdaptivityProvider~~ } from '../~~AdaptivityProvider~~/~~AdaptivityProvider~~';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n value: Date;\n doneButtonText?: string;\n changeHoursAriaLabel?: string;\n changeMinutesAriaLabel?: string;\n onChange?(value: Date): void;\n onClose?(): void;\n}\n\nconst hours: Array<{\n value: number;\n label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n value: number;\n label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n value,\n doneButtonText = 'Готово',\n onChange,\n onClose,\n changeHoursAriaLabel = 'Изменить час',\n changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n const onHoursChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange?.(setHours(value, Number(event.target.value))),\n [onChange, value],\n );\n const onMinutesChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange?.(setMinutes(value, Number(event.target.value))),\n [onChange, value],\n );\n\n return (\n <div className={styles['CalendarTime']}>\n <div className={styles['CalendarTime__picker']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <CustomSelect\n value={value.getHours()}\n options={hours}\n onChange={onHoursChange}\n forceDropdownPortal={false}\n aria-label={changeHoursAriaLabel}\n />\n </AdaptivityProvider>\n </div>\n <div className={styles['CalendarTime__divider']}>:</div>\n <div className={styles['CalendarTime__picker']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <CustomSelect\n value={value.getMinutes()}\n options={minutes}\n onChange={onMinutesChange}\n forceDropdownPortal={false}\n aria-label={changeMinutesAriaLabel}\n />\n </AdaptivityProvider>\n </div>\n <div className={styles['CalendarTime__button']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n {doneButtonText}\n </Button>\n </AdaptivityProvider>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAYA,IAAMA,KAGJ,GAAG,EAAE;AACP,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,EAAE,EAAEA,CAAC,IAAI,CAAC,EAAE;EAC9BD,KAAK,CAACE,IAAI,CAAC;IAAEC,KAAK,EAAEF,CAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,CAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC7D;AAEA,IAAMC,OAGJ,GAAG,EAAE;AACP,KAAK,IAAIN,EAAC,GAAG,CAAC,EAAEA,EAAC,GAAG,EAAE,EAAEA,EAAC,IAAI,CAAC,EAAE;EAC9BM,OAAO,CAACL,IAAI,CAAC;IAAEC,KAAK,EAAEF,EAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,EAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC/D;AAEO,IAAME,YAAY,GAAG,SAAfA,YAAY,OAOA;EAAA,IANvBL,KAAK,QAALA,KAAK;IAAA,2BACLM,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IACzBC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,6BACPC,oBAAoB;IAApBA,oBAAoB,sCAAG,cAAc;IAAA,6BACrCC,sBAAsB;IAAtBA,sBAAsB,sCAAG,iBAAiB;EAE1C,IAAMC,aAAa,GAAGC,KAAK,CAACC,WAAW,CACrC,UAACC,KAA2C;IAAA,OAC1CP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,IAAAQ,cAAQ,EAACf,KAAK,EAAEgB,MAAM,CAACF,KAAK,CAACG,MAAM,CAACjB,KAAK,CAAC,CAAC,CAAC;EAAA,GACzD,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EACD,IAAMkB,eAAe,GAAGN,KAAK,CAACC,WAAW,CACvC,UAACC,KAA2C;IAAA,OAC1CP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,IAAAY,gBAAU,EAACnB,KAAK,EAAEgB,MAAM,CAACF,KAAK,CAACG,MAAM,CAACjB,KAAK,CAAC,CAAC,CAAC;EAAA,GAC3D,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EAED,oBACE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEoB,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,0BAAY;IACX,KAAK,EAAErB,KAAK,CAACsB,QAAQ,EAAG;IACxB,OAAO,EAAEzB,KAAM;IACf,QAAQ,EAAEc,aAAc;IACxB,mBAAmB,EAAE,KAAM;IAC3B,cAAYF;EAAqB,EACjC,CACiB,CACjB,eACN;IAAK,SAAS;EAAkC,GAAC,GAAC,CAAM,eACxD;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEW,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,0BAAY;IACX,KAAK,EAAErB,KAAK,CAACuB,UAAU,EAAG;IAC1B,OAAO,EAAEnB,OAAQ;IACjB,QAAQ,EAAEc,eAAgB;IAC1B,mBAAmB,EAAE,KAAM;IAC3B,cAAYR;EAAuB,EACnC,CACiB,CACjB,eACN;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEU,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,cAAM;IAAC,IAAI,EAAC,WAAW;IAAC,OAAO,EAAEb,OAAQ;IAAC,IAAI,EAAC,GAAG;IAAC,cAAYF;EAAe,GAC5EA,cAAc,CACR,CACU,CACjB,CACF;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"CalendarTime.js","names":["hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","React","useCallback","event","setHours","Number","target","onMinutesChange","setMinutes","SizeType","COMPACT","getHours","getMinutes"],"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType } from '../../lib/adaptivity';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n value: Date;\n doneButtonText?: string;\n changeHoursAriaLabel?: string;\n changeMinutesAriaLabel?: string;\n onChange?(value: Date): void;\n onClose?(): void;\n}\n\nconst hours: Array<{\n value: number;\n label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n value: number;\n label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n value,\n doneButtonText = 'Готово',\n onChange,\n onClose,\n changeHoursAriaLabel = 'Изменить час',\n changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n const onHoursChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange?.(setHours(value, Number(event.target.value))),\n [onChange, value],\n );\n const onMinutesChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange?.(setMinutes(value, Number(event.target.value))),\n [onChange, value],\n );\n\n return (\n <div className={styles['CalendarTime']}>\n <div className={styles['CalendarTime__picker']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <CustomSelect\n value={value.getHours()}\n options={hours}\n onChange={onHoursChange}\n forceDropdownPortal={false}\n aria-label={changeHoursAriaLabel}\n />\n </AdaptivityProvider>\n </div>\n <div className={styles['CalendarTime__divider']}>:</div>\n <div className={styles['CalendarTime__picker']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <CustomSelect\n value={value.getMinutes()}\n options={minutes}\n onChange={onMinutesChange}\n forceDropdownPortal={false}\n aria-label={changeMinutesAriaLabel}\n />\n </AdaptivityProvider>\n </div>\n <div className={styles['CalendarTime__button']}>\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n {doneButtonText}\n </Button>\n </AdaptivityProvider>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAYA,IAAMA,KAGJ,GAAG,EAAE;AACP,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,EAAE,EAAEA,CAAC,IAAI,CAAC,EAAE;EAC9BD,KAAK,CAACE,IAAI,CAAC;IAAEC,KAAK,EAAEF,CAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,CAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC7D;AAEA,IAAMC,OAGJ,GAAG,EAAE;AACP,KAAK,IAAIN,EAAC,GAAG,CAAC,EAAEA,EAAC,GAAG,EAAE,EAAEA,EAAC,IAAI,CAAC,EAAE;EAC9BM,OAAO,CAACL,IAAI,CAAC;IAAEC,KAAK,EAAEF,EAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,EAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC/D;AAEO,IAAME,YAAY,GAAG,SAAfA,YAAY,OAOA;EAAA,IANvBL,KAAK,QAALA,KAAK;IAAA,2BACLM,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IACzBC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,6BACPC,oBAAoB;IAApBA,oBAAoB,sCAAG,cAAc;IAAA,6BACrCC,sBAAsB;IAAtBA,sBAAsB,sCAAG,iBAAiB;EAE1C,IAAMC,aAAa,GAAGC,KAAK,CAACC,WAAW,CACrC,UAACC,KAA2C;IAAA,OAC1CP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,IAAAQ,cAAQ,EAACf,KAAK,EAAEgB,MAAM,CAACF,KAAK,CAACG,MAAM,CAACjB,KAAK,CAAC,CAAC,CAAC;EAAA,GACzD,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EACD,IAAMkB,eAAe,GAAGN,KAAK,CAACC,WAAW,CACvC,UAACC,KAA2C;IAAA,OAC1CP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,IAAAY,gBAAU,EAACnB,KAAK,EAAEgB,MAAM,CAACF,KAAK,CAACG,MAAM,CAACjB,KAAK,CAAC,CAAC,CAAC;EAAA,GAC3D,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EAED,oBACE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEoB,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,0BAAY;IACX,KAAK,EAAErB,KAAK,CAACsB,QAAQ,EAAG;IACxB,OAAO,EAAEzB,KAAM;IACf,QAAQ,EAAEc,aAAc;IACxB,mBAAmB,EAAE,KAAM;IAC3B,cAAYF;EAAqB,EACjC,CACiB,CACjB,eACN;IAAK,SAAS;EAAkC,GAAC,GAAC,CAAM,eACxD;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEW,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,0BAAY;IACX,KAAK,EAAErB,KAAK,CAACuB,UAAU,EAAG;IAC1B,OAAO,EAAEnB,OAAQ;IACjB,QAAQ,EAAEc,eAAgB;IAC1B,mBAAmB,EAAE,KAAM;IAC3B,cAAYR;EAAuB,EACnC,CACiB,CACjB,eACN;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,sCAAkB;IAAC,KAAK,EAAEU,oBAAQ,CAACC;EAAQ,gBAC1C,oBAAC,cAAM;IAAC,IAAI,EAAC,WAAW;IAAC,OAAO,EAAEb,OAAQ;IAAC,IAAI,EAAC,GAAG;IAAC,cAAYF;EAAe,GAC5EA,cAAc,CACR,CACU,CACjB,CACF;AAEV,CAAC;AAAC"}

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

@@ -8,11 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.CardGrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _adaptivity = require("../../lib/adaptivity");
 var _excluded = ["children", "size", "spaced", "className"];
+var sizeXClassNames = (0, _defineProperty2.default)({
+  none: "vkuiCardGrid--sizeX-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiCardGrid--sizeX-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
@@ -25,9 +29,10 @@ var CardGrid = function CardGrid(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], (0, _getSizeXClassName.getSizeXClassName)("vkuiCardGrid", sizeX), className)
+    className: (0, _vkjs.classNames)("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], className)
   }), children);
 };
 exports.CardGrid = CardGrid;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardGrid.js","names":["CardGrid","children","size","spaced","className","restProps","useAdaptivity","sizeX","classNames","styles","~~getSizeXClassName~~"],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~getSizeXClassName~~ } from '../../~~helpers~~/~~getSizeXClassName~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport styles from './CardGrid.module.css';\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n /\n spaced?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n children,\n size = 's',\n spaced = false,\n className,\n ...restProps\n}: CardGridProps) => {\n const { sizeX } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['CardGrid'],\n spaced && styles['CardGrid--spaced'],\n styles[`CardGrid--size-${size}`],\n ~~getSizeXClassName(styles~~[~~'CardGrid'~~]~~, sizeX)~~,\n className,\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;~~AAA0D~~;~~AAW1D~~;AACA;AACA;AACO,~~IAAMA~~,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,sDACMF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnBL,MAAM,0BAA8B,EACpCM,MAAM,0BAAmBP,IAAI,EAAG,~~EAChC~~,~~IAAAQ~~,~~oCAAiB~~,~~kBAAqBH~~,KAAK,CAAC,~~EAC5CH~~,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"CardGrid.js","names":["sizeXClassNames","none","SizeType","COMPACT","CardGrid","children","size","spaced","className","restProps","useAdaptivity","sizeX","classNames","styles","REGULAR"],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n none: styles['CardGrid--sizeX-none'],\n [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n /\n spaced?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n children,\n size = 's',\n spaced = false,\n className,\n ...restProps\n}: CardGridProps) => {\n const { sizeX = 'none' } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['CardGrid'],\n spaced && styles['CardGrid--spaced'],\n styles[`CardGrid--size-${size}`],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n className,\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAGhD,IAAMA,eAAe;EACnBC,IAAI;AAAgC,GACnCC,oBAAQ,CAACC,OAAO,gCAClB;AAUD;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,sDACMF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnBL,MAAM,0BAA8B,EACpCM,MAAM,0BAAmBP,IAAI,EAAG,EAChCK,KAAK,KAAKT,oBAAQ,CAACY,OAAO,IAAId,eAAe,CAACW,KAAK,CAAC,EACpDH,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -11,10 +11,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
 var _dom = require("../../lib/dom");
+var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
 var _excluded = ["children", "size", "showArrows", "withSpaces", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
@@ -29,8 +27,6 @@ var CardScroll = function CardScroll(_ref) {
     withSpaces = _ref$withSpaces === void 0 ? true : _ref$withSpaces,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
   var refContainer = React.useRef(null);
   var gapRef = React.useRef(null);
   var _useDOM = (0, _dom.useDOM)(),
@@ -70,7 +66,7 @@ var CardScroll = function CardScroll(_ref) {
     return slide.offsetLeft - gapRef.current.offsetWidth;
   }
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiCardScroll", (0, _getSizeXClassName.getSizeXClassName)("vkuiCardScroll", sizeX), styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
+    className: (0, _vkjs.classNames)("vkuiCardScroll", styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
   }), /*#__PURE__*/React.createElement(_HorizontalScroll.HorizontalScroll, {
     getScrollToLeft: getScrollToLeft,
     getScrollToRight: getScrollToRight,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardScroll.js","names":["CardScroll","children","size","showArrows","withSpaces","className","restProps","~~useAdaptivity","sizeX","~~refContainer","React","useRef","gapRef","useDOM","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","classNames","~~getSizeXClassName","~~styles"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~getSizeXClassName~~ } from '../../~~helpers~~/~~getSizeXClassName~~';\nimport { ~~useAdaptivity } from '../../hooks/useAdaptivity';\nimport {~~ HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport ~~{ useDOM } from '../../lib/dom';\nimport~~ styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n /\n size?: 's' \| 'm' \| 'l' \| false;\n showArrows?: HorizontalScrollProps['showArrows'];\n withSpaces?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardScroll\n /\nexport const CardScroll = ({\n children,\n size = 's',\n showArrows = true,\n withSpaces = true,\n className,\n ...restProps\n}: CardScrollProps) => {\n const ~~{ sizeX } = useAdaptivity();\n\n const~~ refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n (el: HTMLElement) =>\n el.offsetLeft +\n el.offsetWidth +\n parseInt(window!.getComputedStyle(el).marginRight) -\n offset >=\n 0,\n );\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo =\n slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['CardScroll'],\n ~~getSizeXClassName(~~styles[~~'CardScroll'], sizeX),\n styles[~~`CardScroll--size-${size}`],\n withSpaces && styles['CardScroll--withSpaces'],\n className,\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div className={styles['CardScroll__in']} ref={refContainer}>\n <span className={styles['CardScroll__gap']} ref={gapRef} />\n {children}\n <span className={styles['CardScroll__gap']} />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;~~AACA~~;~~AACA~~;~~AAAuC;AAYvC;~~AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,uBACVC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,uBACjBC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IACjBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,~~qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,~~IAAMC,YAAY,GAAGC,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACvD,IAAMC,MAAM,GAAGF,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAEjD,cAAmB,IAAAE,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EAEd,SAASC,eAAe,CAACC,MAAc,EAAU;IAC/C,IAAI,CAACP,YAAY,CAACQ,OAAO,IAAI,CAACL,MAAM,CAACK,OAAO,EAAE;MAC5C,OAAOD,MAAM;IACf;IACA,IAAME,cAAc,GAAGT,YAAY,CAACQ,OAAO,CAACE,WAAW;IACvD,IAAMC,UAAU,GAAG,iCAAKX,YAAY,CAACQ,OAAO,~~CAAChB~~,QAAQ,~~EAAoBoB~~,SAAS,CAChF,UAACC,EAAe;MAAA,OACdA,EAAE,CAACC,UAAU,GACXD,EAAE,CAACH,WAAW,GACdK,QAAQ,CAACV,MAAM,CAAEW,gBAAgB,CAACH,EAAE,CAAC,CAACI,WAAW,CAAC,GAClDV,MAAM,IACR,CAAC;IAAA,EACJ;IAED,IAAII,UAAU,KAAK,CAAC,CAAC,EAAE;MACrB,OAAOJ,MAAM;IACf;IAEA,IAAII,UAAU,KAAK,CAAC,EAAE;MACpB,OAAO,CAAC;IACV;IAEA,IAAMO,KAAK,GAAGlB,YAAY,CAACQ,OAAO,~~CAAChB~~,QAAQ,~~CAACmB~~,UAAU,CAAgB;IAEtE,IAAMQ,QAAQ,GACZD,KAAK,CAACJ,UAAU,IAAIL,cAAc,GAAGS,KAAK,CAACR,WAAW,CAAC,GAAGP,MAAM,CAACK,OAAO,CAACE,WAAW;IAEtF,IAAIS,QAAQ,IAAI,CAAC,GAAGhB,MAAM,CAACK,OAAO,CAACE,WAAW,EAAE;MAC9C,OAAO,CAAC;IACV;IAEA,OAAOS,QAAQ;EACjB;EAEA,SAASC,gBAAgB,CAACb,MAAc,EAAU;IAChD,IAAI,CAACP,YAAY,CAACQ,OAAO,IAAI,CAACL,MAAM,CAACK,OAAO,EAAE;MAC5C,OAAOD,MAAM;IACf;IAEA,IAAME,cAAc,GAAGT,YAAY,CAACQ,OAAO,CAACE,WAAW;IACvD,IAAMQ,KAAK,GAAGG,KAAK,CAACC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCxB,YAAY,CAACQ,OAAO,~~CAAChB~~,QAAQ,EAC7B,~~UAACqB~~,EAAe;MAAA,OAAKA,EAAE,CAACC,UAAU,GAAGD,EAAE,CAACH,WAAW,GAAGH,MAAM,GAAGE,cAAc;IAAA,EAC/D;IAEhB,IAAI,CAACS,KAAK,EAAE;MACV,OAAOX,MAAM;IACf;IAEA,OAAOW,KAAK,CAACJ,UAAU,GAAGX,MAAM,CAACK,OAAO,CAACE,WAAW;EACtD;EAEA,oBACE,~~sDACMb~~,SAAS;IACb,SAAS,EAAE,~~IAAA4B~~,gBAAU,~~oBAEnB~~,~~IAAAC,oCAAiB,oBAAuB3B,KAAK,CAAC,EAC9C4B,~~MAAM,~~4BAAqBlC~~,IAAI,EAAG,EAClCE,UAAU,gCAAoC,EAC9CC,SAAS;EACT,iBAEF,oBAAC,kCAAgB;IACf,eAAe,~~EAAEU~~,eAAgB;IACjC,gBAAgB,EAAEc,gBAAiB;IACnC,UAAU,~~EAAE1B~~;EAAW,gBAEvB;IAAK,SAAS,sBAA2B;IAAC,GAAG,~~EAAEM~~;EAAa,gBAC1D;IAAM,SAAS,uBAA4B;IAAC,GAAG,EAAEG;EAAO,EAAG,~~EAC1DX~~,QAAQ,eACT;IAAM,SAAS;EAA4B,EAAG,CAC1C,CACW,CACf;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"CardScroll.js","names":["CardScroll","children","size","showArrows","withSpaces","className","restProps","refContainer","React","useRef","gapRef","useDOM","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","classNames","styles"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n /\n size?: 's' \| 'm' \| 'l' \| false;\n showArrows?: HorizontalScrollProps['showArrows'];\n withSpaces?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardScroll\n /\nexport const CardScroll = ({\n children,\n size = 's',\n showArrows = true,\n withSpaces = true,\n className,\n ...restProps\n}: CardScrollProps) => {\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n (el: HTMLElement) =>\n el.offsetLeft +\n el.offsetWidth +\n parseInt(window!.getComputedStyle(el).marginRight) -\n offset >=\n 0,\n );\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo =\n slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['CardScroll'],\n styles[`CardScroll--size-${size}`],\n withSpaces && styles['CardScroll--withSpaces'],\n className,\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div className={styles['CardScroll__in']} ref={refContainer}>\n <span className={styles['CardScroll__gap']} ref={gapRef} />\n {children}\n <span className={styles['CardScroll__gap']} />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
+import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
     mode?: 'removable' | 'selectable';
     /**

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

@@ -10,15 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _platform = require("../../lib/platform");
-var _SimpleCell = require("../SimpleCell/SimpleCell");
-var _Removable = require("../Removable/Removable");
-var _usePlatform = require("../../hooks/usePlatform");
 var _useExternRef = require("../../hooks/useExternRef");
-var _useDraggable2 = require("./useDraggable");
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
 var _ListContext = require("../List/ListContext");
-var _CellDragger = require("./CellDragger/CellDragger");
+var _Removable = require("../Removable/Removable");
+var _SimpleCell = require("../SimpleCell/SimpleCell");
 var _CellCheckbox = require("./CellCheckbox/CellCheckbox");
+var _CellDragger = require("./CellDragger/CellDragger");
+var _useDraggable2 = require("./useDraggable");
 var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "draggable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
   _excluded2 = ["dragging"];
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Cell.js","names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","React","useContext","ListContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~SimpleCell,~~ ~~SimpleCellProps~~ } from '~~../SimpleCell~~/~~SimpleCell~~';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~Removable,~~ ~~RemovableProps~~ } from '~~../Removable/Removable~~';\nimport { ~~usePlatform~~ } from '~~../../hooks~~/~~usePlatform~~';\nimport { ~~useExternRef~~ } from '~~../../hooks~~/~~useExternRef~~';\nimport { ~~useDraggable~~ } from '~~./useDraggable~~';\nimport { ~~ListContext~~ } from '~~../List~~/~~ListContext~~';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { ~~CellCheckbox,~~ ~~CellCheckboxProps~~ } from './~~CellCheckbox/CellCheckbox~~';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' \| 'selectable';\n /*\n В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n /\n draggable?: boolean;\n /\n Имя для input в режиме selectable\n /\n name?: string;\n /\n В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n /\n checked?: boolean;\n /\n В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n /\n defaultChecked?: boolean;\n /\n Коллбэк срабатывает при завершении перетаскивания.\n * Важно: режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n /\n onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n /\n aria-label для кнопки перетаскивания ячейки\n /\n draggerLabel?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n mode,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = 'Перенести ячейку',\n className,\n style,\n ...restProps\n}: CellProps) => {\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const { dragging, ...draggableProps } = useDraggable({\n rootElRef,\n onDragFinish,\n });\n\n const { toggleDrag } = React.useContext(ListContext);\n React.useEffect(() => {\n if (dragging) {\n toggleDrag(true);\n return () => toggleDrag(false);\n }\n return undefined;\n }, [dragging, toggleDrag]);\n\n let dragger;\n if (draggable) {\n dragger = (\n <CellDragger\n className={styles['Cell__dragger']}\n aria-label={draggerLabel}\n {...draggableProps}\n />\n );\n }\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n onChange,\n defaultChecked,\n checked,\n disabled,\n };\n checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n }\n\n const simpleCellDisabled = (draggable && !selectable) \|\| removable \|\| disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n platform === Platform.IOS && styles['Cell--ios'],\n dragging && styles['Cell--dragging'],\n removable && styles['Cell--removable'],\n selectable && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n className={styles['Cell__content']}\n disabled={simpleCellDisabled}\n Component={selectable ? 'label' : Component}\n before={\n <React.Fragment>\n {draggable && platform !== Platform.IOS && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {draggable && platform === Platform.IOS && dragger}\n {after}\n </React.Fragment>\n }\n />\n );\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n >\n {simpleCell}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n {simpleCell}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;~~AAA8E;~~EAAA;~~AAqC9E~~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"}
1	+ {"version":3,"file":"Cell.js","names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","React","useContext","ListContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' \| 'selectable';\n /*\n В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n /\n draggable?: boolean;\n /\n Имя для input в режиме selectable\n /\n name?: string;\n /\n В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n /\n checked?: boolean;\n /\n В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n /\n defaultChecked?: boolean;\n /\n Коллбэк срабатывает при завершении перетаскивания.\n * Важно: режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n /\n onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n /\n aria-label для кнопки перетаскивания ячейки\n /\n draggerLabel?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n mode,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = 'Перенести ячейку',\n className,\n style,\n ...restProps\n}: CellProps) => {\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const { dragging, ...draggableProps } = useDraggable({\n rootElRef,\n onDragFinish,\n });\n\n const { toggleDrag } = React.useContext(ListContext);\n React.useEffect(() => {\n if (dragging) {\n toggleDrag(true);\n return () => toggleDrag(false);\n }\n return undefined;\n }, [dragging, toggleDrag]);\n\n let dragger;\n if (draggable) {\n dragger = (\n <CellDragger\n className={styles['Cell__dragger']}\n aria-label={draggerLabel}\n {...draggableProps}\n />\n );\n }\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n onChange,\n defaultChecked,\n checked,\n disabled,\n };\n checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n }\n\n const simpleCellDisabled = (draggable && !selectable) \|\| removable \|\| disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n platform === Platform.IOS && styles['Cell--ios'],\n dragging && styles['Cell--dragging'],\n removable && styles['Cell--removable'],\n selectable && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n className={styles['Cell__content']}\n disabled={simpleCellDisabled}\n Component={selectable ? 'label' : Component}\n before={\n <React.Fragment>\n {draggable && platform !== Platform.IOS && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {draggable && platform === Platform.IOS && dragger}\n {after}\n </React.Fragment>\n }\n />\n );\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n >\n {simpleCell}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n {simpleCell}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js CHANGED Viewed

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../../helpers/getPlatformClassName");
 var _usePlatform = require("../../../hooks/usePlatform");
-var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../../lib/platform");
 var _VisuallyHiddenInput = require("../../VisuallyHiddenInput/VisuallyHiddenInput");
 var _excluded = ["className", "style"];

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellCheckbox.js","names":["CellCheckbox","className","style","restProps","platform","usePlatform","IconOff","Platform","IOS","VKCOM","Icon24CheckCircleOff","Icon24CheckBoxOff","IconOn","Icon24CheckCircleOn","Icon24CheckBoxOn","classNames","getPlatformClassName"],"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n Icon24CheckCircleOff,\n Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { ~~getPlatformClassName~~ } from '~~../../../helpers~~/~~getPlatformClassName~~';\nimport { ~~usePlatform~~ } from '../../../~~hooks~~/~~usePlatform~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { Platform } from '../../../lib/platform';\nimport { ~~CellProps~~ } from '~~../Cell~~';\nimport { ~~VisuallyHiddenInput~~ } from '~~../../VisuallyHiddenInput/VisuallyHiddenInput~~';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' \| 'checked'> &\n React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n const platform = usePlatform();\n\n const IconOff =\n platform === Platform.IOS \|\| platform === Platform.VKCOM\n ? Icon24CheckCircleOff\n : Icon24CheckBoxOff;\n\n const IconOn =\n platform === Platform.IOS \|\| platform === Platform.VKCOM\n ? Icon24CheckCircleOn\n : Icon24CheckBoxOn;\n\n return (\n <span\n className={classNames(\n styles['CellCheckbox'],\n getPlatformClassName(styles['CellCheckbox'], platform),\n className,\n )}\n style={style}\n >\n <VisuallyHiddenInput\n className={styles['CellCheckbox__input']}\n type=\"checkbox\"\n {...restProps}\n />\n <span\n className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n aria-hidden\n >\n <IconOff />\n </span>\n <span\n className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n aria-hidden\n >\n <IconOn />\n </span>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;~~AAEA~~;AAAoF;~~AAM7E~~,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GACXF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDC,2BAAoB,GACpBC,wBAAiB;EAEvB,IAAMC,MAAM,GACVR,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDI,0BAAmB,GACnBC,uBAAgB;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,sBAEnB,IAAAC,0CAAoB,sBAAyBZ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAE,IAAAY,gBAAU,0DAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAE,IAAAA,gBAAU,yDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC;AAAC"}
1	+ {"version":3,"file":"CellCheckbox.js","names":["CellCheckbox","className","style","restProps","platform","usePlatform","IconOff","Platform","IOS","VKCOM","Icon24CheckCircleOff","Icon24CheckBoxOff","IconOn","Icon24CheckCircleOn","Icon24CheckBoxOn","classNames","getPlatformClassName"],"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n Icon24CheckCircleOff,\n Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' \| 'checked'> &\n React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n const platform = usePlatform();\n\n const IconOff =\n platform === Platform.IOS \|\| platform === Platform.VKCOM\n ? Icon24CheckCircleOff\n : Icon24CheckBoxOff;\n\n const IconOn =\n platform === Platform.IOS \|\| platform === Platform.VKCOM\n ? Icon24CheckCircleOn\n : Icon24CheckBoxOn;\n\n return (\n <span\n className={classNames(\n styles['CellCheckbox'],\n getPlatformClassName(styles['CellCheckbox'], platform),\n className,\n )}\n style={style}\n >\n <VisuallyHiddenInput\n className={styles['CellCheckbox__input']}\n type=\"checkbox\"\n {...restProps}\n />\n <span\n className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n aria-hidden\n >\n <IconOff />\n </span>\n <span\n className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n aria-hidden\n >\n <IconOn />\n </span>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AAAoF;AAO7E,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GACXF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDC,2BAAoB,GACpBC,wBAAiB;EAEvB,IAAMC,MAAM,GACVR,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDI,0BAAmB,GACnBC,uBAAgB;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,sBAEnB,IAAAC,0CAAoB,sBAAyBZ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAE,IAAAY,gBAAU,0DAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAE,IAAAA,gBAAU,yDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC;AAAC"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.js CHANGED Viewed

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../../helpers/getPlatformClassName");
 var _usePlatform = require("../../../hooks/usePlatform");
-var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../../lib/platform");
 var _Touch = require("../../Touch/Touch");
 var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellDragger.js","names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","onClick","React","useCallback","e","preventDefault","classNames","getPlatformClassName","Platform","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { ~~getPlatformClassName~~ } from '~~../../../helpers~~/~~getPlatformClassName~~';\nimport { ~~usePlatform~~ } from '../../../~~hooks~~/~~usePlatform~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\n className,\n ...restProps\n}: CellDraggerProps) => {\n const platform = usePlatform();\n\n const onClick = React.useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <Touch\n className={classNames(\n styles['CellDragger'],\n getPlatformClassName(styles['CellDragger'], platform),\n className,\n )}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={onClick}\n {...restProps}\n >\n {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;AAMnC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GAAGC,KAAK,CAACC,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,YAAK;IACJ,SAAS,EAAE,IAAAC,gBAAU,qBAEnB,IAAAC,0CAAoB,qBAAwBR,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEK;EAAQ,GACbH,SAAS,GAEZC,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,gBAAG,oBAAC,uBAAgB,OAAG,gBAAG,oBAAC,oBAAa,OAAG,CAC/D;AAEZ,CAAC;AAAC"}
1	+ {"version":3,"file":"CellDragger.js","names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","onClick","React","useCallback","e","preventDefault","classNames","getPlatformClassName","Platform","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\n className,\n ...restProps\n}: CellDraggerProps) => {\n const platform = usePlatform();\n\n const onClick = React.useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <Touch\n className={classNames(\n styles['CellDragger'],\n getPlatformClassName(styles['CellDragger'], platform),\n className,\n )}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={onClick}\n {...restProps}\n >\n {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;AAMnC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GAAGC,KAAK,CAACC,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,YAAK;IACJ,SAAS,EAAE,IAAAC,gBAAU,qBAEnB,IAAAC,0CAAoB,qBAAwBR,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEK;EAAQ,GACbH,SAAS,GAEZC,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,gBAAG,oBAAC,uBAAgB,OAAG,gBAAG,oBAAC,oBAAa,OAAG,CAC/D;AAEZ,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TappableProps } from '../Tappable/Tappable';
 import { HasRef, HasRootRef } from '../../types';
+import { type TappableProps } from '../Tappable/Tappable';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     description?: React.ReactNode;
     indeterminate?: boolean;

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

@@ -8,20 +8,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.Checkbox = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _Tappable = require("../Tappable/Tappable");
-var _vkjs = require("@vkontakte/vkjs");
-var _platform = require("../../lib/platform");
 var _icons = require("@vkontakte/icons");
-var _usePlatform = require("../../hooks/usePlatform");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _useExternRef = require("../../hooks/useExternRef");
 var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
-var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _useExternRef = require("../../hooks/useExternRef");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
+var _Tappable = require("../Tappable/Tappable");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
+var _sizeYClassNames;
+var sizeYClassNames = (_sizeYClassNames = {
+  none: "vkuiCheckbox--sizeY-none"
+}, (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _sizeYClassNames);
 var warn = (0, _warnOnce.warnOnce)('Checkbox');
 /**
@@ -46,7 +51,8 @@ var Checkbox = function Checkbox(_ref) {
   var inputRef = (0, _useExternRef.useExternRef)(getRef);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _useAdaptivityConditi = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)(),
     adaptiveSizeY = _useAdaptivityConditi.sizeY;
   React.useEffect(function () {
@@ -77,7 +83,7 @@ var Checkbox = function Checkbox(_ref) {
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     Component: "label",
-    className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", (0, _getSizeYClassName.getSizeYClassName)("vkuiCheckbox", sizeY), !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
+    className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNames","Platform","VKCOM","getSizeYClassName","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY","compact","regular"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type TappableProps, ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport {\n Icon20CheckBoxOn,\n Icon24CheckBoxOn,\n Icon20CheckBoxOff,\n Icon24CheckBoxOff,\n Icon20CheckBoxIndetermanate,\n} from '@vkontakte/icons';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement>,\n Pick<\n TappableProps,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n indeterminate?: boolean;\n defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n children,\n className,\n style,\n getRootRef,\n getRef,\n description,\n indeterminate,\n defaultIndeterminate,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n onChange,\n ...restProps\n}: CheckboxProps) => {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminateValue);\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange: CheckboxProps['onChange'] = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined &&\n inputRef.current\n ) {\n inputRef.current.indeterminate = false;\n }\n if (indeterminate !== undefined && inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <Tappable\n Component=\"label\"\n className={classNames(\n styles['Checkbox'],\n platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n getSizeYClassName(styles['Checkbox'], sizeY),\n !(hasReactNode(children) \|\| hasReactNode(description)) && styles['Checkbox--simple'],\n className,\n )}\n style={style}\n disabled={restProps.disabled}\n activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <VisuallyHiddenInput\n {...restProps}\n onChange={handleChange}\n type=\"checkbox\"\n className={styles['Checkbox__input']}\n getRef={inputRef}\n />\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxOn />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxOff />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div\n className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n >\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxIndetermanate width={20} height={20} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.compact.className}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.regular.className}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={styles['Checkbox__content']}>\n <div className={styles['Checkbox__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n )}\n </div>\n </Tappable>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","names":["sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNames","Platform","VKCOM","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY","compact","regular"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20CheckBoxIndetermanate,\n Icon20CheckBoxOff,\n Icon20CheckBoxOn,\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n none: styles['Checkbox--sizeY-none'],\n [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement>,\n Pick<\n TappableProps,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n description?: React.ReactNode;\n indeterminate?: boolean;\n defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n children,\n className,\n style,\n getRootRef,\n getRef,\n description,\n indeterminate,\n defaultIndeterminate,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n onChange,\n ...restProps\n}: CheckboxProps) => {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminateValue);\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange: CheckboxProps['onChange'] = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined &&\n inputRef.current\n ) {\n inputRef.current.indeterminate = false;\n }\n if (indeterminate !== undefined && inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <Tappable\n Component=\"label\"\n className={classNames(\n styles['Checkbox'],\n platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n sizeYClassNames[sizeY],\n !(hasReactNode(children) \|\| hasReactNode(description)) && styles['Checkbox--simple'],\n className,\n )}\n style={style}\n disabled={restProps.disabled}\n activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <VisuallyHiddenInput\n {...restProps}\n onChange={handleChange}\n type=\"checkbox\"\n className={styles['Checkbox__input']}\n getRef={inputRef}\n />\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxOn />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxOff />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n )}\n {adaptiveSizeY.regular && (\n <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n )}\n </React.Fragment>\n )}\n </div>\n <div\n className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n >\n {platform === Platform.VKCOM ? (\n <Icon20CheckBoxIndetermanate width={20} height={20} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.compact.className}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <Icon20CheckBoxIndetermanate\n className={adaptiveSizeY.regular.className}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </div>\n <div className={styles['Checkbox__content']}>\n <div className={styles['Checkbox__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n )}\n </div>\n </Tappable>\n );\n};\n"],"mappings":"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"}

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

@@ -8,15 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.Chip = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
-var _utils = require("../../lib/utils");
 var _vkjs = require("@vkontakte/vkjs");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _Tappable = require("../Tappable/Tappable");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _adaptivity = require("../../lib/adaptivity");
+var _utils = require("../../lib/utils");
+var _Tappable = require("../Tappable/Tappable");
+var _Footnote = require("../Typography/Footnote/Footnote");
 var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel", "before", "after", "children", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiChip--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiChip--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
@@ -37,13 +41,14 @@ var Chip = function Chip(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var onRemoveWrapper = React.useCallback(function (event) {
     onRemove(event, value);
   }, [onRemove, value]);
   var title = (0, _utils.getTitleFromChildren)(children);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _vkjs.classNames)("vkuiChip", (0, _getSizeYClassName.getSizeYClassName)("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
+    className: (0, _vkjs.classNames)("vkuiChip", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable", className),
     role: "option",
     "aria-label": title
   }, restProps), /*#__PURE__*/React.createElement("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.js","names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","className","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNames","~~getSizeYClassName~~","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { ~~getTitleFromChildren~~ } from '~~../../lib~~/~~utils~~';\nimport { ~~classNames,~~ ~~hasReactNode, noop~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~Footnote~~ } from '~~../Typography~~/~~Footnote/Footnote~~';\nimport { ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport styles from './Chip.module.css';\n\nexport type ChipValue = string \| number;\n\nexport interface ChipOption {\n value?: ChipValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n value: ChipValue;\n option?: ChipOption;\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n label: string;\n option: T;\n disabled: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = '',\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = 'Удалить',\n before = null,\n after,\n children,\n className,\n ...restProps\n}: ChipProps) => {\n const { sizeY } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value],\n );\n const title = getTitleFromChildren(children);\n\n return (\n <div\n className={classNames(\n styles['Chip'],\n ~~getSizeYClassName(styles~~[~~'Chip'~~]~~, sizeY)~~,\n removable && styles['Chip--removable'],\n className,\n )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div className={styles['Chip__in']} role=\"presentation\">\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n {children}\n </Footnote>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n className={styles['Chip__remove']}\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel />\n </Tappable>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAAoE~~;~~AA2BpE~~;AACA;AACA;AACO,~~IAAMA~~,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGC,UAAI;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EACb~~,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3Bb,QAAQ,CAACa,KAAK,EAAEhB,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMiB,KAAK,GAAG,IAAAC,2BAAoB,EAACV,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,~~cAEnB~~,~~IAAAC~~,~~oCAAiB~~,~~cAAiBR~~,KAAK,CAAC,~~EACxCV~~,SAAS,yBAA6B,EACtCO,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYQ;EAAM,GACdP,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpD,IAAAW,kBAAY,EAACf,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,kBAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAEW,KAAM;IAAC;EAAW,GACpET,QAAQ,CACA,EACV,IAAAa,kBAAY,EAACd,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EL,SAAS,iBACR,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAEW,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeR,eAAe,cAAIY,KAAK;EAAG,gBAE1C,oBAAC,mBAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"Chip.js","names":["sizeYClassNames","none","SizeType","COMPACT","Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","className","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNames","REGULAR","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n none: styles['Chip--sizeY-none'],\n [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string \| number;\n\nexport interface ChipOption {\n value?: ChipValue;\n label?: string;\n [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n value: ChipValue;\n option?: ChipOption;\n onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n removable?: boolean;\n removeAriaLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n label: string;\n option: T;\n disabled: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n value = '',\n option,\n removable = true,\n onRemove = noop,\n removeAriaLabel = 'Удалить',\n before = null,\n after,\n children,\n className,\n ...restProps\n}: ChipProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const onRemoveWrapper = React.useCallback(\n (event: React.MouseEvent) => {\n onRemove(event, value);\n },\n [onRemove, value],\n );\n const title = getTitleFromChildren(children);\n\n return (\n <div\n className={classNames(\n styles['Chip'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n removable && styles['Chip--removable'],\n className,\n )}\n role=\"option\"\n aria-label={title}\n {...restProps}\n >\n <div className={styles['Chip__in']} role=\"presentation\">\n {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n {children}\n </Footnote>\n {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n {removable && (\n <Tappable\n Component=\"button\"\n className={styles['Chip__remove']}\n onClick={onRemoveWrapper}\n hasHover={false}\n hasActive={false}\n aria-label={`${removeAriaLabel} ${title}`}\n >\n <Icon16Cancel />\n </Tappable>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAG3D,IAAMA,eAAe;EACnBC,IAAI;AAA4B,GAC/BC,oBAAQ,CAACC,OAAO,4BAClB;AA0BD;AACA;AACA;AACO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGC,UAAI;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3Bb,QAAQ,CAACa,KAAK,EAAEhB,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMiB,KAAK,GAAG,IAAAC,2BAAoB,EAACV,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,cAEnBP,KAAK,KAAKf,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACiB,KAAK,CAAC,EACpDV,SAAS,yBAA6B,EACtCO,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYQ;EAAM,GACdP,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpD,IAAAW,kBAAY,EAACf,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,kBAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAEW,KAAM;IAAC;EAAW,GACpET,QAAQ,CACA,EACV,IAAAa,kBAAY,EAACd,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EL,SAAS,iBACR,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAEW,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeR,eAAe,cAAIY,KAAK;EAAG,gBAE1C,oBAAC,mBAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC;AAAC"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FormFieldProps } from '../FormField/FormField';
 import { ChipOption } from '../Chip/Chip';
 import { ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';
+import { FormFieldProps } from '../FormField/FormField';
 export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
 }
 /**

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipsInput = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _FormField = require("../FormField/FormField");
 var _vkjs = require("@vkontakte/vkjs");
 var _ChipsInputBase = require("../ChipsInputBase/ChipsInputBase");
+var _FormField = require("../FormField/FormField");
 var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipsInput.js","names":["ChipsInput","style","className","getRootRef","before","after","status","restProps","classNames","disabled","readOnly"],"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~FormField,~~ ~~FormFieldProps~~ } from '~~../FormField~~/~~FormField~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~ChipOption~~ } from '../~~Chip~~/~~Chip~~';\nimport { ~~ChipsInputBase~~, ~~ChipsInputBaseProps~~ } from '../~~ChipsInputBase~~/~~ChipsInputBase~~';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n extends ChipsInputBaseProps<Option>,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n style,\n className,\n getRootRef,\n before,\n after,\n status,\n ...restProps\n}: ChipsInputProps<Option>) => {\n return (\n <FormField\n getRootRef={getRootRef}\n className={classNames(styles['ChipsInput'], className)}\n style={style}\n disabled={restProps.disabled}\n before={before}\n after={after}\n role=\"application\"\n aria-disabled={restProps.disabled}\n aria-readonly={restProps.readOnly}\n status={status}\n >\n <ChipsInputBase {...restProps} />\n </FormField>\n );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;~~AAEA~~;~~AAAuF~~;~~AAOvF;~~AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,oBAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAE,IAAAK,gBAAU,oBAAuBN,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACE,QAAS;IAC7B,MAAM,EAAEL,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACE,QAAS;IAClC,iBAAeF,SAAS,CAACG,QAAS;IAClC,MAAM,EAAEJ;EAAO,gBAEf,oBAAC,8BAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC;AAAC"}
1	+ {"version":3,"file":"ChipsInput.js","names":["ChipsInput","style","className","getRootRef","before","after","status","restProps","classNames","disabled","readOnly"],"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n extends ChipsInputBaseProps<Option>,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n style,\n className,\n getRootRef,\n before,\n after,\n status,\n ...restProps\n}: ChipsInputProps<Option>) => {\n return (\n <FormField\n getRootRef={getRootRef}\n className={classNames(styles['ChipsInput'], className)}\n style={style}\n disabled={restProps.disabled}\n before={before}\n after={after}\n role=\"application\"\n aria-disabled={restProps.disabled}\n aria-readonly={restProps.readOnly}\n status={status}\n >\n <ChipsInputBase {...restProps} />\n </FormField>\n );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AAEA;AACA;AAAmE;AAOnE;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,oBAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAE,IAAAK,gBAAU,oBAAuBN,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACE,QAAS;IAC7B,MAAM,EAAEL,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACE,QAAS;IAClC,iBAAeF,SAAS,CAACG,QAAS;IAClC,MAAM,EAAEJ;EAAO,gBAEf,oBAAC,8BAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC;AAAC"}

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

@@ -12,12 +12,12 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _vkjs = require("@vkontakte/vkjs");
-var _Chip = require("../Chip/Chip");
-var _useChipsInput2 = require("../../hooks/useChipsInput");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useChipsInput2 = require("../../hooks/useChipsInput");
 var _useExternRef = require("../../hooks/useExternRef");
+var _adaptivity = require("../../lib/adaptivity");
+var _Chip = require("../Chip/Chip");
 var _excluded = ["disabled", "value", "label"],
   _excluded2 = ["style", "className", "getRootRef", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "inputValue", "getRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "inputAriaLabel"];
 var chipsInputDefaultProps = {
@@ -136,7 +136,7 @@ var ChipsInputBase = function ChipsInputBase(props) {
     onClick: handleClick,
     role: "presentation",
     style: style,
-    className: (0, _vkjs.classNames)("vkuiChipsInputBase", (0, _getSizeYClassName.getSizeYClassName)("vkuiChipsInputBase", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiChipsInputBase", sizeY === _adaptivity.SizeType.COMPACT && "vkuiChipsInputBase--sizeY-compact", className),
     ref: getRootRef
   }, selectedOptions.map(function (option) {
     var value = getOptionValue(option);