@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/CalendarTime/CalendarTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarTime.js","names":["React","SizeType","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,EAAEC,UAAU,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,YAAY,QAAQ,8BAA8B;AAAC;AAY5D,IAAMC,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;AAEA,OAAO,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,GAAGrB,KAAK,CAACsB,WAAW,CACrC,UAACC,KAA2C;IAAA,OAC1CN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGf,QAAQ,CAACQ,KAAK,EAAEc,MAAM,CAACD,KAAK,CAACE,MAAM,CAACf,KAAK,CAAC,CAAC,CAAC;EAAA,GACzD,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EACD,IAAMgB,eAAe,GAAG1B,KAAK,CAACsB,WAAW,CACvC,UAACC,KAA2C;IAAA,OAC1CN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGd,UAAU,CAACO,KAAK,EAAEc,MAAM,CAACD,KAAK,CAACE,MAAM,CAACf,KAAK,CAAC,CAAC,CAAC;EAAA,GAC3D,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EAED,oBACE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,kBAAkB;IAAC,KAAK,EAAET,QAAQ,CAAC0B;EAAQ,gBAC1C,oBAAC,YAAY;IACX,KAAK,EAAEjB,KAAK,CAACkB,QAAQ,EAAG;IACxB,OAAO,EAAErB,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,kBAAkB;IAAC,KAAK,EAAElB,QAAQ,CAAC0B;EAAQ,gBAC1C,oBAAC,YAAY;IACX,KAAK,EAAEjB,KAAK,CAACmB,UAAU,EAAG;IAC1B,OAAO,EAAEf,OAAQ;IACjB,QAAQ,EAAEY,eAAgB;IAC1B,mBAAmB,EAAE,KAAM;IAC3B,cAAYN;EAAuB,EACnC,CACiB,CACjB,eACN;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,kBAAkB;IAAC,KAAK,EAAEnB,QAAQ,CAAC0B;EAAQ,gBAC1C,oBAAC,MAAM;IAAC,IAAI,EAAC,WAAW;IAAC,OAAO,EAAET,OAAQ;IAAC,IAAI,EAAC,GAAG;IAAC,cAAYF;EAAe,GAC5EA,cAAc,CACR,CACU,CACjB,CACF;AAEV,CAAC"}
+{"version":3,"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"],"names":["React","SizeType","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","styles","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","div","className","sizeY","COMPACT","getHours","options","forceDropdownPortal","aria-label","getMinutes","mode","onClick","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,EAAEC,UAAU,QAAQ,iBAAiB;AACtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,4BAA4B;AAW/C,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,MAAK,EACLM,gBAAiB,SAAQ,EACzBC,SAAQ,EACRC,QAAO,EACPC,sBAAuB,eAAc,EACrCC,wBAAyB,kBAAiB,EACxB,GAAK;IACvB,MAAMC,gBAAgBtB,MAAMuB,WAAW,CACrC,CAACC,QACCN,WAAWhB,SAASS,OAAOc,OAAOD,MAAME,MAAM,CAACf,KAAK,KACtD;QAACO;QAAUP;KAAM;IAEnB,MAAMgB,kBAAkB3B,MAAMuB,WAAW,CACvC,CAACC,QACCN,WAAWf,WAAWQ,OAAOc,OAAOD,MAAME,MAAM,CAACf,KAAK,KACxD;QAACO;QAAUP;KAAM;IAGnB,qBACE,oBAACiB;QAAIC,WAAWtB,MAAM,CAAC,eAAe;qBACpC,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAACzB;QACCK,OAAOA,MAAMqB,QAAQ;QACrBC,SAASzB;QACTU,UAAUI;QACVY,qBAAqB,KAAK;QAC1BC,cAAYf;wBAIlB,oBAACQ;QAAIC,WAAWtB,MAAM,CAAC,wBAAwB;OAAE,oBACjD,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAACzB;QACCK,OAAOA,MAAMyB,UAAU;QACvBH,SAASlB;QACTG,UAAUS;QACVO,qBAAqB,KAAK;QAC1BC,cAAYd;wBAIlB,oBAACO;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAAC1B;QAAOgC,MAAK;QAAYC,SAASnB;QAASoB,MAAK;QAAIJ,cAAYlB;OAC7DA;AAMb,EAAE"}

package/dist/cssm/components/Card/Card.js

@@ -1,29 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode", "children", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./Card.module.css";
+import styles from './Card.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
- */
-export var Card = function Card(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'tint' : _ref$mode,
-    children = _ref.children,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiCard", styles["Card--mode-".concat(mode)], className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCard__in"
-  }, children));
-};
-var styles = {
-  "Card--mode-shadow": "vkuiCard--mode-shadow",
-  "Card--mode-outline": "vkuiCard--mode-outline",
-  "Card--mode-tint": "vkuiCard--mode-tint"
+ */ export const Card = ({ mode ='tint' , children , getRootRef , className , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: getRootRef,
+        className: classNames(styles['Card'], mode === 'outline' && styles['Card--mode-outline'], mode === 'shadow' && styles['Card--mode-shadow'], className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Card__in']
+    }, children));
 };
+
 //# sourceMappingURL=Card.js.map

package/dist/cssm/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","classNames","Card","mode","children","getRootRef","className","restProps","styles"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(styles['Card'], styles[`Card--mode-${mode}`], className)}\n    >\n      <div className={styles['Card__in']}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAU7C;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAMA;EAAA,qBALfC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEJ,UAAU,aAAiBO,MAAM,sBAAeL,IAAI,EAAG,EAAEG,SAAS;EAAE,iBAE/E;IAAK,SAAS;EAAqB,GAAEF,QAAQ,CAAO,CAChD;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      <div className={styles['Card__in']}>{children}</div>\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,oBAAoB;AAQvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,MAAO,OAAM,EACbC,SAAQ,EACRC,WAAU,EACVC,UAAS,EACT,GAAGC,WACO,GAAK;IACf,qBACE,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKJ;QACLC,WAAWN,WACTC,MAAM,CAAC,OAAO,EACdE,SAAS,aAAaF,MAAM,CAAC,qBAAqB,EAClDE,SAAS,YAAYF,MAAM,CAAC,oBAAoB,EAChDK;qBAGF,oBAACE;QAAIF,WAAWL,MAAM,CAAC,WAAW;OAAGG;AAG3C,EAAE"}

package/dist/cssm/components/Card/Card.module.css

@@ -1,3 +1,3 @@
 .vkuiCard{background:#f5f5f5;background:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_card_border_radius--regular);position:relative}.vkuiCard__in{border-radius:inherit;position:relative}.vkuiCard--mode-shadow{box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(
     --vkui--elevation3,0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08)
-  )}.vkuiCard--mode-outline,.vkuiCard--mode-shadow{background:#fff;background:var(--vkui--color_background_modal)}.vkuiCard--mode-outline:after{border:1px solid rgba(0,0,0,.08);border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:inherit;box-sizing:border-box;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vkuiCardScroll .vkuiCard{flex-shrink:0;margin-right:8px;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardScroll .vkuiCard:last-of-type{margin-right:0}.vkuiCardScroll--size-s .vkuiCard{width:40%}.vkuiCardScroll--size-m .vkuiCard{width:62%}.vkuiCardScroll--size-l .vkuiCard{margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular);width:calc(100% - 16px * 2);width:calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard:last-of-type,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}@media (min-width:768px){.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}}
+  )}.vkuiCard--mode-outline,.vkuiCard--mode-shadow{background:#fff;background:var(--vkui--color_background_modal)}.vkuiCard--mode-outline:after{border:1px solid rgba(0,0,0,.08);border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:inherit;box-sizing:border-box;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vkuiInternalCardScroll .vkuiCard{flex-shrink:0;margin-right:8px;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiInternalCardScroll .vkuiCard:last-of-type{margin-right:0}.vkuiInternalCardScroll--size-s .vkuiCard{width:40%}.vkuiInternalCardScroll--size-m .vkuiCard{width:62%}.vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular);width:calc(100% - 16px * 2);width:calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2)}.vkuiInternalGroup--mode-card .vkuiInternalCardScroll--size-l .vkuiCard,.vkuiInternalSplitCol--spaced .vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}.vkuiInternalGroup--mode-card .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type,.vkuiInternalSplitCol--spaced .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiInternalCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}.vkuiInternalGroup--mode-none .vkuiInternalCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}}

package/dist/cssm/components/CardGrid/CardGrid.js

@@ -1,36 +1,24 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "size", "spaced", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
-import "./CardGrid.module.css";
-var sizeXClassNames = _defineProperty({
-  none: "vkuiCardGrid--sizeX-none"
-}, SizeType.COMPACT, "vkuiCardGrid--sizeX-compact");
+import styles from './CardGrid.module.css';
+const sizeXClassNames = {
+    none: styles['CardGrid--sizeX-none'],
+    [SizeType.COMPACT]: styles['CardGrid--sizeX-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
- */
-export var CardGrid = function CardGrid(_ref) {
-  var children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 's' : _ref$size,
-    _ref$spaced = _ref.spaced,
-    spaced = _ref$spaced === void 0 ? false : _ref$spaced,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
-  }), children);
-};
-var styles = {
-  "CardGrid--size-l": "vkuiCardGrid--size-l",
-  "CardGrid--size-m": "vkuiCardGrid--size-m",
-  "CardGrid--size-s": "vkuiCardGrid--size-s"
+ */ export const CardGrid = ({ children , size ='s' , spaced =false , className , ...restProps })=>{
+    const { sizeX ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['CardGrid'], spaced && styles['CardGrid--spaced'], {
+            s: styles['CardGrid--size-s'],
+            m: styles['CardGrid--size-m'],
+            l: styles['CardGrid--size-l']
+        }[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
+    }, children);
 };
+
 //# sourceMappingURL=CardGrid.js.map

package/dist/cssm/components/CardGrid/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.js","names":["React","classNames","useAdaptivity","SizeType","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAGhD,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCF,QAAQ,CAACG,OAAO,gCAClB;AAUD;AACA;AACA;AACA,OAAO,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,qBAA2BV,aAAa,EAAE;IAAA,sCAAlCW,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,wCACMD,SAAS;IACb,SAAS,EAAEX,UAAU,iBAEnBS,MAAM,0BAA8B,EACpCI,MAAM,0BAAmBL,IAAI,EAAG,EAChCI,KAAK,KAAKV,QAAQ,CAACY,OAAO,IAAIX,eAAe,CAACS,KAAK,CAAC,EACpDF,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"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        {\n          s: styles['CardGrid--size-s'],\n          m: styles['CardGrid--size-m'],\n          l: styles['CardGrid--size-l'],\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,MAAO,IAAG,EACVC,QAAS,KAAK,CAAA,EACdC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGZ;IAE3B,qBACE,oBAACa;QACE,GAAGF,SAAS;QACbD,WAAWX,WACTG,MAAM,CAAC,WAAW,EAClBO,UAAUP,MAAM,CAAC,mBAAmB,EACpC;YACEY,GAAGZ,MAAM,CAAC,mBAAmB;YAC7Ba,GAAGb,MAAM,CAAC,mBAAmB;YAC7Bc,GAAGd,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACM,KAAK,EACPI,UAAUX,SAASgB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;OAGDH;AAGP,EAAE"}

package/dist/cssm/components/CardScroll/CardScroll.js

@@ -1,83 +1,66 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "size", "showArrows", "withSpaces", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useDOM } from '../../lib/dom';
 import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
-import "./CardScroll.module.css";
+import styles from './CardScroll.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
- */
-export var CardScroll = function CardScroll(_ref) {
-  var children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 's' : _ref$size,
-    _ref$showArrows = _ref.showArrows,
-    showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
-    _ref$withSpaces = _ref.withSpaces,
-    withSpaces = _ref$withSpaces === void 0 ? true : _ref$withSpaces,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var refContainer = React.useRef(null);
-  var gapRef = React.useRef(null);
-  var _useDOM = useDOM(),
-    window = _useDOM.window;
-  function getScrollToLeft(offset) {
-    if (!refContainer.current || !gapRef.current) {
-      return offset;
+ */ export const CardScroll = ({ children , size ='s' , showArrows =true , withSpaces =true , className , ...restProps })=>{
+    const refContainer = React.useRef(null);
+    const gapRef = React.useRef(null);
+    const { window  } = useDOM();
+    function getScrollToLeft(offset) {
+        if (!refContainer.current || !gapRef.current) {
+            return offset;
+        }
+        const containerWidth = refContainer.current.offsetWidth;
+        const slideIndex = [
+            ...refContainer.current.children
+        ].findIndex((el)=>el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);
+        if (slideIndex === -1) {
+            return offset;
+        }
+        if (slideIndex === 0) {
+            return 0;
+        }
+        const slide = refContainer.current.children[slideIndex];
+        const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;
+        if (scrollTo <= 2 * gapRef.current.offsetWidth) {
+            return 0;
+        }
+        return scrollTo;
     }
-    var containerWidth = refContainer.current.offsetWidth;
-    var slideIndex = _toConsumableArray(refContainer.current.children).findIndex(function (el) {
-      return el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0;
-    });
-    if (slideIndex === -1) {
-      return offset;
+    function getScrollToRight(offset) {
+        if (!refContainer.current || !gapRef.current) {
+            return offset;
+        }
+        const containerWidth = refContainer.current.offsetWidth;
+        const slide = Array.prototype.find.call(refContainer.current.children, (el)=>el.offsetLeft + el.offsetWidth - offset > containerWidth);
+        if (!slide) {
+            return offset;
+        }
+        return slide.offsetLeft - gapRef.current.offsetWidth;
     }
-    if (slideIndex === 0) {
-      return 0;
-    }
-    var slide = refContainer.current.children[slideIndex];
-    var scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;
-    if (scrollTo <= 2 * gapRef.current.offsetWidth) {
-      return 0;
-    }
-    return scrollTo;
-  }
-  function getScrollToRight(offset) {
-    if (!refContainer.current || !gapRef.current) {
-      return offset;
-    }
-    var containerWidth = refContainer.current.offsetWidth;
-    var slide = Array.prototype.find.call(refContainer.current.children, function (el) {
-      return el.offsetLeft + el.offsetWidth - offset > containerWidth;
-    });
-    if (!slide) {
-      return offset;
-    }
-    return slide.offsetLeft - gapRef.current.offsetWidth;
-  }
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiCardScroll", styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
-  }), /*#__PURE__*/React.createElement(HorizontalScroll, {
-    getScrollToLeft: getScrollToLeft,
-    getScrollToRight: getScrollToRight,
-    showArrows: showArrows
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCardScroll__in",
-    ref: refContainer
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiCardScroll__gap",
-    ref: gapRef
-  }), children, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiCardScroll__gap"
-  }))));
-};
-var styles = {
-  "CardScroll--size-false": "vkuiCardScroll--size-false",
-  "CardScroll--size-m": "vkuiCardScroll--size-m",
-  "CardScroll--size-l": "vkuiCardScroll--size-l",
-  "CardScroll--size-s": "vkuiCardScroll--size-s"
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['CardScroll'], 'vkuiInternalCardScroll', size !== false && ({
+            s: 'vkuiInternalCardScroll--size-s',
+            m: 'vkuiInternalCardScroll--size-m',
+            l: 'vkuiInternalCardScroll--size-l'
+        })[size], withSpaces && styles['CardScroll--withSpaces'], className)
+    }, /*#__PURE__*/ React.createElement(HorizontalScroll, {
+        getScrollToLeft: getScrollToLeft,
+        getScrollToRight: getScrollToRight,
+        showArrows: showArrows
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['CardScroll__in'],
+        ref: refContainer
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles['CardScroll__gap'],
+        ref: gapRef
+    }), children, /*#__PURE__*/ React.createElement("span", {
+        className: styles['CardScroll__gap']
+    }))));
 };
+
 //# sourceMappingURL=CardScroll.js.map

package/dist/cssm/components/CardScroll/CardScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.js","names":["React","classNames","useDOM","HorizontalScroll","CardScroll","children","size","showArrows","withSpaces","className","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","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":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,gBAAgB,QAA+B,sCAAsC;AAAC;AAY/F;AACA;AACA;AACA,OAAO,IAAMC,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,IAAMC,YAAY,GAAGX,KAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EACvD,IAAMC,MAAM,GAAGb,KAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EAEjD,cAAmBV,MAAM,EAAE;IAAnBY,MAAM,WAANA,MAAM;EAEd,SAASC,eAAe,CAACC,MAAc,EAAU;IAC/C,IAAI,CAACL,YAAY,CAACM,OAAO,IAAI,CAACJ,MAAM,CAACI,OAAO,EAAE;MAC5C,OAAOD,MAAM;IACf;IACA,IAAME,cAAc,GAAGP,YAAY,CAACM,OAAO,CAACE,WAAW;IACvD,IAAMC,UAAU,GAAG,mBAAKT,YAAY,CAACM,OAAO,CAACZ,QAAQ,EAAoBgB,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,GAAGhB,YAAY,CAACM,OAAO,CAACZ,QAAQ,CAACe,UAAU,CAAgB;IAEtE,IAAMQ,QAAQ,GACZD,KAAK,CAACJ,UAAU,IAAIL,cAAc,GAAGS,KAAK,CAACR,WAAW,CAAC,GAAGN,MAAM,CAACI,OAAO,CAACE,WAAW;IAEtF,IAAIS,QAAQ,IAAI,CAAC,GAAGf,MAAM,CAACI,OAAO,CAACE,WAAW,EAAE;MAC9C,OAAO,CAAC;IACV;IAEA,OAAOS,QAAQ;EACjB;EAEA,SAASC,gBAAgB,CAACb,MAAc,EAAU;IAChD,IAAI,CAACL,YAAY,CAACM,OAAO,IAAI,CAACJ,MAAM,CAACI,OAAO,EAAE;MAC5C,OAAOD,MAAM;IACf;IAEA,IAAME,cAAc,GAAGP,YAAY,CAACM,OAAO,CAACE,WAAW;IACvD,IAAMQ,KAAK,GAAGG,KAAK,CAACC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,YAAY,CAACM,OAAO,CAACZ,QAAQ,EAC7B,UAACiB,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,GAAGV,MAAM,CAACI,OAAO,CAACE,WAAW;EACtD;EAEA,oBACE,wCACMT,SAAS;IACb,SAAS,EAAET,UAAU,mBAEnBiC,MAAM,4BAAqB5B,IAAI,EAAG,EAClCE,UAAU,gCAAoC,EAC9CC,SAAS;EACT,iBAEF,oBAAC,gBAAgB;IACf,eAAe,EAAEM,eAAgB;IACjC,gBAAgB,EAAEc,gBAAiB;IACnC,UAAU,EAAEtB;EAAW,gBAEvB;IAAK,SAAS,sBAA2B;IAAC,GAAG,EAAEI;EAAa,gBAC1D;IAAM,SAAS,uBAA4B;IAAC,GAAG,EAAEE;EAAO,EAAG,EAC1DR,QAAQ,eACT;IAAM,SAAS;EAA4B,EAAG,CAC1C,CACW,CACf;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"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        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[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"],"names":["React","classNames","useDOM","HorizontalScroll","styles","CardScroll","children","size","showArrows","withSpaces","className","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","div","s","m","l","ref","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,OAAOC,YAAY,0BAA0B;AAW7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,SAAQ,EACRC,MAAO,IAAG,EACVC,YAAa,IAAI,CAAA,EACjBC,YAAa,IAAI,CAAA,EACjBC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,eAAeZ,MAAMa,MAAM,CAAiB,IAAI;IACtD,MAAMC,SAASd,MAAMa,MAAM,CAAiB,IAAI;IAEhD,MAAM,EAAEE,OAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc,EAAU;QAC/C,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT,CAAC;QACD,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIT,aAAaM,OAAO,CAACZ,QAAQ;SAAC,CAAmBgB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASV,OAAQW,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT,CAAC;QAED,IAAII,eAAe,GAAG;YACpB,OAAO;QACT,CAAC;QAED,MAAMO,QAAQhB,aAAaM,OAAO,CAACZ,QAAQ,CAACe,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKN,OAAOI,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIf,OAAOI,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT,CAAC;QAED,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc,EAAU;QAChD,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT,CAAC;QAED,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,aAAaM,OAAO,CAACZ,QAAQ,EAC7B,CAACiB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT,CAAC;QAED,OAAOW,MAAMJ,UAAU,GAAGV,OAAOI,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,oBAACe;QACE,GAAGxB,SAAS;QACbD,WAAWT,WACTG,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,KAAK,IACZ,CAAA;YACE6B,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAAC/B,KAAK,EACTE,cAAcL,MAAM,CAAC,yBAAyB,EAC9CM;qBAGF,oBAACP;QACCa,iBAAiBA;QACjBc,kBAAkBA;QAClBtB,YAAYA;qBAEZ,oBAAC2B;QAAIzB,WAAWN,MAAM,CAAC,iBAAiB;QAAEmC,KAAK3B;qBAC7C,oBAAC4B;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;QAAEmC,KAAKzB;QAChDR,wBACD,oBAACkC;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;;AAKpD,EAAE"}

package/dist/cssm/components/CardScroll/CardScroll.module.css

@@ -1 +1 @@
-.vkuiCardScroll__in{align-items:stretch;display:flex}.vkuiCardScroll__gap{display:block;flex-shrink:0}.vkuiCardScroll+.vkuiCardScroll{margin-top:16px}.vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}.vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll{margin-left:-16px;margin-right:-16px}.vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px}.vkuiGroup--mode-card .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiGroup--mode-card .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiGroup--mode-card .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}@media (min-width:768px){.vkuiGroup--mode-none .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiGroup--mode-none .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiGroup--mode-none .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}}
+.vkuiCardScroll__in{align-items:stretch;display:flex}.vkuiCardScroll__gap{display:block;flex-shrink:0}.vkuiCardScroll+.vkuiCardScroll{margin-top:16px}.vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll{margin-left:-16px;margin-right:-16px}.vkuiInternalSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-card .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}@media (min-width:768px){.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:first-child{padding-top:8px;padding-top:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiInternalGroup--mode-none .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}}

package/dist/cssm/components/Cell/Cell.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "draggable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
-  _excluded2 = ["dragging"];
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
@@ -13,103 +9,79 @@ import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { CellCheckbox } from './CellCheckbox/CellCheckbox';
 import { CellDragger } from './CellDragger/CellDragger';
 import { useDraggable } from './useDraggable';
-import "./Cell.module.css";
+import styles from './Cell.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
- */
-export var Cell = function Cell(_ref) {
-  var mode = _ref.mode,
-    _ref$onRemove = _ref.onRemove,
-    _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
-    _ref$removePlaceholde = _ref.removePlaceholder,
-    removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
-    onDragFinish = _ref.onDragFinish,
-    before = _ref.before,
-    after = _ref.after,
-    disabled = _ref.disabled,
-    draggable = _ref.draggable,
-    Component = _ref.Component,
-    onChange = _ref.onChange,
-    name = _ref.name,
-    value = _ref.value,
-    checked = _ref.checked,
-    defaultChecked = _ref.defaultChecked,
-    getRootRef = _ref.getRootRef,
-    _ref$draggerLabel = _ref.draggerLabel,
-    draggerLabel = _ref$draggerLabel === void 0 ? 'Перенести ячейку' : _ref$draggerLabel,
-    className = _ref.className,
-    style = _ref.style,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var selectable = mode === 'selectable';
-  var removable = mode === 'removable';
-  var platform = usePlatform();
-  var rootElRef = useExternRef(getRootRef);
-  var _useDraggable = useDraggable({
-      rootElRef: rootElRef,
-      onDragFinish: onDragFinish
-    }),
-    dragging = _useDraggable.dragging,
-    draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
-  var _React$useContext = React.useContext(ListContext),
-    toggleDrag = _React$useContext.toggleDrag;
-  React.useEffect(function () {
-    if (dragging) {
-      toggleDrag(true);
-      return function () {
-        return toggleDrag(false);
-      };
+ */ export const Cell = ({ mode , onRemove =noop , removePlaceholder ='Удалить' , onDragFinish , before , after , disabled , draggable , Component , onChange , name , value , checked , defaultChecked , getRootRef , draggerLabel ='Перенести ячейку' , className , style , ...restProps })=>{
+    const selectable = mode === 'selectable';
+    const removable = mode === 'removable';
+    const platform = usePlatform();
+    const rootElRef = useExternRef(getRootRef);
+    const { dragging , ...draggableProps } = useDraggable({
+        rootElRef,
+        onDragFinish
+    });
+    const { toggleDrag  } = React.useContext(ListContext);
+    React.useEffect(()=>{
+        if (dragging) {
+            toggleDrag(true);
+            return ()=>toggleDrag(false);
+        }
+        return undefined;
+    }, [
+        dragging,
+        toggleDrag
+    ]);
+    let dragger;
+    if (draggable) {
+        dragger = /*#__PURE__*/ React.createElement(CellDragger, {
+            className: styles['Cell__dragger'],
+            "aria-label": draggerLabel,
+            ...draggableProps
+        });
     }
-    return undefined;
-  }, [dragging, toggleDrag]);
-  var dragger;
-  if (draggable) {
-    dragger = /*#__PURE__*/React.createElement(CellDragger, _extends({
-      className: "vkuiCell__dragger",
-      "aria-label": draggerLabel
-    }, draggableProps));
-  }
-  var checkbox;
-  if (selectable) {
-    var checkboxProps = {
-      name: name,
-      value: value,
-      onChange: onChange,
-      defaultChecked: defaultChecked,
-      checked: checked,
-      disabled: disabled
-    };
-    checkbox = /*#__PURE__*/React.createElement(CellCheckbox, _extends({
-      className: "vkuiCell__checkbox"
-    }, checkboxProps));
-  }
-  var simpleCellDisabled = draggable && !selectable || removable || disabled;
-  var hasActive = !simpleCellDisabled && !dragging;
-  var cellClasses = classNames("vkuiCell", platform === Platform.IOS && "vkuiCell--ios", dragging && "vkuiCell--dragging", removable && "vkuiCell--removable", selectable && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
-  var simpleCell = /*#__PURE__*/React.createElement(SimpleCell, _extends({
-    hasActive: hasActive,
-    hasHover: hasActive
-  }, restProps, {
-    className: "vkuiCell__content",
-    disabled: simpleCellDisabled,
-    Component: selectable ? 'label' : Component,
-    before: /*#__PURE__*/React.createElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
-    after: /*#__PURE__*/React.createElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
-  }));
-  if (removable) {
-    return /*#__PURE__*/React.createElement(Removable, {
-      className: classNames(cellClasses, className),
-      style: style,
-      getRootRef: rootElRef,
-      removePlaceholder: removePlaceholder,
-      onRemove: function onRemove(e) {
-        return _onRemove(e, rootElRef.current);
-      }
+    let checkbox;
+    if (selectable) {
+        const checkboxProps = {
+            name,
+            value,
+            onChange,
+            defaultChecked,
+            checked,
+            disabled
+        };
+        checkbox = /*#__PURE__*/ React.createElement(CellCheckbox, {
+            className: styles['Cell__checkbox'],
+            ...checkboxProps
+        });
+    }
+    const simpleCellDisabled = draggable && !selectable || removable || disabled;
+    const hasActive = !simpleCellDisabled && !dragging;
+    const cellClasses = classNames(styles['Cell'], platform === Platform.IOS && styles['Cell--ios'], dragging && styles['Cell--dragging'], removable && styles['Cell--removable'], selectable && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
+    const simpleCell = /*#__PURE__*/ React.createElement(SimpleCell, {
+        hasActive: hasActive,
+        hasHover: hasActive,
+        ...restProps,
+        className: styles['Cell__content'],
+        disabled: simpleCellDisabled,
+        Component: selectable ? 'label' : Component,
+        before: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
+        after: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
+    });
+    if (removable) {
+        return /*#__PURE__*/ React.createElement(Removable, {
+            className: classNames(cellClasses, className),
+            style: style,
+            getRootRef: rootElRef,
+            removePlaceholder: removePlaceholder,
+            onRemove: (e)=>onRemove(e, rootElRef.current)
+        }, simpleCell);
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(cellClasses, className),
+        style: style,
+        ref: rootElRef
     }, simpleCell);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(cellClasses, className),
-    style: style,
-    ref: rootElRef
-  }, simpleCell);
 };
+
 //# sourceMappingURL=Cell.js.map