@vkontakte/vkui 4.30.0 → 4.33.0

package/src/tokenized/index.ts

@@ -1,3 +1,12 @@
+export { Avatar } from "../components/Avatar/Avatar";
+export type { AvatarProps } from "../components/Avatar/Avatar";
+
+export { FormItem } from "../components/FormItem/FormItem";
+export type { FormItemProps } from "../components/FormItem/FormItem";
+
+export { FormLayoutGroup } from "../components/FormLayoutGroup/FormLayoutGroup";
+export type { FormLayoutGroupProps } from "../components/FormLayoutGroup/FormLayoutGroup";
+
 export { Button } from "../components/Button/Button";
 export type { ButtonProps } from "../components/Button/Button";
 
@@ -7,12 +16,36 @@ export type { CardProps } from "../components/Card/Card";
 export { CardScroll } from "../components/CardScroll/CardScroll";
 export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 
+export { GridAvatar } from "../components/GridAvatar/GridAvatar";
+export type { GridAvatarProps } from "../components/GridAvatar/GridAvatar";
+
 export { HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
 export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
 
+export { IconButton } from "../components/IconButton/IconButton";
+export type { IconButtonProps } from "../components/IconButton/IconButton";
+
+export { InitialsAvatar } from "../components/InitialsAvatar/InitialsAvatar";
+export type { InitialsAvatarProps } from "../components/InitialsAvatar/InitialsAvatar";
+
+export { InfoRow } from "../components/InfoRow/InfoRow";
+export type { InfoRowProps } from "../components/InfoRow/InfoRow";
+
 export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
 export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
 
+export { Switch } from "../components/Switch/Switch";
+export type { SwitchProps } from "../components/Switch/Switch";
+
+export { Footnote } from "../components/Typography/Footnote/Footnote";
+export type { FootnoteProps } from "../components/Typography/Footnote/Footnote";
+
+export { Radio } from "../components/Radio/Radio";
+export type { RadioProps } from "../components/Radio/Radio";
+
+export { RadioGroup } from "../components/RadioGroup/RadioGroup";
+export type { RadioGroupProps } from "../components/RadioGroup/RadioGroup";
+
 export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
 export type {
   SegmentedControlProps,
@@ -20,12 +53,21 @@ export type {
   SegmentedControlValue,
 } from "../components/SegmentedControl/SegmentedControl";
 
+export { Tappable } from "../components/Tappable/Tappable";
+export type { TappableProps } from "../components/Tappable/Tappable";
+
+export { Textarea } from "../components/Textarea/Textarea";
+export type { TextareaProps } from "../components/Textarea/Textarea";
+
 export { Title } from "../components/Typography/Title/Title";
 export type { TitleProps } from "../components/Typography/Title/Title";
 
 export { Subhead } from "../components/Typography/Subhead/Subhead";
 export type { SubheadProps } from "../components/Typography/Subhead/Subhead";
 
+export { CellButton } from "../components/CellButton/CellButton";
+export type { CellButtonProps } from "../components/CellButton/CellButton";
+
 export { Pagination } from "../components/Pagination/Pagination";
 export type { PaginationProps } from "../components/Pagination/Pagination";
 
@@ -38,18 +80,51 @@ export type { CalendarRangeProps } from "../components/CalendarRange/CalendarRan
 export { Caption } from "../components/Typography/Caption/Caption";
 export type { CaptionProps } from "../components/Typography/Caption/Caption";
 
+export { PanelSpinner } from "../components/PanelSpinner/PanelSpinner";
+export type { PanelSpinnerProps } from "../components/PanelSpinner/PanelSpinner";
+
 export { Paragraph } from "../components/Typography/Paragraph/Paragraph";
 export type { ParagraphProps } from "../components/Typography/Paragraph/Paragraph";
 
+export { UsersStack } from "../components/UsersStack/UsersStack";
+export type { UsersStackProps } from "../components/UsersStack/UsersStack";
+
+export { Text } from "../components/Typography/Text/Text";
+export type { TextProps } from "../components/Typography/Text/Text";
+
+export { PullToRefresh } from "../components/PullToRefresh/PullToRefresh";
+export type { PullToRefreshProps } from "../components/PullToRefresh/PullToRefresh";
+
+export { Slider } from "../components/Slider/Slider";
+export type { SliderProps } from "../components/Slider/Slider";
+
+export { RangeSlider } from "../components/RangeSlider/RangeSlider";
+export type { RangeSliderProps } from "../components/RangeSlider/RangeSlider";
+
 export { Input } from "../components/Input/Input";
 export type { InputProps } from "../components/Input/Input";
 
+export { File } from "../components/File/File";
+export type { FileProps } from "../components/File/File";
+
+export { FocusVisible } from "../components/FocusVisible/FocusVisible";
+export type { FocusVisibleProps } from "../components/FocusVisible/FocusVisible";
+
 export { FormField } from "../components/FormField/FormField";
 export type { FormFieldProps } from "../components/FormField/FormField";
 
 export { Select } from "../components/Select/Select";
 export type { SelectProps } from "../components/Select/Select";
 
+export { View } from "../components/View/View";
+export type { ViewProps } from "../components/View/View";
+
+export { Spinner } from "../components/Spinner/Spinner";
+export type { SpinnerProps } from "../components/Spinner/Spinner";
+
+export { ContentCard } from "../components/ContentCard/ContentCard";
+export type { ContentCardProps } from "../components/ContentCard/ContentCard";
+
 export { CustomSelect } from "../components/CustomSelect/CustomSelect";
 export type { CustomSelectProps } from "../components/CustomSelect/CustomSelect";
 
@@ -59,8 +134,59 @@ export type { CustomSelectDropdownProps } from "../components/CustomSelectDropdo
 export { CustomSelectOption } from "../components/CustomSelectOption/CustomSelectOption";
 export type { CustomSelectOptionProps } from "../components/CustomSelectOption/CustomSelectOption";
 
+export { Chip } from "../components/Chip/Chip";
+export type { ChipProps } from "../components/Chip/Chip";
+
+export { Checkbox } from "../components/Checkbox/Checkbox";
+export type { CheckboxProps } from "../components/Checkbox/Checkbox";
+
 export { ChipsInput } from "../components/ChipsInput/ChipsInput";
 export type { ChipsInputProps } from "../components/ChipsInput/ChipsInput";
 
 export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
 export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+
+export { Spacing } from "../components/Spacing/Spacing";
+export type { SpacingProps } from "../components/Spacing/Spacing";
+
+export { SplitCol } from "../components/SplitCol/SplitCol";
+export type { SplitColProps } from "../components/SplitCol/SplitCol";
+
+export { Root } from "../components/Root/Root";
+export type { RootProps } from "../components/Root/Root";
+
+export { Headline } from "../components/Typography/Headline/Headline";
+export type { HeadlineProps } from "../components/Typography/Headline/Headline";
+
+export { Div } from "../components/Div/Div";
+export type { DivProps } from "../components/Div/Div";
+
+export { Banner } from "../components/Banner/Banner";
+export type { BannerProps } from "../components/Banner/Banner";
+
+export { FixedLayout } from "../components/FixedLayout/FixedLayout";
+export type { FixedLayoutProps } from "../components/FixedLayout/FixedLayout";
+
+export { Counter } from "../components/Counter/Counter";
+export type { CounterProps } from "../components/Counter/Counter";
+
+export { Progress } from "../components/Progress/Progress";
+export type { ProgressProps } from "../components/Progress/Progress";
+
+export { Gallery } from "../components/Gallery/Gallery";
+export type { GalleryProps } from "../components/Gallery/Gallery";
+
+export { DateInput } from "../components/DateInput/DateInput";
+export type { DateInputProps } from "../components/DateInput/DateInput";
+
+export { PopoutWrapper } from "../components/PopoutWrapper/PopoutWrapper";
+export type { PopoutWrapperProps } from "../components/PopoutWrapper/PopoutWrapper";
+
+export { Badge } from "../components/Badge/Badge";
+export type { BadgeProps } from "../components/Badge/Badge";
+
+export { DateRangeInput } from "../components/DateRangeInput/DateRangeInput";
+export type { DateRangeInputProps } from "../components/DateRangeInput/DateRangeInput";
+
+export { Footer } from "../components/Footer/Footer";
+export type { FooterProps } from "../components/Footer/Footer";

package/tasks/postcss-restructure-variable.js

@@ -0,0 +1,226 @@
+const { Rule } = require("postcss");
+
+function setEquals(a, b) {
+  return a.size === b.size && [...a].every((value) => b.has(value));
+}
+class Value {
+  constructor(prop, value) {
+    this.prop = prop;
+    this.value = value;
+    this.selectors = new Set();
+  }
+  addSelector(selector) {
+    this.selectors.add(selector.toString());
+  }
+  removeSelector(selector) {
+    return this.selectors.delete(selector.toString());
+  }
+  getSelectors() {
+    return this.selectors;
+  }
+  getProp() {
+    return this.prop;
+  }
+  toString() {
+    return this.value;
+  }
+}
+
+class Prop {
+  constructor(name) {
+    this.name = name;
+    this.values = new Map();
+  }
+  addValue(value) {
+    this.values.set(value.toString(), value);
+  }
+  getValue(value) {
+    return this.values.get(value);
+  }
+  toString() {
+    return this.name;
+  }
+}
+
+class Selector {
+  constructor(name) {
+    this.name = name;
+    this.props = new Map();
+  }
+  addProp(prop, value) {
+    const oldValue = this.props.get(prop);
+    if (oldValue) {
+      oldValue.removeSelector(this);
+    }
+    this.props.set(prop, value);
+  }
+  compare(b) {
+    if (this.name > b.name) {
+      return 1;
+    }
+    if (this.name < b.name) {
+      return -1;
+    }
+    return 0;
+  }
+  toString() {
+    return this.name;
+  }
+}
+
+class Graph {
+  constructor() {
+    this.selectors = new Map();
+    this.props = new Map();
+    this.values = new Set();
+  }
+  addEdge(selector, prop, value) {
+    value.addSelector(selector);
+    prop.addValue(value);
+    selector.addProp(prop, value);
+  }
+  add(selectors, prop, value) {
+    selectors.forEach((selector) => {
+      let _selector = this.selectors.get(selector);
+      if (!_selector) {
+        _selector = new Selector(selector);
+        this.selectors.set(selector, _selector);
+      }
+      let _prop = this.props.get(prop);
+      if (!_prop) {
+        _prop = new Prop(prop);
+        this.props.set(prop, _prop);
+      }
+      let _value = _prop.getValue(value);
+      if (!_value) {
+        _value = new Value(prop, value);
+        this.values.add(_value);
+      }
+      this.addEdge(_selector, _prop, _value);
+    });
+  }
+  restructure() {
+    const rules = [];
+    this.values.forEach((value) => {
+      const selectors = value.getSelectors();
+      if (selectors.size === 0) {
+        return;
+      }
+      const some = rules.some((rule) => {
+        if (setEquals(selectors, rule.selectors)) {
+          rule.decls.set(value.getProp(), value.toString());
+          return true;
+        }
+        return false;
+      });
+      if (!some) {
+        rules.push({
+          selectors: selectors,
+          decls: new Map([[value.getProp(), value.toString()]]),
+        });
+      }
+    });
+    return rules;
+  }
+}
+
+/**
+ * @type {import('postcss').PluginCreator}
+ * @param {string[]} onlySelectors
+ */
+module.exports = (importFrom = []) => {
+  return {
+    postcssPlugin: "postcss-restructure-variable",
+    Root(root) {
+      /**
+       * @type {string[]}
+       */
+      const ignoreValue = [];
+
+      const graph = new Graph();
+
+      /**
+       *
+       * @param {import('postcss').AtRule} node
+       */
+      const atRuleFind = (node) => {
+        node.each((atRuleNode) => {
+          switch (atRuleNode.type) {
+            case "rule":
+              atRuleNode.each((decl) => {
+                if (decl.type === "decl" && decl.variable) {
+                  ignoreValue.push(decl.prop);
+                }
+              });
+              break;
+            case "atrule":
+              atRuleFind(atRuleNode);
+              break;
+          }
+        });
+      };
+
+      root.each((node) => {
+        if (
+          !node.source ||
+          (node.source !== undefined &&
+            !importFrom.includes(node.source.input.file))
+        ) {
+          return;
+        }
+
+        switch (node.type) {
+          case "rule":
+            const beforeLength = node.nodes.length;
+
+            node.each((decl) => {
+              if (decl.type === "decl" && decl.variable) {
+                if (ignoreValue.includes(decl.prop)) {
+                  return;
+                }
+                graph.add(node.selectors, decl.prop, decl.value);
+                decl.remove();
+              }
+            });
+
+            // Удаляем если селектор оказался пустой, после наших действий
+            if (node.nodes.length === 0 && node.nodes.length !== beforeLength) {
+              node.remove();
+            }
+            break;
+          case "atrule":
+            atRuleFind(node);
+            break;
+        }
+      });
+
+      const rules = graph.restructure();
+
+      let lastRule = undefined;
+      rules.forEach(({ decls, selectors }) => {
+        const rule = new Rule({
+          selectors: Array.from(selectors),
+        });
+
+        decls.forEach((value, key) => {
+          rule.append({ prop: key, value: value });
+        });
+
+        if (lastRule) {
+          root.insertAfter(lastRule, rule);
+        } else {
+          // Вставляем первым
+          if (root.first) {
+            root.insertBefore(root.first, rule);
+          } else {
+            root.append(rule);
+          }
+        }
+
+        lastRule = rule;
+      });
+    },
+  };
+};
+
+module.exports.postcss = true;

package/tasks/postcss-scope-root.js

@@ -1,7 +1,11 @@
 module.exports = ({ customPropRoot, except = [] }) => ({
   postcssPlugin: "postcss-scope-root",
   Rule: (rule) => {
-    if (rule.selector === ":root" && !except.includes(rule.source.input.file)) {
+    if (
+      rule.selector === ":root" &&
+      rule.source &&
+      !except.includes(rule.source.input.file)
+    ) {
       rule.selector = customPropRoot;
     }
   },

package/tsconfig.json

@@ -29,6 +29,7 @@
     ".github/**/*.js",
     "eslint-plugin-vkui/*.js",
     "postcss-plugin-vk-sans/*.js",
+    "postcss-custom-properties-fallback/*.js",
     "*.js"
   ],
   "files": [

package/dist/cssm/components/File/File.css

@@ -1 +0,0 @@
-.vkuiFile__input{display:none}

package/dist/cssm/components/Gallery/Gallery.css

@@ -1 +0,0 @@
-.vkuiGallery{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.vkuiGallery__viewport{margin:0;height:100%;position:relative}.vkuiGallery--center .vkuiGallery__viewport{margin:0 auto}.vkuiGallery__layer{display:flex;width:100%;height:100%;min-height:100px;cursor:grab;align-items:stretch}.vkuiGallery__slide{width:100%;flex:0 0 auto;max-width:100%;overflow:hidden}.vkuiGallery--custom-width .vkuiGallery__slide{width:auto}.vkuiGallery__slide>*{width:100%;min-height:100%}.vkuiGallery__bullets{position:absolute;bottom:10px;height:6px;width:100%;left:0;display:flex;align-items:center;justify-content:center}.vkuiGallery__bullets--dark .vkuiGallery__bullet{background-color:#000}.vkuiGallery__bullets--light .vkuiGallery__bullet{background-color:#fff}.vkuiGallery__bullet{height:6px;width:6px;border-radius:50%;margin:0 3px;opacity:.56}.vkuiGallery__bullet--active{opacity:1}

package/dist/cssm/components/SelectMimicry/SelectMimicry.css

@@ -1 +0,0 @@
-.vkuiSelect--mimicry-plain{padding:8px 8px 8px 0;text-transform:capitalize;border-radius:8px}.vkuiSelect--mimicry-plain .vkuiFormField__border{background-color:transparent;border:0}

package/src/components/AppRoot/ScrollContext.ts

@@ -1,132 +0,0 @@
-import * as React from "react";
-import { noop } from "../../lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { clamp } from "../../helpers/math";
-
-const clearDisableScrollStyle = (node: HTMLElement) => {
-  Object.assign(node.style, {
-    position: "",
-    top: "",
-    left: "",
-    right: "",
-    overflowY: "",
-    overflowX: "",
-  });
-};
-
-export interface ScrollContextInterface {
-  getScroll(): { x: number; y: number };
-  scrollTo(x?: number, y?: number): void;
-  enableScrollLock(): void;
-  disableScrollLock(): void;
-}
-
-export const ScrollContext = React.createContext<ScrollContextInterface>({
-  getScroll: () => ({ x: 0, y: 0 }),
-  scrollTo: noop,
-  enableScrollLock: noop,
-  disableScrollLock: noop,
-});
-
-export const useScroll = () => React.useContext(ScrollContext);
-
-export const globalScrollController = (
-  window: Window | undefined,
-  document: HTMLDocument | undefined
-): ScrollContextInterface => ({
-  getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
-  scrollTo: (x = 0, y = 0) => {
-    // Some iOS versions do not normalize scroll — do it manually.
-    window!.scrollTo(
-      x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
-      y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
-    );
-  },
-  enableScrollLock: () => {
-    const scrollY = window!.pageYOffset;
-    const scrollX = window!.pageXOffset;
-    const overflowY =
-      window!.innerWidth > document!.documentElement.clientWidth
-        ? "scroll"
-        : "";
-    const overflowX =
-      window!.innerHeight > document!.documentElement.clientHeight
-        ? "scroll"
-        : "";
-
-    Object.assign(document!.body.style, {
-      position: "fixed",
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
-      right: "0",
-      overflowY,
-      overflowX,
-    });
-  },
-  disableScrollLock: () => {
-    const scrollY = document!.body.style.top;
-    const scrollX = document!.body.style.left;
-
-    clearDisableScrollStyle(document!.body);
-    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
-  },
-});
-
-export const elementScrollController = (
-  elRef: React.RefObject<HTMLElement>
-): ScrollContextInterface => ({
-  getScroll: () => ({
-    x: elRef.current?.scrollLeft ?? 0,
-    y: elRef.current?.scrollTop ?? 0,
-  }),
-  scrollTo: (x = 0, y = 0) => {
-    const el = elRef.current;
-    // Some iOS versions do not normalize scroll — do it manually.
-    el?.scrollTo(
-      x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
-      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
-    );
-  },
-  enableScrollLock: () => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-    const scrollY = el.scrollTop;
-    const scrollX = el.scrollLeft;
-    const overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
-    const overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
-
-    Object.assign(el.style, {
-      position: "absolute",
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
-      right: "0",
-      overflowY,
-      overflowX,
-    });
-  },
-  disableScrollLock: () => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-
-    const scrollY = el.style.top;
-    const scrollX = el.style.left;
-
-    clearDisableScrollStyle(el);
-    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
-  },
-});
-
-export const useScrollLock = (enabled = true) => {
-  const { enableScrollLock, disableScrollLock } = useScroll();
-  useIsomorphicLayoutEffect(() => {
-    if (enabled) {
-      enableScrollLock();
-      return disableScrollLock;
-    }
-    return noop;
-  }, [enableScrollLock, disableScrollLock, enabled]);
-};

package/src/components/File/File.css

@@ -1,6 +0,0 @@
-.File {
-}
-
-.File__input {
-  display: none;
-}

package/src/components/SelectMimicry/SelectMimicry.css

@@ -1,10 +0,0 @@
-.Select--mimicry-plain {
-  padding: 8px 8px 8px 0;
-  text-transform: capitalize;
-  border-radius: 8px;
-}
-
-.Select--mimicry-plain .FormField__border {
-  background-color: transparent;
-  border: none;
-}