@vkontakte/vkui 4.34.1 → 4.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.34.1",
+  "version": "4.34.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/AppRoot/AppRoot.tsx

@@ -242,3 +242,5 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     hasMouse: true,
   }
 );
+
+AppRoot.displayName = "AppRoot";

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/ChipsSelect/ChipsSelect.tsx

@@ -462,3 +462,5 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
 export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
   sizeY: true,
 });
+
+ChipsSelect.displayName = "ChipsSelect";

package/src/components/Group/Readme.md

@@ -138,7 +138,7 @@ const SharedContent = () => {
 
       <Group
         header={<Header>Адреса</Header>}
-        description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
+        description="Для использования в мини-приложениях, Delivery Club, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
       >
         <CellButton>Добавить домашний адрес</CellButton>
         <CellButton>Добавить рабочий адрес</CellButton>

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -241,3 +241,5 @@ const HorizontalScrollComponent = ({
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });
+
+HorizontalScroll.displayName = "HorizontalScroll";

package/src/components/Input/Input.tsx

@@ -52,3 +52,5 @@ const InputComponent = ({
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });
+
+Input.displayName = "Input";

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -145,3 +145,5 @@ export const ModalCardBase = withAdaptivity<
     hasMouse: true,
   }
 );
+
+ModalCardBase.displayName = "ModalCardBase";

package/src/components/NativeSelect/NativeSelect.tsx

@@ -107,3 +107,5 @@ export const NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+NativeSelect.displayName = "NativeSelect";

package/src/components/Panel/Panel.tsx

@@ -60,3 +60,5 @@ export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
     sizeX: true,
   }
 );
+
+Panel.displayName = "Panel";

package/src/components/PanelHeader/PanelHeader.tsx

@@ -171,3 +171,5 @@ export const PanelHeader = withAdaptivity(PanelHeaderComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+PanelHeader.displayName = "PanelHeader";

package/src/components/Popper/Popper.tsx

@@ -78,7 +78,7 @@ export const Popper = ({
   offsetSkidding = 0,
   forcePortal = true,
   style: compStyles,
-  customModifiers = [],
+  customModifiers,
   ...restProps
 }: PopperProps) => {
   const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
@@ -140,7 +140,9 @@ export const Popper = ({
       modifiers.push(sameWidth);
     }
 
-    modifiers.push(...customModifiers);
+    if (customModifiers) {
+      modifiers.push(...customModifiers);
+    }
     return modifiers;
   }, [
     arrow,

package/src/components/Radio/Radio.tsx

@@ -99,3 +99,5 @@ const RadioComponent = ({
 export const Radio = withAdaptivity(RadioComponent, {
   sizeY: true,
 });
+
+Radio.displayName = "Radio";

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -157,3 +157,5 @@ const UniversalSliderDumb = ({
 export const UniversalSlider = withAdaptivity(UniversalSliderDumb, {
   sizeY: true,
 });
+
+UniversalSlider.displayName = "UniversalSlider";

package/src/components/Select/Select.tsx

@@ -85,3 +85,5 @@ const SelectComponent = ({
 export const Select = withAdaptivity(SelectComponent, {
   hasMouse: true,
 });
+
+Select.displayName = "Select";

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -79,3 +79,5 @@ export const SelectMimicry = withAdaptivity(SelectMimicryComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+SelectMimicry.displayName = "SelectMimicry";

package/src/components/SimpleCell/SimpleCell.tsx

@@ -131,3 +131,5 @@ const SimpleCellComponent = ({
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
 export const SimpleCell = withAdaptivity(SimpleCellComponent, { sizeY: true });
+
+SimpleCell.displayName = "SimpleCell";

package/src/components/Switch/Switch.css

@@ -183,6 +183,10 @@
  * CMP:
  * SimpleCell
  */
-.SimpleCell .Switch {
-  margin-left: 10px;
+.SimpleCell__after > .Switch {
+  margin-left: 12px;
+}
+
+.SimpleCell > .Switch:first-child {
+  margin-right: 12px;
 }

package/src/components/Textarea/Textarea.tsx

@@ -18,9 +18,6 @@ export interface TextareaProps
   defaultValue?: string;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
 const TextareaComponent = ({
   defaultValue = "",
   grow = true,
@@ -78,5 +75,9 @@ const TextareaComponent = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
+/**
+ * @see https://vkcom.github.io/VKUI/#/Textarea
+ */
 export const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });
+
+Textarea.displayName = "Textarea";