npm - @vkontakte/vkui - Versions diffs - 4.37.0 → 5.0.0 - Mend

@vkontakte/vkui 4.37.0 → 5.0.0

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

Files changed (3227) hide show

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

@@ -1,32 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "size", "spaced", "sizeX"];
+var _excluded = ["children", "size", "spaced"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./CardGrid.css";
-var CardGridComponent = function CardGridComponent(_ref) {
+/**
+ * @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,
-      sizeX = _ref.sizeX,
       restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX;
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("CardGrid", spaced && "CardGrid--spaced", "CardGrid--".concat(size), "CardGrid--sizeX-".concat(sizeX) // TODO: v5 новая адаптивность
-    )
+    vkuiClass: classNames("CardGrid", spaced && "CardGrid--spaced", "CardGrid--size-".concat(size), getSizeXClassName("CardGrid", sizeX))
   }), children);
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/CardGrid
- */
-export var CardGrid = withAdaptivity(CardGridComponent, {
-  sizeX: true
-});
-CardGrid.displayName = "CardGrid"; // TODO: v5 remove
 //# sourceMappingURL=CardGrid.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardGrid.js","names":["classNames","~~withAdaptivity~~","~~CardGridComponent~~","children","size","spaced","~~sizeX","~~restProps","~~CardGrid~~"~~,"displayName"~~],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ~~withAdaptivity,~~ ~~AdaptivityProps~~ } from \"../../~~hoc~~/~~withAdaptivity~~\";\nimport \"./CardGrid.css\";\n\nexport interface CardGridProps\n extends React.HTMLAttributes<HTMLDivElement~~>,\n AdaptivityProps~~ {\n size: \"s\" \| \"m\" \| \"l\";\n /*\n Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n /\n spaced?: boolean;\n}\n\~~nconst~~ ~~CardGridComponent~~ = ({\n children,\n size = \"s\",\n spaced = false,\n ~~sizeX,\n~~ ...restProps\n}: CardGridProps) => {\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"CardGrid\",\n spaced && \"CardGrid--spaced\",\n `CardGrid~~--$~~{size}`,\n `CardGrid--sizeX~~-${sizeX}` // TODO: v5 новая адаптивность\~~n )}\n >\n {children}\n </div>\n );\n};\n~~\n/\n @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = withAdaptivity(CardGridComponent, { sizeX: true });\n\nCardGrid.displayName = \~~"~~CardGrid\"; // TODO: v5 remove\n"~~],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,~~cAAT~~;AACA;;~~AAYA~~,IAAMC,~~iBAAiB~~,GAAG,~~SAApBA~~,~~iBAAoB~~,~~OAML~~;EAAA,~~IALnBC~~,~~QAKmB~~,~~QALnBA~~,~~QAKmB~~;EAAA,~~qBAJnBC~~,~~IAImB~~;EAAA,~~IAJnBA~~,~~IAImB~~,~~0BAJZ~~,~~GAIY~~;EAAA,~~uBAHnBC~~,~~MAGmB~~;EAAA,~~IAHnBA~~,~~MAGmB~~,~~4BAHV~~,~~KAGU~~;EAAA,~~IAFnBC~~,~~KAEmB~~,~~QAFnBA~~,~~KAEmB~~;EAAA,~~IADhBC~~,~~SACgB~~;;~~EACnB~~,OACE,~~wCACMA~~,SADN;IAEE,SAAS,EAAEP,UAAU,CACnB,UADmB,~~EAEnBK~~,MAAM,IAAI,kBAFS,~~sBAGND~~,~~IAHM~~,~~6BAIAE~~,~~KAJA~~,~~EAIQ~~;~~IAJR;~~EAFvB,~~IASGH~~,QATH,CADF;AAaD,~~CApBD;AAsBA;AACA;AACA;;;AACA,OAAO,IAAMK,QAAQ,GAAGP,cAAc,CAACC,iBAAD,EAAoB;EAAEI,KAAK,EAAE;AAAT,CAApB,CAA/B;AAEPE,QAAQ,CAACC,WAAT,GAAuB,UAAvB,C,CAAmC~~"}
1	+ {"version":3,"file":"CardGrid.js","names":["classNames","getSizeXClassName","useAdaptivity","CardGrid","children","size","spaced","restProps","sizeX"],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./CardGrid.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 ...restProps\n}: CardGridProps) => {\n const { sizeX } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"CardGrid\",\n spaced && \"CardGrid--spaced\",\n `CardGrid--size-${size}`,\n getSizeXClassName(\"CardGrid\", sizeX)\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,iBAAT;AACA,SAASC,aAAT;AACA;;AAUA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKH;EAAA,IAJnBC,QAImB,QAJnBA,QAImB;EAAA,qBAHnBC,IAGmB;EAAA,IAHnBA,IAGmB,0BAHZ,GAGY;EAAA,uBAFnBC,MAEmB;EAAA,IAFnBA,MAEmB,4BAFV,KAEU;EAAA,IADhBC,SACgB;;EACnB,qBAAkBL,aAAa,EAA/B;EAAA,IAAQM,KAAR,kBAAQA,KAAR;;EAEA,OACE,wCACMD,SADN;IAEE,SAAS,EAAEP,UAAU,CACnB,UADmB,EAEnBM,MAAM,IAAI,kBAFS,2BAGDD,IAHC,GAInBJ,iBAAiB,CAAC,UAAD,EAAaO,KAAb,CAJE;EAFvB,IASGJ,QATH,CADF;AAaD,CArBM"}

package/dist/cssm/components/CardScroll/CardScroll.css CHANGED Viewed

	@@ -1 +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~~,16px~~)}.vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll{margin-left:-16px;margin-right:-16px}.vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap{width:16px}.vkuiGroup--card .vkuiCardScroll--withSpaces{margin-left:-8px;margin-right:-8px}.vkuiGroup--card .vkuiCardScroll--withSpaces:first-child{padding-top:~~8px;padding-top:~~var(--vkui--size_cardgrid_padding_vertical--regular~~,8px~~)}.vkuiGroup--card .vkuiCardScroll--withSpaces:last-child{padding-bottom:8px;padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular~~,8px~~)}
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: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:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiGroup--mode-card .vkuiCardScroll--withSpaces:last-child{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:var(--vkui--size_cardgrid_padding_vertical--regular)}.vkuiGroup--mode-none .vkuiCardScroll--withSpaces:last-child{padding-bottom:var(--vkui--size_cardgrid_padding_vertical--regular)}}

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

@@ -5,9 +5,8 @@ var _excluded = ["children", "size", "showArrows", "withSpaces"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
@@ -25,8 +24,6 @@ export var CardScroll = function CardScroll(_ref) {
       withSpaces = _ref$withSpaces === void 0 ? true : _ref$withSpaces,
       restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
       sizeX = _useAdaptivity.sizeX;
@@ -83,7 +80,7 @@ export var CardScroll = function CardScroll(_ref) {
   }
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames(getClassName("CardScroll", platform), "CardScroll--sizeX-".concat(sizeX), "CardScroll--".concat(size), withSpaces && "CardScroll--withSpaces")
+    vkuiClass: classNames("CardScroll", getSizeXClassName("CardScroll", sizeX), "CardScroll--size-".concat(size), withSpaces && "CardScroll--withSpaces")
   }), createScopedElement(HorizontalScroll, {
     getScrollToLeft: getScrollToLeft,
     getScrollToRight: getScrollToRight,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardScroll.js","names":["React","classNames","~~getClassName~~","useAdaptivity","~~usePlatform","~~HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","restProps","~~platform","~~sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ~~getClassName~~ } from \"../../helpers/~~getClassName~~\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { ~~usePlatform } from~~ \~~"../../hooks/usePlatform\";\nimport {\~~n HorizontalScroll,\n HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.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 ...restProps\n}: CardScrollProps) => {\n const ~~platform = usePlatform();\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 = (\n [...refContainer.current.children] as HTMLElement[]\n ).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 -\n (containerWidth - slide.offsetWidth) +\n 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) =>\n 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 vkuiClass={classNames(\n ~~getClassName~~(\"CardScroll\", ~~platform~~),\n `CardScroll--~~sizeX~~-${~~sizeX}`,\n `CardScroll--${~~size}`,\n withSpaces && \"CardScroll--withSpaces\"\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,~~YAAT~~;AACA,SAASC,aAAT;AACA,~~SAASC,WAAT;AACA,~~SACEC,gBADF;AAIA,SAASC,MAAT;AACA;;AAWA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAMH;EAAA,IALrBC,QAKqB,QALrBA,QAKqB;EAAA,qBAJrBC,IAIqB;EAAA,IAJrBA,IAIqB,0BAJd,GAIc;EAAA,2BAHrBC,UAGqB;EAAA,IAHrBA,UAGqB,gCAHR,IAGQ;EAAA,2BAFrBC,UAEqB;EAAA,IAFrBA,UAEqB,gCAFR,IAEQ;EAAA,IADlBC,SACkB;;EACrB,~~IAAMC~~,~~QAAQ,GAAGT,WAAW,EAA5B;;EACA,qBAAkBD,~~aAAa,EAA/B;EAAA,~~IAAQW~~,KAAR,kBAAQA,KAAR;;EAEA,IAAMC,YAAY,~~GAAGf~~,KAAK,~~CAACgB~~,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,MAAM,~~GAAGjB~~,KAAK,~~CAACgB~~,MAAN,CAA6B,IAA7B,CAAf;;EAEA,~~cAAmBV~~,MAAM,EAAzB;EAAA,~~IAAQY~~,MAAR,WAAQA,MAAR;;EAEA,SAASC,eAAT,CAAyBC,MAAzB,EAAiD;IAC/C,IAAI,CAACL,YAAY,CAACM,OAAd,IAAyB,CAACJ,MAAM,CAACI,OAArC,EAA8C;MAC5C,OAAOD,MAAP;IACD;;IACD,IAAME,cAAc,GAAGP,YAAY,CAACM,OAAb,CAAqBE,WAA5C;;IACA,IAAMC,UAAU,GAAG,mBACbT,YAAY,CAACM,OAAb,~~CAAqBb~~,QADR,~~EAEjBiB~~,SAFiB,CAGjB,UAACC,EAAD;MAAA,OACEA,EAAE,CAACC,UAAH,GACED,EAAE,CAACH,WADL,GAEEK,QAAQ,CAACV,MAAM,CAAEW,gBAAR,CAAyBH,EAAzB,EAA6BI,WAA9B,CAFV,GAGEV,MAHF,IAIA,CALF;IAAA,CAHiB,CAAnB;;IAWA,IAAII,UAAU,KAAK,CAAC,CAApB,EAAuB;MACrB,OAAOJ,MAAP;IACD;;IAED,IAAII,UAAU,KAAK,CAAnB,EAAsB;MACpB,OAAO,CAAP;IACD;;IAED,IAAMO,KAAK,GAAGhB,YAAY,CAACM,OAAb,~~CAAqBb~~,QAArB,~~CAA8BgB~~,UAA9B,CAAd;IAEA,IAAMQ,QAAQ,GACZD,KAAK,CAACJ,UAAN,IACCL,cAAc,GAAGS,KAAK,CAACR,WADxB,IAEAN,MAAM,CAACI,OAAP,CAAeE,WAHjB;;IAKA,IAAIS,QAAQ,IAAI,IAAIf,MAAM,CAACI,OAAP,CAAeE,WAAnC,EAAgD;MAC9C,OAAO,CAAP;IACD;;IAED,OAAOS,QAAP;EACD;;EAED,SAASC,gBAAT,CAA0Bb,MAA1B,EAAkD;IAChD,IAAI,CAACL,YAAY,CAACM,OAAd,IAAyB,CAACJ,MAAM,CAACI,OAArC,EAA8C;MAC5C,OAAOD,MAAP;IACD;;IAED,IAAME,cAAc,GAAGP,YAAY,CAACM,OAAb,CAAqBE,WAA5C;IACA,IAAMQ,KAAK,GAAGG,KAAK,CAACC,SAAN,CAAgBC,IAAhB,CAAqBC,IAArB,CACZtB,YAAY,CAACM,OAAb,~~CAAqBb~~,QADT,EAEZ,~~UAACkB~~,EAAD;MAAA,OACEA,EAAE,CAACC,UAAH,GAAgBD,EAAE,CAACH,WAAnB,GAAiCH,MAAjC,GAA0CE,cAD5C;IAAA,CAFY,CAAd;;IAMA,IAAI,CAACS,KAAL,EAAY;MACV,OAAOX,MAAP;IACD;;IAED,OAAOW,KAAK,CAACJ,UAAN,GAAmBV,MAAM,CAACI,OAAP,CAAeE,WAAzC;EACD;;EAED,OACE,~~wCACMX~~,SADN;IAEE,SAAS,~~EAAEX~~,UAAU,~~CACnBC~~,~~YAAY~~,CAAC,YAAD,~~EAAeW~~,~~QAAf~~,~~CADO~~,~~8BAEEC~~,~~KAFF~~,~~yBAGJL,IAHI,~~GAInBE,UAAU,IAAI,wBAJK;EAFvB,IASE,oBAAC,gBAAD;IACE,eAAe,~~EAAEQ~~,eADnB;IAEE,gBAAgB,EAAEc,gBAFpB;IAGE,UAAU,~~EAAEvB~~;EAHd,GAKE;IAAK,SAAS,EAAC,gBAAf;IAAgC,GAAG,~~EAAEK~~;EAArC,GACE;IAAM,SAAS,EAAC,iBAAhB;IAAkC,GAAG,EAAEE;EAAvC,EADF,~~EAEGT~~,QAFH,EAGE;IAAM,SAAS,EAAC;EAAhB,EAHF,CALF,CATF,CADF;AAuBD,~~CA/FM~~"}
1	+ {"version":3,"file":"CardScroll.js","names":["React","classNames","getSizeXClassName","useAdaptivity","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","restProps","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n HorizontalScroll,\n HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.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 ...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 = (\n [...refContainer.current.children] as HTMLElement[]\n ).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 -\n (containerWidth - slide.offsetWidth) +\n 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) =>\n 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 vkuiClass={classNames(\n \"CardScroll\",\n getSizeXClassName(\"CardScroll\", sizeX),\n `CardScroll--size-${size}`,\n withSpaces && \"CardScroll--withSpaces\"\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/cssm/components/Cell/Cell.css CHANGED Viewed

@@ -1,3 +1 @@
-.vkuiCell{position:relative}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.vkuiCell--dragging{background-color:#fff;background-color:var(
-    --background_content,var(--vkui--color_background_modal)
-  );box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));opacity:.8;z-index:3}.vkuiCell--selectable.vkuiCell--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__dragger{z-index:2}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular,16px))}
+.vkuiCell{position:relative}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:transform .3s ease}.vkuiCell--dragging{background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3);opacity:.8;z-index:3}.vkuiCell--selectable.vkuiCell--disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__dragger{z-index:2}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}

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

@@ -9,20 +9,12 @@ export interface CellProps extends Omit<SimpleCellProps, "getRootRef">, HasPlatf
      * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
      */
     draggable?: boolean;
-    /**
-     * @deprecated Будет удалено в 5.0.0. Используйте mode="removable"
-     */
-    removable?: boolean;
     /**
      * Имя для input в режиме selectable
      */
     name?: string;
     /**
-     * @deprecated Будет удалено в 5.0.0. Используйте mode="selectable"
-     */
-    selectable?: boolean;
-    /**
-     * В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения
+     * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
      */
     checked?: boolean;
     /**
@@ -47,4 +39,4 @@ export interface CellProps extends Omit<SimpleCellProps, "getRootRef">, HasPlatf
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
-export declare const Cell: ({ mode: propsMode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, removable: deprecatedRemovable, draggable, selectable: deprecatedSelectable, Component, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps) => JSX.Element;
+export declare const Cell: ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps) => JSX.Element;

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

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
+var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "draggable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
     _excluded2 = ["dragging"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { noop } from "../../lib/utils";
-import { warnOnce } from "../../lib/warnOnce";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { SimpleCell } from "../SimpleCell/SimpleCell";
 import { Removable } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -17,13 +16,12 @@ import { ListContext } from "../List/ListContext";
 import { CellDragger } from "./CellDragger/CellDragger";
 import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
 import "./Cell.css";
-var warn = warnOnce("Cell");
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
 export var Cell = function Cell(_ref) {
-  var propsMode = _ref.mode,
+  var mode = _ref.mode,
       _ref$onRemove = _ref.onRemove,
       _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
       _ref$removePlaceholde = _ref.removePlaceholder,
@@ -32,9 +30,7 @@ export var Cell = function Cell(_ref) {
       before = _ref.before,
       after = _ref.after,
       disabled = _ref.disabled,
-      deprecatedRemovable = _ref.removable,
       draggable = _ref.draggable,
-      deprecatedSelectable = _ref.selectable,
       Component = _ref.Component,
       onChange = _ref.onChange,
       name = _ref.name,
@@ -48,19 +44,6 @@ export var Cell = function Cell(_ref) {
       style = _ref.style,
       restProps = _objectWithoutProperties(_ref, _excluded);
-  // TODO: удалить перед 5.0.0
-  var mode = propsMode;
-  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
-    mode = deprecatedSelectable ? "selectable" : "removable";
-    if (process.env.NODE_ENV === "development") {
-      deprecatedSelectable && warn('Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode="selectable".');
-      deprecatedRemovable && warn('Свойство removable устарело и будет удалено в 5.0.0. Используйте mode="removable".');
-    }
-  } // /end TODO
   var selectable = mode === "selectable";
   var removable = mode === "removable";
   var platform = usePlatform();
@@ -113,7 +96,7 @@ export var Cell = function Cell(_ref) {
   var simpleCellDisabled = draggable && !selectable || removable || disabled;
   var hasActive = !simpleCellDisabled && !dragging;
-  var cellClasses = classNames("Cell", platform === IOS && "Cell--ios", dragging && "Cell--dragging", removable && "Cell--removable", selectable && "Cell--selectable", disabled && "Cell--disabled");
+  var cellClasses = classNames("Cell", platform === Platform.IOS && "Cell--ios", dragging && "Cell--dragging", removable && "Cell--removable", selectable && "Cell--selectable", disabled && "Cell--disabled");
   var simpleCell = createScopedElement(SimpleCell, _extends({
     hasActive: hasActive,
     hasHover: hasActive
@@ -121,8 +104,8 @@ export var Cell = function Cell(_ref) {
     vkuiClass: "Cell__content",
     disabled: simpleCellDisabled,
     Component: selectable ? "label" : Component,
-    before: createScopedElement(React.Fragment, null, draggable && platform !== IOS && dragger, selectable && checkbox, before),
-    after: createScopedElement(React.Fragment, null, draggable && platform === IOS && dragger, after)
+    before: createScopedElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
+    after: createScopedElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
   }));
   if (removable) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Cell.js","names":["React","classNames","noop","warnOnce","IOS","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","warn","Cell","propsMode","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","deprecatedRemovable","removable","draggable","deprecatedSelectable","selectable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","process","env","NODE_ENV","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { IOS } from \"../../lib/platform\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasPlatform, 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 \"./Cell.css\";\n\nexport interface CellProps\n extends Omit<SimpleCellProps, \"getRootRef\">,\n HasPlatform,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: \"removable\" \| \"selectable\";\n /*\n В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n /\n draggable?: boolean;\n /\n @deprecated Будет удалено в 5.0.0. Используйте mode=\"removable\"\n /\n removable?: boolean;\n /\n Имя для input в режиме selectable\n /\n name?: string;\n /\n @deprecated Будет удалено в 5.0.0. Используйте mode=\"selectable\"\n /\n selectable?: boolean;\n /\n В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения\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\nconst warn = warnOnce(\"Cell\");\n\n/\n @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0\n onRemove = noop,\n removePlaceholder = \"Удалить\",\n onDragFinish,\n before,\n after,\n disabled,\n removable: deprecatedRemovable, // TODO: удалить перед 5.0.0\n draggable,\n selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0\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 // TODO: удалить перед 5.0.0\n let mode: CellProps[\"mode\"] = propsMode;\n\n if (!propsMode && (deprecatedSelectable \|\| deprecatedRemovable)) {\n mode = deprecatedSelectable ? \"selectable\" : \"removable\";\n\n if (process.env.NODE_ENV === \"development\") {\n deprecatedSelectable &&\n warn(\n 'Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode=\"selectable\".'\n );\n deprecatedRemovable &&\n warn(\n 'Свойство removable устарело и будет удалено в 5.0.0. Используйте mode=\"removable\".'\n );\n }\n }\n // /end TODO\n\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 vkuiClass=\"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 vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n }\n\n const simpleCellDisabled =\n (draggable && !selectable) \|\| removable \|\| disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n \"Cell\",\n platform === IOS && \"Cell--ios\",\n dragging && \"Cell--dragging\",\n removable && \"Cell--removable\",\n selectable && \"Cell--selectable\",\n disabled && \"Cell--disabled\"\n );\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n vkuiClass=\"Cell__content\"\n disabled={simpleCellDisabled}\n Component={selectable ? \"label\" : Component}\n before={\n <React.Fragment>\n {draggable && platform !== IOS && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {draggable && platform === IOS && dragger}\n {after}\n </React.Fragment>\n }\n />\n );\n\n if (removable) {\n return (\n <Removable\n vkuiClass={cellClasses}\n className={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\n vkuiClass={cellClasses}\n className={className}\n style={style}\n ref={rootElRef}\n >\n {simpleCell}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Cell.js","names":["React","classNames","noop","Platform","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasPlatform, 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 \"./Cell.css\";\n\nexport interface CellProps\n extends Omit<SimpleCellProps, \"getRootRef\">,\n HasPlatform,\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 vkuiClass=\"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 vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n }\n\n const simpleCellDisabled =\n (draggable && !selectable) \|\| removable \|\| disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n \"Cell\",\n platform === Platform.IOS && \"Cell--ios\",\n dragging && \"Cell--dragging\",\n removable && \"Cell--removable\",\n selectable && \"Cell--selectable\",\n disabled && \"Cell--disabled\"\n );\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n vkuiClass=\"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 vkuiClass={cellClasses}\n className={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\n vkuiClass={cellClasses}\n className={className}\n style={style}\n ref={rootElRef}\n >\n {simpleCell}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiCellCheckbox__icon{color~~:#b8c1cc;color~~:var(--~~icon_tertiary,var(--~~vkui--color_icon_tertiary))}.vkuiCellCheckbox__icon,.vkuiCellCheckbox__input{display:none}.vkuiCellCheckbox__icon--on{color~~:#2688eb;color~~:var(--~~accent,var(--~~vkui--color_icon_accent))}.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on,.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off{display:block}
1	+ .vkuiCellCheckbox__icon{color:var(--vkui--color_icon_tertiary)}.vkuiCellCheckbox__icon,.vkuiCellCheckbox__input{display:none}.vkuiCellCheckbox__icon--on{color:var(--vkui--color_icon_accent)}.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on,.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off{display:block}

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

@@ -6,7 +6,7 @@ import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckC
 import { getClassName } from "../../../helpers/getClassName";
 import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { ANDROID } from "../../../lib/platform";
+import { Platform } from "../../../lib/platform";
 import "./CellCheckbox.css";
 export var CellCheckbox = function CellCheckbox(_ref) {
   var className = _ref.className,
@@ -14,8 +14,8 @@ export var CellCheckbox = function CellCheckbox(_ref) {
       restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
-  var IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
+  var IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
+  var IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
   return createScopedElement("div", {
     vkuiClass: classNames(getClassName("CellCheckbox", platform)),
     className: className,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CellCheckbox.js","names":["Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getClassName","usePlatform","classNames","~~ANDROID~~","CellCheckbox","className","style","restProps","platform","IconOff","IconOn"],"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 { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { ~~ANDROID~~ } from \"../../../lib/platform\";\nimport { CellProps } from \"../Cell\";\nimport \"./CellCheckbox.css\";\n\nexport type CellCheckboxProps = Pick<CellProps, \"defaultChecked\" \| \"checked\"> &\n React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({\n className,\n style,\n ...restProps\n}: CellCheckboxProps) => {\n const platform = usePlatform();\n\n const IconOff =\n platform === ~~ANDROID~~ ? ~~Icon24CheckBoxOff~~ : ~~Icon24CheckCircleOff~~;\n\n const IconOn = platform === ~~ANDROID~~ ? ~~Icon24CheckBoxOn~~ : ~~Icon24CheckCircleOn~~;\n\n return (\n <div\n vkuiClass={classNames(getClassName(\"CellCheckbox\", platform))}\n className={className}\n style={style}\n >\n <input vkuiClass=\"CellCheckbox__input\" type=\"checkbox\" {...restProps} />\n <IconOff vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--off\" />\n <IconOn vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--on\" />\n </div>\n );\n};\n"],"mappings":";;;;AACA,SACEA,iBADF,EAEEC,gBAFF,EAGEC,oBAHF,EAIEC,mBAJF,QAKO,kBALP;AAMA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,~~OAAT~~;AAEA;AAKA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAIH;EAAA,IAHvBC,SAGuB,QAHvBA,SAGuB;EAAA,IAFvBC,KAEuB,QAFvBA,KAEuB;EAAA,IADpBC,SACoB;;EACvB,IAAMC,QAAQ,GAAGP,WAAW,EAA5B;EAEA,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,~~OAAb~~,~~GAAuBP~~,~~iBAAvB~~,~~GAA2CE~~,~~oBAD7C~~;~~EAGA~~,~~IAAMY~~,MAAM,~~GAAGF~~,QAAQ,KAAKL,~~OAAb~~,~~GAAuBN~~,~~gBAAvB~~,~~GAA0CE~~,~~mBAAzD~~;~~EAEA~~,OACE;IACE,SAAS,~~EAAEG~~,UAAU,CAACF,YAAY,CAAC,cAAD,EAAiBQ,QAAjB,CAAb,CADvB;IAEE,SAAS,EAAEH,SAFb;IAGE,KAAK,EAAEC;EAHT,GAKE;IAAO,SAAS,EAAC,qBAAjB;IAAuC,IAAI,EAAC;EAA5C,GAA2DC,SAA3D,EALF,EAME,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,EANF,EAOE,oBAAC,MAAD;IAAQ,SAAS,EAAC;EAAlB,EAPF,CADF;AAWD,~~CAvBM~~"}
1	+ {"version":3,"file":"CellCheckbox.js","names":["Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getClassName","usePlatform","classNames","Platform","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"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 { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { CellProps } from \"../Cell\";\nimport \"./CellCheckbox.css\";\n\nexport type CellCheckboxProps = Pick<CellProps, \"defaultChecked\" \| \"checked\"> &\n React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({\n className,\n style,\n ...restProps\n}: 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 <div\n vkuiClass={classNames(getClassName(\"CellCheckbox\", platform))}\n className={className}\n style={style}\n >\n <input vkuiClass=\"CellCheckbox__input\" type=\"checkbox\" {...restProps} />\n <IconOff vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--off\" />\n <IconOn vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--on\" />\n </div>\n );\n};\n"],"mappings":";;;;AACA,SACEA,iBADF,EAEEC,gBAFF,EAGEC,oBAHF,EAIEC,mBAJF,QAKO,kBALP;AAMA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AAEA;AAKA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAIH;EAAA,IAHvBC,SAGuB,QAHvBA,SAGuB;EAAA,IAFvBC,KAEuB,QAFvBA,KAEuB;EAAA,IADpBC,SACoB;;EACvB,IAAMC,QAAQ,GAAGP,WAAW,EAA5B;EAEA,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,QAAQ,CAACO,GAAtB,IAA6BF,QAAQ,KAAKL,QAAQ,CAACQ,KAAnD,GACIb,oBADJ,GAEIF,iBAHN;EAKA,IAAMgB,MAAM,GACVJ,QAAQ,KAAKL,QAAQ,CAACO,GAAtB,IAA6BF,QAAQ,KAAKL,QAAQ,CAACQ,KAAnD,GACIZ,mBADJ,GAEIF,gBAHN;EAKA,OACE;IACE,SAAS,EAAEK,UAAU,CAACF,YAAY,CAAC,cAAD,EAAiBQ,QAAjB,CAAb,CADvB;IAEE,SAAS,EAAEH,SAFb;IAGE,KAAK,EAAEC;EAHT,GAKE;IAAO,SAAS,EAAC,qBAAjB;IAAuC,IAAI,EAAC;EAA5C,GAA2DC,SAA3D,EALF,EAME,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,EANF,EAOE,oBAAC,MAAD;IAAQ,SAAS,EAAC;EAAlB,EAPF,CADF;AAWD,CA5BM"}

package/dist/cssm/components/Cell/CellDragger/CellDragger.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiCellDragger{color~~:#99a2ad;color~~:var(--~~icon_secondary,var(--~~vkui--color_icon_secondary));cursor:ns-resize}
1	+ .vkuiCellDragger{color:var(--vkui--color_icon_secondary);cursor:ns-resize}

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

@@ -7,7 +7,7 @@ import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
 import { getClassName } from "../../../helpers/getClassName";
 import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { IOS } from "../../../lib/platform";
+import { Platform } from "../../../lib/platform";
 import { Touch } from "../../Touch/Touch";
 import "./CellDragger.css";
 export var CellDragger = function CellDragger(_ref) {
@@ -26,6 +26,6 @@ export var CellDragger = function CellDragger(_ref) {
     onMoveY: onDragMove,
     onEnd: onDragEnd,
     onClick: onClick
-  }, restProps), platform === IOS ? createScopedElement(Icon24ReorderIos, null) : createScopedElement(Icon24Reorder, null));
+  }, restProps), platform === Platform.IOS ? createScopedElement(Icon24ReorderIos, null) : createScopedElement(Icon24Reorder, null));
 };
 //# sourceMappingURL=CellDragger.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getClassName","usePlatform","classNames","~~IOS~~","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","useCallback","e","preventDefault"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon24Reorder, Icon24ReorderIos } from \"@vkontakte/icons\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { ~~IOS~~ } from \"../../../lib/platform\";\nimport { Touch } from \"../../Touch/Touch\";\nimport { DraggableProps } from \"../useDraggable\";\nimport \"./CellDragger.css\";\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\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 vkuiClass={classNames(getClassName(\"CellDragger\", platform))}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={onClick}\n {...restProps}\n >\n {platform === IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,QAAgD,kBAAhD;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,~~GAAT~~;AACA,SAASC,KAAT;AAEA;AAIA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAKH;EAAA,IAJtBC,WAIsB,QAJtBA,WAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,SAEsB,QAFtBA,SAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EAEA,IAAMU,OAAO,GAAGd,KAAK,CAACe,WAAN,CAAkB,UAACC,CAAD,EAAyB;IACzDA,CAAC,CAACC,cAAF;EACD,CAFe,EAEb,EAFa,CAAhB;EAIA,OACE,oBAAC,KAAD;IACE,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CAAb,CADvB;IAEE,OAAO,EAAEJ,WAFX;IAGE,OAAO,EAAEC,UAHX;IAIE,KAAK,EAAEC,SAJT;IAKE,OAAO,EAAEG;EALX,GAMMF,SANN,GAQGC,QAAQ,KAAKP,~~GAAb~~,~~GAAmB~~,oBAAC,gBAAD,~~OAAnB~~,~~GAA0C~~,oBAAC,aAAD,~~OAR7C~~,CADF;AAYD,CAxBM"}
1	+ {"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getClassName","usePlatform","classNames","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon24Reorder, Icon24ReorderIos } from \"@vkontakte/icons\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { Touch } from \"../../Touch/Touch\";\nimport { DraggableProps } from \"../useDraggable\";\nimport \"./CellDragger.css\";\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\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 vkuiClass={classNames(getClassName(\"CellDragger\", platform))}\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,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,QAAgD,kBAAhD;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,KAAT;AAEA;AAIA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAKH;EAAA,IAJtBC,WAIsB,QAJtBA,WAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,SAEsB,QAFtBA,SAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EAEA,IAAMU,OAAO,GAAGd,KAAK,CAACe,WAAN,CAAkB,UAACC,CAAD,EAAyB;IACzDA,CAAC,CAACC,cAAF;EACD,CAFe,EAEb,EAFa,CAAhB;EAIA,OACE,oBAAC,KAAD;IACE,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CAAb,CADvB;IAEE,OAAO,EAAEJ,WAFX;IAGE,OAAO,EAAEC,UAHX;IAIE,KAAK,EAAEC,SAJT;IAKE,OAAO,EAAEG;EALX,GAMMF,SANN,GAQGC,QAAQ,KAAKP,QAAQ,CAACY,GAAtB,GAA4B,oBAAC,gBAAD,OAA5B,GAAmD,oBAAC,aAAD,OARtD,CADF;AAYD,CAxBM"}

package/dist/cssm/components/CellButton/CellButton.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiCellButton{background:transparent;border:none;box-sizing:border-box;cursor:pointer;margin:0;padding-bottom:0;padding-top:0;text-align:left;text-decoration:none;width:100%}.vkuiFormItem .vkuiCellButton{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular~~,16px~~));width:100%}.vkuiCellButton[disabled]{opacity:.4}.vkuiCellButton--centered{justify-content:center;text-align:center}.vkuiCellButton--centered .vkuiSimpleCell__main{flex-grow:0;max-width:none}.vkuiCellButton--centered>.vkuiIcon{padding-right:8px}.vkuiCellButton{color~~:#2688eb;color~~:var(--~~accent,var(--~~vkui--color_text_accent))}.vkuiCellButton>.vkuiIcon{color~~:#2688eb;color~~:var(--~~accent,var(--~~vkui--color_icon_accent))}.vkuiCellButton--danger{color~~:#e64646;color~~:var(--~~destructive,var(--~~vkui--color_text_negative))}.vkuiCellButton--danger>.vkuiIcon{color~~:#e64646;color~~:var(--~~destructive,var(--~~vkui--color_icon_negative))}
1	+ .vkuiCellButton{background:transparent;border:none;box-sizing:border-box;cursor:pointer;margin:0;padding-bottom:0;padding-top:0;text-align:left;text-decoration:none;width:100%}.vkuiFormItem .vkuiCellButton{box-sizing:initial;margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiCellButton[disabled]{opacity:.4}.vkuiCellButton--centered{justify-content:center;text-align:center}.vkuiCellButton--centered .vkuiSimpleCell__main{flex-grow:0;max-width:none}.vkuiCellButton--centered>.vkuiIcon{padding-right:8px}.vkuiCellButton{color:var(--vkui--color_text_accent)}.vkuiCellButton>.vkuiIcon{color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger{color:var(--vkui--color_text_negative)}.vkuiCellButton--mode-danger>.vkuiIcon{color:var(--vkui--color_icon_negative)}

package/dist/cssm/components/CellButton/CellButton.js CHANGED Viewed

@@ -19,7 +19,7 @@ export var CellButton = function CellButton(_ref) {
   return createScopedElement(SimpleCell, _extends({
     stopPropagation: true
   }, restProps, {
-    vkuiClass: classNames("CellButton", "CellButton--".concat(mode), centered && "CellButton--centered")
+    vkuiClass: classNames("CellButton", "CellButton--mode-".concat(mode), centered && "CellButton--centered")
   }));
 };
 //# sourceMappingURL=CellButton.js.map

package/dist/cssm/components/CellButton/CellButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellButton.js","names":["classNames","SimpleCell","CellButton","centered","mode","restProps"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import { classNames } from \"../../lib/classNames\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport \"./CellButton.css\";\n\nexport interface CellButtonProps extends SimpleCellProps {\n mode?: \"primary\" \| \"danger\";\n centered?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n centered = false,\n mode = \"primary\",\n ...restProps\n}: CellButtonProps) => {\n return (\n <SimpleCell\n stopPropagation={true}\n {...restProps}\n vkuiClass={classNames(\n \"CellButton\",\n `CellButton~~--$~~{mode}`,\n centered && \"CellButton--centered\"\n )}\n />\n );\n};\n"],"mappings":";;;;AAAA,SAASA,UAAT;AACA,SAASC,UAAT;AACA;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAIH;EAAA,yBAHrBC,QAGqB;EAAA,IAHrBA,QAGqB,8BAHV,KAGU;EAAA,qBAFrBC,IAEqB;EAAA,IAFrBA,IAEqB,0BAFd,SAEc;EAAA,IADlBC,SACkB;;EACrB,OACE,oBAAC,UAAD;IACE,eAAe,EAAE;EADnB,GAEMA,SAFN;IAGE,SAAS,EAAEL,UAAU,CACnB,YADmB,~~wBAEJI~~,~~IAFI~~,GAGnBD,QAAQ,IAAI,sBAHO;EAHvB,GADF;AAWD,CAhBM"}
1	+ {"version":3,"file":"CellButton.js","names":["classNames","SimpleCell","CellButton","centered","mode","restProps"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import { classNames } from \"../../lib/classNames\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport \"./CellButton.css\";\n\nexport interface CellButtonProps extends SimpleCellProps {\n mode?: \"primary\" \| \"danger\";\n centered?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n centered = false,\n mode = \"primary\",\n ...restProps\n}: CellButtonProps) => {\n return (\n <SimpleCell\n stopPropagation={true}\n {...restProps}\n vkuiClass={classNames(\n \"CellButton\",\n `CellButton--mode-${mode}`,\n centered && \"CellButton--centered\"\n )}\n />\n );\n};\n"],"mappings":";;;;AAAA,SAASA,UAAT;AACA,SAASC,UAAT;AACA;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAIH;EAAA,yBAHrBC,QAGqB;EAAA,IAHrBA,QAGqB,8BAHV,KAGU;EAAA,qBAFrBC,IAEqB;EAAA,IAFrBA,IAEqB,0BAFd,SAEc;EAAA,IADlBC,SACkB;;EACrB,OACE,oBAAC,UAAD;IACE,eAAe,EAAE;EADnB,GAEMA,SAFN;IAGE,SAAS,EAAEL,UAAU,CACnB,YADmB,6BAECI,IAFD,GAGnBD,QAAQ,IAAI,sBAHO;EAHvB,GADF;AAWD,CAhBM"}

package/dist/cssm/components/Checkbox/Checkbox.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiCheckbox{align-items:center;display:flex;justify-content:flex-start;min-height:~~44px;min-height:~~var(--vkui--size_field_height--regular~~,44px~~);min-width:~~44px;min-width:~~var(--vkui--size_field_height--regular~~,44px~~);padding:0 ~~16px;padding:0~~ var(--vkui--size_base_padding_horizontal--regular~~,16px~~)}.vkuiFormItem .vkuiCheckbox{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular~~,16px~~));width:100%}.vkuiCheckbox__icon{flex-shrink:0;margin-right:12px}.vkuiCheckbox__icon--indeterminate,.vkuiCheckbox__icon--on{color~~:#2688eb;color~~:var(--~~accent,var(--~~vkui--color_icon_accent));display:none}.vkuiCheckbox__icon--off{color~~:#b8c1cc;color~~:var(--~~icon_tertiary,var(--~~vkui--color_icon_tertiary))}.vkuiCheckbox__content{color~~:#000;color~~:var(--~~text_primary,var(--~~vkui--color_text_primary));flex-grow:1;word-break:break-word}.~~vkuiCheckbox__description~~{~~color:#818c99~~;~~color~~:var(--~~text_secondary~~,var(--vkui--~~color_text_secondary~~));display:block;margin-bottom:12px;margin-top:2px}.vkuiCheckbox__children{margin-top:12px}.vkuiCheckbox__children:last-child{margin-bottom:12px}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--on{display:flex}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:none}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:flex}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--on{display:none}.vkuiCheckbox__input[disabled]~*{opacity~~:.64;opacity~~:var(--vkui--opacity_disable_accessibility~~,.64~~)}.vkuiCheckbox--sizeY-compact{min-height:~~36px~~;min-~~height~~:var(--vkui--size_field_height--compact,~~36px~~);min-width:~~36px~~;min-width:var(--vkui--size_field_height--compact~~,36px~~)}.vkuiCheckbox--sizeY-~~compact~~ .vkuiCheckbox__children{margin-top:8px}.vkuiCheckbox--sizeY-~~compact~~ .vkuiCheckbox__children:last-child,.vkuiCheckbox--sizeY-~~compact~~ .vkuiCheckbox__description{margin-bottom:8px}.vkuiCheckbox--simple{align-items:center;border-radius:50%;display:flex;justify-content:center;padding:0}.vkuiCheckbox--simple .vkuiCheckbox__content{display:none}.vkuiCheckbox--simple .vkuiCheckbox__icon{margin:0}
1	+ .vkuiCheckbox{align-items:center;display:flex;justify-content:flex-start;min-height:var(--vkui--size_field_height--regular);min-width:var(--vkui--size_field_height--regular);padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiCheckbox{box-sizing:initial;margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiCheckbox__icon{flex-shrink:0;margin-right:12px}.vkuiCheckbox__icon--indeterminate,.vkuiCheckbox__icon--on{color:var(--vkui--color_icon_accent);display:none}.vkuiCheckbox__icon--off{color:var(--vkui--color_icon_tertiary)}.vkuiCheckbox__content{color:var(--vkui--color_text_primary);flex-grow:1;font-weight:var(--vkui--font_weight_accent3);word-break:break-word}.vkuiCheckbox--sizeY-regular:not(.vkuiCheckbox--vkcom) .vkuiCheckbox__content{font-size:var(--vkui--font_headline1--font_size--regular);line-height:var(--vkui--font_headline1--line_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiCheckbox--sizeY-none:not(.vkuiCheckbox--vkcom) .vkuiCheckbox__content{font-size:var(--vkui--font_headline1--font_size--regular);line-height:var(--vkui--font_headline1--line_height--regular)}}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__content,.vkuiCheckbox--vkcom .vkuiCheckbox__content{font-size:var(--vkui--font_text--font_size--compact);line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiCheckbox--sizeY-none .vkuiCheckbox__content{font-size:var(--vkui--font_text--font_size--compact);line-height:var(--vkui--font_text--line_height--compact)}}.vkuiCheckbox__description{color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiCheckbox__children{margin-top:12px}.vkuiCheckbox__children:last-child{margin-bottom:12px}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--on{display:flex}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:none}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:flex}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--on{display:none}.vkuiCheckbox__input[disabled]~*{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCheckbox--sizeY-compact{min-height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__children{margin-top:8px}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__children:last-child,.vkuiCheckbox--sizeY-compact .vkuiCheckbox__description{margin-bottom:8px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiCheckbox--sizeY-none{min-height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}.vkuiCheckbox--sizeY-none .vkuiCheckbox__children{margin-top:8px}.vkuiCheckbox--sizeY-none .vkuiCheckbox__children:last-child,.vkuiCheckbox--sizeY-none .vkuiCheckbox__description{margin-bottom:8px}}.vkuiCheckbox--simple{align-items:center;border-radius:50%;display:flex;justify-content:center;padding:0}.vkuiCheckbox--simple .vkuiCheckbox__content{display:none}.vkuiCheckbox--simple .vkuiCheckbox__icon{margin:0}

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

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { HasRef, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Checkbox.css";
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, AdaptivityProps {
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
     description?: React.ReactNode;
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
@@ -10,6 +9,5 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, sizeY, onChange, ...restProps }: CheckboxProps) => JSX.Element;
-declare const _default: React.FC<Pick<CheckboxProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "min" | "name" | "type" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "getRootRef" | "getRef" | "description" | "indeterminate" | "defaultIndeterminate"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
-export default _default;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, onChange, ...restProps }: CheckboxProps) => JSX.Element;
+export default Checkbox;

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

@@ -1,18 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "sizeY", "onChange"];
+var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "onChange"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import { IOS, VKCOM } from "../../lib/platform";
-import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from "@vkontakte/icons";
+import { Platform } from "../../lib/platform";
+import { Icon20CheckBoxOn, Icon24CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import { Text } from "../Typography/Text/Text";
 import { hasReactNode } from "../../lib/utils";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useExternRef } from "../../hooks/useExternRef";
+import { SizeYConditionalRender } from "../SizeYConditionalRender/SizeYConditionalRender";
 import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
 import { warnOnce } from "../../lib/warnOnce";
 import "./Checkbox.css";
@@ -30,12 +31,15 @@ export var Checkbox = function Checkbox(_ref) {
       description = _ref.description,
       indeterminate = _ref.indeterminate,
       defaultIndeterminate = _ref.defaultIndeterminate,
-      sizeY = _ref.sizeY,
       onChange = _ref.onChange,
       restProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useExternRef(getRef);
   var platform = usePlatform();
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
   React.useEffect(function () {
     var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
@@ -71,11 +75,11 @@ export var Checkbox = function Checkbox(_ref) {
   return createScopedElement(Tappable, {
     Component: "label",
-    vkuiClass: classNames("Checkbox", "Checkbox--sizeY-".concat(sizeY), !(hasReactNode(children) || hasReactNode(description)) && "Checkbox--simple"),
+    vkuiClass: classNames("Checkbox", platform === Platform.VKCOM && "Checkbox--vkcom", getSizeYClassName("Checkbox", sizeY), !(hasReactNode(children) || hasReactNode(description)) && "Checkbox--simple"),
     className: className,
     style: style,
     disabled: restProps.disabled,
-    activeEffectDelay: platform === IOS ? 100 : ACTIVE_EFFECT_DELAY,
+    activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
     getRootRef: getRootRef
   }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
     onChange: handleChange,
@@ -84,33 +88,51 @@ export var Checkbox = function Checkbox(_ref) {
     getRef: inputRef
   })), createScopedElement("div", {
     vkuiClass: "Checkbox__icon Checkbox__icon--on"
-  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOn, {
-    "aria-hidden": true
-  }) : createScopedElement(Icon24CheckBoxOn, {
+  }, platform === Platform.VKCOM ? createScopedElement(Icon20CheckBoxOn, {
     "aria-hidden": true
+  }) : createScopedElement(SizeYConditionalRender, {
+    compact: createScopedElement(Icon20CheckBoxOn, {
+      "aria-hidden": true
+    }),
+    regular: createScopedElement(Icon24CheckBoxOn, {
+      "aria-hidden": true
+    })
   })), createScopedElement("div", {
     vkuiClass: "Checkbox__icon Checkbox__icon--off"
-  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOff, {
-    "aria-hidden": true
-  }) : createScopedElement(Icon24CheckBoxOff, {
+  }, platform === Platform.VKCOM ? createScopedElement(Icon20CheckBoxOff, {
     "aria-hidden": true
+  }) : createScopedElement(SizeYConditionalRender, {
+    compact: createScopedElement(Icon20CheckBoxOff, {
+      "aria-hidden": true
+    }),
+    regular: createScopedElement(Icon24CheckBoxOff, {
+      "aria-hidden": true
+    })
   })), createScopedElement("div", {
     vkuiClass: "Checkbox__icon Checkbox__icon--indeterminate"
-  }, createScopedElement(Icon20CheckBoxIndetermanate, {
+  }, platform === Platform.VKCOM ? createScopedElement(Icon20CheckBoxIndetermanate, {
     "aria-hidden": true,
-    width: sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24,
-    height: sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24
-  })), createScopedElement(Text, {
-    vkuiClass: "Checkbox__content",
-    Component: "div"
+    width: 20,
+    height: 20
+  }) : createScopedElement(SizeYConditionalRender, {
+    compact: createScopedElement(Icon20CheckBoxIndetermanate, {
+      "aria-hidden": true,
+      width: 20,
+      height: 20
+    }),
+    regular: createScopedElement(Icon20CheckBoxIndetermanate, {
+      "aria-hidden": true,
+      width: 24,
+      height: 24
+    })
+  })), createScopedElement("div", {
+    vkuiClass: "Checkbox__content"
   }, createScopedElement("div", {
     vkuiClass: "Checkbox__children"
-  }, children), hasReactNode(description) && createScopedElement(Caption, {
+  }, children), hasReactNode(description) && createScopedElement(Footnote, {
     vkuiClass: "Checkbox__description"
   }, description)));
 }; // eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Checkbox, {
-  sizeY: true
-});
+export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map