@vkontakte/vkui 4.27.0 → 4.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.27.0",
+  "version": "4.27.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.3.0",
+    "@vkontakte/vkui-tokens": "4.3.1",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -160,7 +160,7 @@
     "babel-cjs-dev": "yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --watch",
     "tsc-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/ --watch --preserveWatchOutput",
     "tsc-cjs-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ --watch --preserveWatchOutput",
-    "build:types": "yarn tsc && yarn tsc-cjs",
+    "build:types": "yarn tsc && yarn tsc-cjs && yarn tsc-cssm",
     "build:no-types": "concurrently 'yarn:babel' 'yarn:babel-cssm' 'yarn:babel-cjs' 'yarn:postcss'",
     "build": "yarn build:types && yarn build:no-types",
     "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss-bundle' 'yarn:postcss-modules'",
@@ -169,6 +169,7 @@
     "babel-cjs": "cross-env NODE_ENV=production yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --source-maps",
     "tsc": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
     "tsc-cjs": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
+    "tsc-cssm": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cssm/ -p tsconfig.dist.json",
     "clear": "shx rm -rf dist/*",
     "test:unit": "jest --config jest.unit.config.js",
     "test:unit:ci": "yarn test:unit --ci --silent --outputFile test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='.nyc_output'",

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -26,6 +26,8 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   closing,
   popupDirection,
   onClose,
+  className,
+  style,
   ...restProps
 }) => {
   const { document } = useDOM();
@@ -82,6 +84,8 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
         "ActionSheet--desktop",
         `ActionSheet--sizeY-${sizeY}`
       )}
+      className={className}
+      style={style}
       getRef={elementRef}
       forcePortal={false}
     >

package/src/components/AppRoot/AppRoot.tsx

@@ -20,7 +20,6 @@ import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
-import { AppearanceProviderContext } from "../AppearanceProvider/AppearanceProviderContext";
 import { Insets } from "@vkontakte/vk-bridge";
 import "./AppRoot.css";
 
@@ -61,7 +60,6 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     );
     const { window, document } = useDOM();
     const insets = useInsets();
-    const appearanceContext = React.useContext(AppearanceProviderContext);
 
     const initialized = React.useRef(false);
     if (!initialized.current) {
@@ -165,10 +163,6 @@ export const AppRoot = withAdaptivity<AppRootProps>(
       [document, scroll, window]
     );
 
-    useIsomorphicLayoutEffect(() => {
-      portalRoot?.setAttribute("scheme", appearanceContext?.scheme ?? "");
-    }, [portalRoot, appearanceContext?.scheme]);
-
     const content = (
       <AppRootContext.Provider
         value={{

package/src/components/AppRoot/AppRootPortal.tsx

@@ -1,15 +1,23 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { AppRootContext } from "./AppRootContext";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import { useAppearance } from "../../hooks/useAppearance";
 
 export const AppRootPortal: React.FC<
   React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>
 > = ({ children, className, forcePortal }) => {
   const { portalRoot, mode } = React.useContext(AppRootContext);
+  const appearance = useAppearance();
 
   forcePortal = forcePortal ?? mode !== "full";
   return portalRoot && forcePortal ? (
-    createPortal(<div className={className}>{children}</div>, portalRoot)
+    createPortal(
+      <AppearanceProvider appearance={appearance}>
+        <div className={className}>{children}</div>
+      </AppearanceProvider>,
+      portalRoot
+    )
   ) : (
     <React.Fragment>{children}</React.Fragment>
   );

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -37,26 +37,19 @@ export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
   appearance = "light",
 }) => {
   const platform = usePlatform();
-
-  const appearanceContext = React.useMemo(
-    () => ({
-      scheme: getScheme({
-        platform,
-        appearance,
-      }),
-      appearance,
-    }),
-    [appearance, platform]
-  );
+  const scheme = getScheme({
+    platform,
+    appearance,
+  });
 
   return (
-    <AppearanceProviderContext.Provider value={appearanceContext}>
+    <AppearanceProviderContext.Provider value={appearance}>
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
           return React.cloneElement(child, {
             className: classNamesString(
               child.props.className,
-              `vkui${appearanceContext.scheme}`,
+              `vkui${scheme}`,
               generateVKUITokensClassName(platform, appearance)
             ),
           });

package/src/components/AppearanceProvider/AppearanceProviderContext.tsx

@@ -1,12 +1,7 @@
 import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
-import { Scheme } from "../../helpers/scheme";
+import { Appearance } from "../../helpers/scheme";
 
-export interface AppearanceProviderContextProps {
-  scheme: Scheme | "inherit" | undefined;
-  appearance: AppearanceType;
-}
-
-export const AppearanceProviderContext = React.createContext<
-  AppearanceProviderContextProps | undefined
->(undefined);
+export const AppearanceProviderContext = React.createContext<AppearanceType>(
+  Appearance.LIGHT
+);

package/src/components/CustomSelectOption/CustomSelectOption.css

@@ -8,6 +8,7 @@
   white-space: nowrap;
   user-select: none;
   cursor: pointer;
+  color: var(--text_primary);
 }
 
 .CustomSelectOption--sizeY-regular {

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import HorizontalScrollArrow from "./HorizontalScrollArrow";
 import { easeInOutSine } from "../../lib/fx";
@@ -134,8 +132,6 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
 
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
-  const platform = usePlatform();
-
   function scrollTo(getScrollPosition: (offset: number) => number) {
     const scrollElement = scrollerRef.current;
 
@@ -184,7 +180,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
+      vkuiClass={classNames("HorizontalScroll", {
         ["HorizontalScroll--withConstArrows"]: showArrows === "always",
       })}
     >

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -29,19 +29,26 @@
 }
 
 .HorizontalScrollArrow__icon {
-  background-color: var(--modal_card_background);
-  color: var(--icon_secondary);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   width: 40px;
   height: 40px;
   border-radius: 24px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 0 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(
+    --vkui--elevation3,
+    0 0 2px rgba(0, 0, 0, 0.08),
+    0 0 16px rgba(0, 0, 0, 0.12)
+  );
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .HorizontalScrollArrow--left {
-  padding-left: 16px;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
   left: 0;
 }
 
@@ -50,7 +57,7 @@
 }
 
 .HorizontalScrollArrow--right {
-  padding-right: 16px;
+  padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
   right: 0;
 }
 

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 import { Icon24Chevron } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import Tappable from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
@@ -15,15 +13,13 @@ const HorizontalScrollArrow: React.FC<HorizontalScrollArrowProps> = ({
   onClick,
   direction,
 }: HorizontalScrollArrowProps) => {
-  const platform = usePlatform();
-
   return (
     <Tappable
       Component="button"
       hasHover={false}
       hasActive={false}
       vkuiClass={classNames(
-        getClassName("HorizontalScrollArrow", platform),
+        "HorizontalScrollArrow",
         `HorizontalScrollArrow--${direction}`
       )}
       onClick={onClick}

package/src/hooks/useAppearance.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
+import { AppearanceProviderContext } from "../components/AppearanceProvider/AppearanceProviderContext";
 
-export const useAppearance = () =>
-  React.useContext(ConfigProviderContext).appearance;
+export const useAppearance = () => React.useContext(AppearanceProviderContext);

package/src/tokenized/index.ts

@@ -7,6 +7,9 @@ export type { CardProps } from "../components/Card/Card";
 export { CardScroll } from "../components/CardScroll/CardScroll";
 export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 
+export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
+
 export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
 export type {
   SegmentedControlProps,