@vkontakte/vkui 4.34.0 → 4.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.34.0",
+  "version": "4.35.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.14.2",
+    "@vkontakte/vkui-tokens": "4.14.3",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -61,8 +61,10 @@
     "concurrently": "^4.1.2",
     "cross-env": "^7.0.2",
     "css-loader": "^6.5.1",
+    "cssnano": "^5.1.12",
     "eslint": "7.32.0",
-    "eslint-config-prettier": "7.2.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest-playwright": "^0.2.1",
     "eslint-plugin-prettier": "^3.4.1",
@@ -82,7 +84,6 @@
     "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-csso": "^6.0.0",
     "postcss-custom-properties": "^12.1.7",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
@@ -230,7 +231,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
-    "@vkontakte/vkjs": "^0.22.2",
+    "@vkontakte/vkjs": "^0.23.0",
     "dayjs": "^1.11.0",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"

package/src/components/AppRoot/AppRoot.tsx

@@ -75,14 +75,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     const insets = useInsets();
     const { appearance } = React.useContext(ConfigProviderContext);
 
-    const initialized = React.useRef(false);
-    if (!initialized.current) {
-      if (document && mode === "full") {
-        document.documentElement.classList.add("vkui");
-      }
-      classScopingMode.noConflict = noLegacyClasses;
-      initialized.current = true;
-    }
+    classScopingMode.noConflict = noLegacyClasses;
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
@@ -131,12 +124,21 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
       return () => {
         parent?.classList.remove(...classes);
-        if (mode === "full") {
-          document?.documentElement.classList.remove("vkui");
-        }
       };
     }, []);
 
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "full") {
+        document!.documentElement.classList.add("vkui");
+
+        return () => {
+          document!.documentElement.classList.remove("vkui");
+        };
+      }
+
+      return undefined;
+    }, [document, mode]);
+
     // setup insets
     useIsomorphicLayoutEffect(() => {
       if (mode === "partial" || !rootRef.current?.parentElement) {
@@ -240,3 +242,5 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     hasMouse: true,
   }
 );
+
+AppRoot.displayName = "AppRoot";

package/src/components/Badge/Badge.css

@@ -17,8 +17,3 @@
     var(--vkui--color_icon_negative)
   );
 }
-
-.TabsItem__after .Badge {
-  transform: translateY(-2px);
-  margin-left: 6px;
-}

package/src/components/Button/Button.css

@@ -564,10 +564,6 @@
   margin-left: 8px;
 }
 
-.Button--sz-l .Button__in {
-  justify-content: center;
-}
-
 /**
  * sizeY COMPACT
  */

package/src/components/Button/Button.tsx

@@ -171,6 +171,8 @@ const ButtonComponent = ({
 
   return (
     <Tappable
+      hoverMode={hasNewTokens ? "Button--hover" : "background"}
+      activeMode={hasNewTokens ? "Button--active" : "opacity"}
       {...restProps}
       Component={restProps.href ? "a" : Component}
       onClick={loading ? undefined : onClick}
@@ -189,8 +191,6 @@ const ButtonComponent = ({
         loading && "Button--loading"
       )}
       getRootRef={getRootRef}
-      hoverMode={hasNewTokens ? "Button--hover" : "background"}
-      activeMode={hasNewTokens ? "Button--active" : "opacity"}
     >
       {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
       <span vkuiClass="Button__in">
@@ -226,3 +226,5 @@ const ButtonComponent = ({
 export const Button = withAdaptivity(ButtonComponent, {
   sizeY: true,
 });
+
+Button.displayName = "Button";

package/src/components/Button/Readme.md

@@ -7,6 +7,7 @@ const containerStyles = {
 };
 
 const Example = () => {
+  const [align, setAlign] = useState("center");
   const [appearance, setAppearance] = useState("accent");
   const [sizeY, setSizeY] = useState("compact");
   const [stretched, setStretched] = useState(false);
@@ -48,65 +49,24 @@ const Example = () => {
             ...containerStyles,
           }}
         >
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="secondary"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="tertiary"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="outline"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
+          {["primary", "secondary", "tertiary", "outline"].map((mode) => (
+            <Div>
+              <Button
+                align={align}
+                href={buttonLink}
+                before={buttonBefore}
+                after={buttonAfter}
+                appearance={appearance}
+                stretched={stretched}
+                mode={mode}
+                disabled={disabled}
+                size={size}
+                loading={loading}
+              >
+                {buttonText}
+              </Button>
+            </Div>
+          ))}
         </div>
       </AdaptivityProvider>
       <div style={{ minWidth: 200 }}>
@@ -134,6 +94,17 @@ const Example = () => {
             ]}
           />
         </FormItem>
+        <FormItem top="align">
+          <Select
+            value={align}
+            onChange={(e) => setAlign(e.target.value)}
+            options={[
+              { label: "left", value: "left" },
+              { label: "center", value: "center" },
+              { label: "right", value: "right" },
+            ]}
+          />
+        </FormItem>
         <FormItem top="sizeY">
           <Select
             value={sizeY}

package/src/components/CardScroll/CardScroll.tsx

@@ -43,7 +43,7 @@ export const CardScroll = ({
     }
     const containerWidth = refContainer.current.offsetWidth;
     const slideIndex = (
-      Array.from(refContainer.current.children) as HTMLElement[]
+      [...refContainer.current.children] as HTMLElement[]
     ).findIndex(
       (el: HTMLElement) =>
         el.offsetLeft +

package/src/components/Cell/Cell.css

@@ -10,9 +10,10 @@
 .Cell--dragging {
   background-color: var(
     --background_content,
-    var(--vkui--color_background_content)
+    var(--vkui--color_background_modal)
   );
-  box-shadow: var(--vkui--elevation2);
+  box-shadow: var(--vkui--elevation3);
+  opacity: 0.8;
   z-index: 3;
 }
 

package/src/components/ChipsInput/ChipsInput.css

@@ -57,6 +57,8 @@
 
 .ChipsInput__el::placeholder {
   color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+  /* Для Firefox */
+  opacity: 1;
 }
 
 .ChipsInput__el:disabled::placeholder {

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -350,6 +350,11 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     setFocusedOptionIndex(null);
   }, [setFocusedOptionIndex]);
 
+  const observableRefs = React.useMemo(
+    () => [scrollBoxRef, rootRef],
+    [rootRef, scrollBoxRef]
+  );
+
   return (
     <div
       vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
@@ -384,6 +389,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
           targetRef={rootRef}
           placement={popupDirection}
           scrollBoxRef={scrollBoxRef}
+          observableRefs={observableRefs}
           onPlacementChange={onPlacementChange}
           onMouseLeave={onDropdownMouseLeave}
           fetching={fetching}
@@ -456,3 +462,5 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
 export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
   sizeY: true,
 });
+
+ChipsSelect.displayName = "ChipsSelect";

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -46,3 +46,5 @@ export const ConfigProviderContext =
     // appearance is auto-detected by default
     // appearance: Appearance.LIGHT,
   });
+
+export const useConfigProvider = () => React.useContext(ConfigProviderContext);

package/src/components/Counter/Counter.css

@@ -165,3 +165,33 @@
     var(--vkui--color_background_positive)
   );
 }
+
+/**
+ * CMP:
+ * TabsItem
+ */
+/* TODO v5.0.0 Удалить. Относится к <Tabs mode="segmented" />. По дизайну надо использовать <Counter mode="prominent" />  */
+/* [Начало] */
+.TabsItem .Counter--secondary {
+  background-color: var(--panel_tab_inactive_text);
+  color: var(--white);
+}
+
+.TabsItem--selected .Counter--secondary {
+  background-color: var(--panel_tab_active_text);
+  color: var(--panel_tab_active_background);
+}
+/* [Конец] */
+
+/* TODO v5.0.0 Удалить mode="segmented" */
+/* [Начало] */
+.TabsItem--ios.TabsItem--segmented .Counter--secondary {
+  background-color: var(--segmented_control_tint);
+  color: var(--background_content);
+}
+
+.TabsItem--ios.TabsItem--segmented.TabsItem--selected .Counter--secondary {
+  background-color: var(--background_content);
+  color: var(--segmented_control_tint);
+}
+/* [Конец] */

package/src/components/CustomScrollView/CustomScrollView.css

@@ -12,9 +12,14 @@
   overflow-y: scroll;
   overflow-x: hidden;
   padding-right: 100px;
-  scrollbar-width: none;
   position: relative;
   z-index: 0;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
 }
 
 .CustomScrollView__box::-webkit-scrollbar {
@@ -51,19 +56,19 @@
 
 .CustomScrollView__trackerY::before {
   content: "";
-  opacity: 0.28;
+  opacity: 0.48;
   display: block;
   width: 100%;
   height: 100%;
-  background: var(--music_playback_icon);
+  background-color: var(--icon_medium, var(--vkui--color_icon_medium));
   border-radius: 12px;
   transition: transform 200ms, opacity 200ms;
 }
 
 .CustomScrollView__trackerY:hover::before,
 .CustomScrollView__trackerY:active::before {
-  opacity: 0.56;
-  transform: scaleX(1.34);
+  opacity: 0.8;
+  transform: scaleX(1.3333);
 }
 
 /**